/* ★自動生成: scripts/build-css.mjs。直接編集しない。
   編集するのは tokens.json（値）/ scripts/templates/kadence-faithful-base.css（不変・共通）/ sites/asobit_software/css/decorations.css（装飾）。
   このCSSは静的プレビューと WP（サイトプラグイン site.css）の両方で使う＝共有。 */

/* ---------- (1) tokens (:root) <- sites/asobit_software/tokens.json ---------- */
:root {
  /* Kadence Global Palette（tokens.colors の9ロール写像。WP側は kadence_global_palette option が同値を出す） */
  --global-palette1: #046bd2; /* accent */
  --global-palette2: #f5aa00; /* accent-alt */
  --global-palette3: #1d1d1d; /* heading */
  --global-palette4: #555555; /* body */
  --global-palette5: #999999; /* muted */
  --global-palette6: #cccccc; /* border */
  --global-palette7: #f8f8f8; /* bg-subtle */
  --global-palette8: #f8f8f8; /* bg-alt */
  --global-palette9: #ffffff; /* base */
  --global-palette10: #0891b2;
  --global-palette11: #13612e;
  --global-palette12: #1159af;
  --global-palette13: #b82105;
  --global-palette14: #f7630c;
  --global-palette15: #f5a524;
  /* ロール別名（decorations.css での可読参照用） */
  --c-accent: var(--global-palette1);
  --c-accent-alt: var(--global-palette2);
  --c-heading: var(--global-palette3);
  --c-body: var(--global-palette4);
  --c-muted: var(--global-palette5);
  --c-border: var(--global-palette6);
  --c-bg-subtle: var(--global-palette7);
  --c-bg-alt: var(--global-palette8);
  --c-base: var(--global-palette9);

  /* Kadence 派生変数（テーマCSSが参照する。WP側は kadence-global-inline-css が同値を出す） */
  --global-palette-highlight: var(--global-palette1);
  --global-palette-highlight-alt: var(--global-palette2);
  --global-palette-highlight-alt2: var(--global-palette9);
  --global-palette-btn-bg: var(--global-palette1);
  --global-palette-btn-bg-hover: var(--global-palette2);
  --global-palette-btn: var(--global-palette9);
  --global-palette-btn-hover: var(--global-palette9);
  --global-palette-btn-sec-bg: var(--global-palette7);
  --global-palette-btn-sec-bg-hover: var(--global-palette2);
  --global-palette-btn-sec: var(--global-palette3);
  --global-palette-btn-sec-hover: var(--global-palette9);
  --global-fallback-font: sans-serif;
  --global-display-fallback-font: sans-serif;
  --global-body-font-family: 'Noto Sans JP', sans-serif;
  --global-heading-font-family: 'Noto Sans JP', sans-serif;
  --global-primary-nav-font-family: inherit;
  --global-content-width: 1140px;
  --global-content-edge-padding: 1.5rem;

  --wp--preset--font-family--heading: 'Noto Sans JP', sans-serif;
  --wp--preset--font-family--body: 'Noto Sans JP', sans-serif;

  --wp--preset--font-size--site-sm: 13px;
  --wp--preset--font-size--site-base: 14px;
  --wp--preset--font-size--site-lg: 20px;
  --wp--preset--font-size--site-xl: 30px;
  --wp--preset--font-size--site-2xl: 44px;
  --wp--preset--font-size--site-3xl: 117px;

  --wp--preset--spacing--space-xs: 8px;
  --wp--preset--spacing--space-sm: 16px;
  --wp--preset--spacing--space-md: 24px;
  --wp--preset--spacing--space-lg: 32px;
  --wp--preset--spacing--space-xl: 48px;
  --wp--preset--spacing--space-xxl: 72px;
  --wp--preset--spacing--space-xxxl: 96px;
  --wp--preset--spacing--space-xxxxl: 120px;

  --content-size: 1140px;
}

/* ---------- (1b) fontSize ユーティリティ ---------- */
/* fontSize ユーティリティ（tokens.fontSizes から生成） */
.has-site-sm-font-size { font-size: var(--wp--preset--font-size--site-sm); }
.has-site-base-font-size { font-size: var(--wp--preset--font-size--site-base); }
.has-site-lg-font-size { font-size: var(--wp--preset--font-size--site-lg); }
.has-site-xl-font-size { font-size: var(--wp--preset--font-size--site-xl); }
.has-site-2xl-font-size { font-size: var(--wp--preset--font-size--site-2xl); }
.has-site-3xl-font-size { font-size: var(--wp--preset--font-size--site-3xl); }

/* ---------- (2) Kadence 忠実ベース <- scripts/templates/kadence-faithful-base.css ---------- */
/* =====================================================================
   kadence-faithful-base.css — Kadence 環境の実描画を忠実に再現する「不変ベース」
   ---------------------------------------------------------------------
   ★全プロジェクト共通。サイトごとに書き換えない（＝WPシミュレータ層）。
   旧 wp-faithful-base.css（TT5版）の後継。重要な設計変更:

   1) レイアウトCSSは「WPが生成する」前提を捨て、この層が正になった。
      Kadence(クラシックテーマ)では wp_theme_has_theme_json()=false のため
      WP はレイアウトCSS（wp-container-*）を一切生成しない。
      → このファイルを静的とWP（サイトプラグイン site.css）の両方に配り、
        同一CSSで両者を描画する（模倣ではなく共有＝ズレが構造的に消えた）。

   2) inner-container 差の吸収（KADENCE-NOTES 参照）:
      WP は constrained/default の wp:group に旧式 __inner-container を挿入する
      （layoutクラスは inner 側、属性由来の class/inline style は外側）。
      静的は inner 無し（マークアップ規約は現行のまま）。
      → セレクタは常に「.is-layout-* 自身」と「その直接の子」だけに効かせる。
        CSS変数(--content-size / --wp--style--block-gap)は外側 inline から
        継承で inner に届くため、この形なら両構造で同一に解決される。
        ※ .is-layout-flex には WP も inner を付けない（コア実装で確認済み）。

   3) 色は Kadence Global Palette 系（--global-palette1..15 /
      has-theme-palette{N}-color）。:root の実値は build-css が tokens から生成。
   ===================================================================== */

/* box-sizing
   ★疑似要素も含める。Kadence は html{border-box} ＋ *,*::before,*::after{inherit}＝WP では ::before/::after も
   border-box。静的は Kadence の CSS を読まない＝ここに書かないと疑似要素だけ content-box になり、
   枠線付きの丸（34px＋枠 1px）が静的でだけ 36px になって行の高さが 2px ずつずれた（asobit_v2 のお知らせ 2026-09-27）。 */
*, *::before, *::after { box-sizing: border-box; }
.wp-block-group { box-sizing: border-box; }

/* body margin: alignfull が端まで届く前提 */
html, body { margin: 0; }

/* body 背景／文字色: palette9=ページ地・palette4=本文（規約）。
   Kadence 側も同じ palette を site_background/typography に注入する（tokens-to-kadence）。 */
body { background-color: var(--global-palette9, #ffffff); color: var(--global-palette4, #2D3748); }

/* フォーム控えの normalize＋本文フォント継承（M7-5・Kadence 写し）。
   出所①: global.min.css の normalize「button,input,optgroup,select,textarea{font-size:100%;margin:0}」
   出所②: kadence-global-inline-css（theme_mods から動的生成）の「body,input,select,optgroup,textarea{font-family:var(--global-body-font-family)}」
   text/select/textarea は KB フォームCSS（font-family:inherit）が上書きするので差が出ないが、
   checkbox/radio の <input> はそれに含まれず、この2本が無いと静的だけ UA 既定（Arial/13.3px）になる（measure で実検出）。 */
button, input, optgroup, select, textarea { font-size: 100%; margin: 0; }
body, input, select, optgroup, textarea { font-family: var(--global-body-font-family, inherit); }
/* ★出所③（2026-07-31 追加）: 同じ kadence-global-inline-css の **行間**。写しが無いと静的だけ
   `line-height: normal` になり、**decorations で行間を指定していない素の段落だけ** WP と食い違う
   （watanabe の仮ページ4枚で measure が検出＝装飾を書いていない箇所ほど出る）。
   値の単一の正は scripts/compile/tokens-to-kadence.mjs の base_font.lineHeight。 */
body, input, select, optgroup, textarea { line-height: 1.7; }

/* screen-reader-text（WP/Kadence 標準の視覚非表示ユーティリティ。global.min.css 写し）。
   accept（同意チェック）の SR 用 legend が使う＝無いと静的だけ legend が見えて行高が +1行 嵩む（measure で実検出）。 */
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; }

/* legend の normalize（global.min.css 写し。M7-5）: UA 既定の padding-inline 2px を落とす＝
   checkbox/radio の凡例（kb-adv-form-label legend）が静的だけ 4px 広くなるのを防ぐ（measure で実検出）。
   fieldset 自体は KB フォームCSS「fieldset.kb-radio-check-item-wrap{padding:0;margin:0;border:0}」が両側で効く。 */
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
legend { font-weight: bold; }

/* constrained: 「子」を contentSize 幅に絞る。
   WP側は .is-layout-constrained が inner に付くが、「> *」は同じく中身に効く。 */
.is-layout-constrained > * { max-width: var(--content-size, 1140px); margin-left: auto; margin-right: auto; }
.is-layout-constrained > .alignfull { max-width: none; }
/* ★`width` は書かない（2026-09-11 に外した）。
   ここは静的を WP に合わせるための写しだが、この 1 枚は **WP にも site.css として配られる**＝
   わたしたちが作っていないページ（投稿の個別・アーカイブ・検索結果）にも届く。
   Kadence の本物は `.alignfull { width: var(--global-vw,100vw); margin: 0 calc(50% - var(--global-vw,100vw)/2) }`
   ＝**読み幅の狭い器の中にいても視野いっぱいに広がる**。そこへ `width:100%` を上書きすると
   幅だけ器の内側（794px）に戻り、負マージンだけが残る＝**左へはみ出す**。
   実害: 投稿の個別ページ下の「関連記事」が左にずれていた（asobit・顧客の指摘 2026-09-11）。
   ★静的では親がいっぱいなのでブロック要素は元から親幅＝`width` は元々要らなかった
   （`max-width:none` だけで `.is-layout-constrained > *` の絞りは外れる）。 */
.alignfull { max-width: none; }

/* block-gap（flow/constrained）: CSS gap: は flow に無効なので margin-block-start で再現。
   値は外側 inline の --wp--style--block-gap（inject-block-gap.mjs が補完）→ inner にも継承で届く。 */
.is-layout-constrained > * + *,
.is-layout-flow > * + * { margin-block-start: var(--wp--style--block-gap, 0); }

/* 段落・見出しの既定マージン除去（要素間スペースは block-gap / flex gap が出す）。
   element 指定（低詳細度）にするのがミソ＝block-gap 側が勝てる。 */
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }

/* flex: align-items:flex-start（子が内容幅に縮む）。WP は flex に inner を付けない＝完全同一。
   gap は --wp--style--block-gap（static-layout.mjs が blockGap 属性から供給。WP生成CSSと同じ既定 0.5em）。 */
.is-layout-flex { display: flex; flex-wrap: wrap; gap: var(--wp--style--block-gap, 0.5em); align-items: flex-start; }
.is-layout-flex.is-vertical { flex-direction: column; }
/* ★WP の global-styles-inline-css の写し（2026-07-31 追加）。**flex 直下の子は margin が 0 にされる**。
   `:is(*, div)` は中の最大＝div(0,0,1) を採るので **(0,1,1)** ＝ 部品クラス1つ `.c-xxx`(0,1,0) では
   **順序に関係なく負ける**（同点負けではなく詳細度負け＝validate-cascade でも見えない層）。
   写しが無いと「静的では余白が付いているのに WP では 0」になる。実害: dosha フッター見出しの 4px、
   watanabe フッター住所の 48px などが本番で丸ごと消えていた（measure のフッター対応で発覚）。
   ★意図した余白は **クラス2つ以上**（`.c-xxx.c-xxx`）で書けば両方で生きる。 */
.is-layout-flex > :is(*, div) { margin: 0; }
/* justifyContent（WP はレンダ時に is-content-justification-* を付与＝static-layout が静的にも付与） */
.is-content-justification-center { justify-content: center; }
.is-content-justification-right { justify-content: flex-end; }
.is-content-justification-space-between { justify-content: space-between; }

/* columns: 縦揃えはクラス起点 */
.wp-block-columns { display: flex; gap: var(--wp--preset--spacing--space-xl, 48px); }
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-column.is-vertically-aligned-center { align-self: center; }

/* figure の UA 既定マージン除去は【要素セレクタ】で（.wp-block-image クラスで書くと
   block-gap（.is-layout-constrained > * + *）と同詳細度・後勝ちになり画像の上間隔が消える） */
figure { margin: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; }  /* vertical-align: baseline 空白（数px）除去＝Kadence 側と一致 */
/* ★コア（block-library image）の写し。WP では `.wp-block-image img`(0,1,1) が上の要素セレクタに勝って
   bottom になる＝写しが無いと静的だけ middle。display:block の画像では見た目に出ないが、
   インライン画像で数px ずれる（validate-cascade が全サイトで挙げていた）。 */
.wp-block-image img { vertical-align: bottom; }
/* ★同じくコアの写し。**画像にリンクを張った瞬間**に効く（`linkDestination` を宣言した画像＝
   `<figure class="wp-block-image"><a><img></a></figure>`）。WP だけ `inline-block` になるので、
   写しが無いと静的の a は `inline`＝行ボックスの高さが変わり、画像の下に数px の隙間が出る。
   ★「画像にリンクを張る」まで 1 サイトも踏まなかった＝踏んだ時に初めて出る層（asobit 2026-09-11）。 */
.wp-block-image > a, .wp-block-image > figure > a { display: inline-block; }
.wp-block-image.alignfull > a, .wp-block-image.alignwide > a { width: 100%; }
.is-layout-constrained > .wp-block-image { margin-left: auto; margin-right: auto; }

/* テキスト配置 */
.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-right { text-align: right; }

/* ★Kadence の button/.button 基礎（global.min.css の写し・M3）。
   splide の矢印/ドット、KB フォームの送信ボタン、アコーディオンヘッダーなど【素の button 要素】に
   WP 側はこれが当たる。写さないと静的だけ UA 既定（Arial 13px 黒）になり measure が落ちる（M3 実測）。
   ★配置は has-theme-palette* ユーティリティの【前】（Kadence 本体と同じ相対順＝has-* が後勝ち）。 */
/* ★Kadence global.min.css の normalize の写し（2026-07-31）。ファイル欄の「ファイルを選択」ボタンは
   UA 既定だと Arial 固定＝静的だけ本文書体を継承せず、**欄の高さが 3px 低くなる**（contact の measure が検出）。 */
::-webkit-file-upload-button { -webkit-appearance: button; appearance: button; font: inherit; }

button, .button, .wp-block-button__link, .wp-element-button, input[type=button], input[type=reset], input[type=submit] {
  border-radius: 3px; background: var(--global-palette-btn-bg); color: var(--global-palette-btn);
  padding: .4em 1em; border: 0; font-size: 1.125rem; line-height: 1.6; display: inline-block;
  font-family: inherit; cursor: pointer; text-decoration: none; transition: all .2s ease;
  box-shadow: 0px 0px 0px -7px rgba(0,0,0,0);
}
button:hover, button:focus, button:active,
.button:hover, .button:focus, .button:active,
.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link:active,
.wp-element-button:hover, .wp-element-button:focus, .wp-element-button:active,
input[type=button]:hover, input[type=button]:focus, input[type=button]:active,
input[type=reset]:hover, input[type=reset]:focus, input[type=reset]:active,
input[type=submit]:hover, input[type=submit]:focus, input[type=submit]:active {
  color: var(--global-palette-btn-hover); background: var(--global-palette-btn-bg-hover);
  box-shadow: 0px 15px 25px -7px rgba(0,0,0,.1);
}

/* ★Kadence Global Palette ユーティリティ（15色固定＝ここに焼ける）。
   Kadence テーマ assets/css/global.min.css と同一実装（!important 無し）。
   旧P7（has-text-color の !important 衝突）はこの体系では起きない。 */
.has-theme-palette-1-color { color: var(--global-palette1); }
.has-theme-palette-2-color { color: var(--global-palette2); }
.has-theme-palette-3-color { color: var(--global-palette3); }
.has-theme-palette-4-color { color: var(--global-palette4); }
.has-theme-palette-5-color { color: var(--global-palette5); }
.has-theme-palette-6-color { color: var(--global-palette6); }
.has-theme-palette-7-color { color: var(--global-palette7); }
.has-theme-palette-8-color { color: var(--global-palette8); }
.has-theme-palette-9-color { color: var(--global-palette9); }
.has-theme-palette-10-color { color: var(--global-palette10); }
.has-theme-palette-11-color { color: var(--global-palette11); }
.has-theme-palette-12-color { color: var(--global-palette12); }
.has-theme-palette-13-color { color: var(--global-palette13); }
.has-theme-palette-14-color { color: var(--global-palette14); }
.has-theme-palette-15-color { color: var(--global-palette15); }
.has-theme-palette-1-background-color { background-color: var(--global-palette1); }
.has-theme-palette-2-background-color { background-color: var(--global-palette2); }
.has-theme-palette-3-background-color { background-color: var(--global-palette3); }
.has-theme-palette-4-background-color { background-color: var(--global-palette4); }
.has-theme-palette-5-background-color { background-color: var(--global-palette5); }
.has-theme-palette-6-background-color { background-color: var(--global-palette6); }
.has-theme-palette-7-background-color { background-color: var(--global-palette7); }
.has-theme-palette-8-background-color { background-color: var(--global-palette8); }
.has-theme-palette-9-background-color { background-color: var(--global-palette9); }
.has-theme-palette-10-background-color { background-color: var(--global-palette10); }
.has-theme-palette-11-background-color { background-color: var(--global-palette11); }
.has-theme-palette-12-background-color { background-color: var(--global-palette12); }
.has-theme-palette-13-background-color { background-color: var(--global-palette13); }
.has-theme-palette-14-background-color { background-color: var(--global-palette14); }
.has-theme-palette-15-background-color { background-color: var(--global-palette15); }

/* ボタン（基本。色は has-theme-palette* かインラインで付与） */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--space-sm, 16px); }
.wp-block-button__link {
  display: inline-block; text-decoration: none; cursor: pointer;
  padding: 16px 36px;   /* Kadence 既定(.4em 1em)は使わず、中立な四角ボタンを土台にする（decorations で上書き可） */
  /* ★フォントは Kadence global.min.css のボタン既定を写す（button,.button,.wp-block-button__link{…}）。
     写さないと静的だけ body の font-size/line-height を継承し、WP と 高さ5px・幅15px ずれる（M2 実測）。 */
  font-size: 1.125rem;
  line-height: 1.6;
  border-radius: 0; /* 四角＝中立。角丸が欲しい設計だけ decorations で */
  /* ★コア（block-library button）の写し。WP は `.wp-block-button__link{text-align:center}` を出すので、
     写しが無いと **2行になったボタンの文字だけ** 静的=左寄せ / WP=中央 で食い違う。 */
  text-align: center;
}
.is-style-outline > .wp-block-button__link { background-color: transparent; border: 2px solid currentColor; }

/* ロゴリンク（静的ヘッダー用） */
.site-logo-text a { color: inherit; text-decoration: none; }

/* ★コア（block-library table）の写し。器の横スクロールだけを写す（2026-07-31）。
   `.wp-block-table td,th{border:1px solid;padding:.5em}` は**写さない**＝写すと静的にも
   currentColor の黒い格子が出てしまう。あちらは「サイト側が `.wp-block-table.c-*` の
   クラス2つで打ち消す」のが正（㉔）。ここで写すのは見た目に副作用の無い overflow だけ。 */
.wp-block-table { overflow-x: auto; }

.wp-block-list { padding-left: 1.2em; }
.wp-block-list li { margin-bottom: var(--wp--preset--spacing--space-xs, 8px); }
.wp-block-separator { border: none; border-top: 1px solid var(--c-border, var(--global-palette6)); margin: var(--wp--preset--spacing--space-xl, 48px) auto; }

/* Cover のプリミティブ（保存正規形＝dim span を含む。KADENCE-NOTES M1 の採取参照） */
/* ★min-height:430px はコア（wp-block-library）の cover 既定値。写しが無いと「minHeight を指定しない cover」で
   静的だけ内容高になり WP(430px) と食い違う（M6-3 の measure が sec-join で検出）。inline の min-height を
   持つ cover はそちらが勝つので既存サイトに影響しない。 */
/* ★2026-07-31: `justify-content:center` / `overflow:clip` / 下の色4本は **コアの写し漏れ**だった。
   WP では効いていて静的では効かない＝validate-cascade が全サイトで同じ差分を挙げ続けていた
   （dosha 30件中5件・watanabe 47件中7件がこれ）。写しを足すと静的が WP と同じ計算値になる。 */
/* ★padding は **1em**（コアの実値）。16px と書くと font-size を下げた cover でだけ食い違う
   （asobit_software のヒーローは fs14px ＝ 本番 14px / 静的 16px で上下 2px ずれていた・本番実測で確認）。 */
.wp-block-cover { position: relative; display: flex; align-items: center; justify-content: center; overflow: clip; padding: 1em; min-height: 430px; background-size: cover; background-position: center; }
/* ★max-width:none が要る: 上の汎用 `img{max-width:100%}` は同詳細度(0,0,1 vs 0,1,0)でクラス側が勝つが、
   静的側にこの写しが無いと「背景画像だけ 100% で頭打ち」＝WP(none)と食い違う。 */
.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: 0; }
.wp-block-cover__background { position: absolute; inset: 0; z-index: 1; background-color: currentColor; }
/* ★cover の既定文字色（コア cover/style.css）。詳細度0の :where なので decorations は素通しで勝てる。
   写しが無いと cover 直下で色を明示していない要素だけ 静的=body色 / WP=白 になる。
   ここが currentColor 起点なので、dim span と背景画像の border-color の差も同時に消える。 */
:where(.wp-block-cover-image:not(.has-text-color)), :where(.wp-block-cover:not(.has-text-color)) { color: #fff; }
:where(.wp-block-cover-image.is-light:not(.has-text-color)), :where(.wp-block-cover.is-light:not(.has-text-color)) { color: #000; }
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover-image .wp-block-cover__inner-container { color: inherit; }
:root :where(.wp-block-cover h1:not(.has-text-color)), :root :where(.wp-block-cover h2:not(.has-text-color)),
:root :where(.wp-block-cover h3:not(.has-text-color)), :root :where(.wp-block-cover h4:not(.has-text-color)),
:root :where(.wp-block-cover h5:not(.has-text-color)), :root :where(.wp-block-cover h6:not(.has-text-color)),
:root :where(.wp-block-cover p:not(.has-text-color)) { color: inherit; }
/* dim span の地色はコアでは #000 固定（上の currentColor 版より詳細度が高い）。写しが無いと静的だけ文字色になる。 */
.wp-block-cover .has-background-dim:not([class*="-background-color"]),
.wp-block-cover-image .has-background-dim:not([class*="-background-color"]),
.wp-block-cover-image.has-background-dim:not([class*="-background-color"]),
.wp-block-cover.has-background-dim:not([class*="-background-color"]) { background-color: #000; }
/* ★dim span の opacity は「コアと同じ詳細度」で写すこと。コア（wp-includes/blocks/cover/style.css）は
     `.wp-block-cover .wp-block-cover__background`                                     (0,2,0) → opacity .5
     `.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-0` (0,4,0) → opacity 0
   ここを (0,2,0) と甘く写すと、decorations が `.sec-x .wp-block-cover__background`(0,2,0) で暗幕を上書きしたとき
   **静的だけ後勝ちで効き、WP ではコア(0,4,0)に負けて消える**＝静的とWPで見た目が食い違う。
   （M6-3 実測: ヒーローの scrim と Join のオレンジ帯が WP でだけ消え、白い写真に白文字で読めなくなった）
   dim span は「無効化された枠」として触らないのが規約＝**暗幕は decorations の ::before（z-index 1）で作る**。 */
.wp-block-cover .wp-block-cover__background,
.wp-block-cover .wp-block-cover__gradient-background { opacity: 0.5; }
.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-0,
.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-0 { opacity: 0; }
.wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; }

/* =====================================================================
   ★Kadence テーマ（content.min.css）由来の上書き — WP と同じカスケード順で「後」に置く
   ---------------------------------------------------------------------
   WP では Kadence のテーマCSSが WP コアのブロックCSSより後に読まれ、同詳細度で後勝ちする。
   静的でも同じ順序（＝この位置）に置かないと結果が変わる。実例:
     .wp-block-cover{padding:16px}(上のCoverプリミティブ) と .alignfull{padding-left:0} は
     どちらも詳細度 0,1,0 → 先に書いた方が負ける。WP では Kadence が後＝0 が勝つ。
   ===================================================================== */

/* alignfull/alignwide は左右 padding を持たない（Kadence content.min.css の写し）。
   これが無いと cover(.alignfull) の左右に padding が残り、モバイルで WP と幅が食い違う。 */
.alignfull, .alignwide { padding-left: 0; padding-right: 0; }

/* 背景色つきグループの既定 padding（Kadence content.min.css: .wp-block-group.has-background{padding:20px 30px}）。
   上下は保存正規形の inline style が勝つ（inline > class）が、【左右の 30px は Kadence が与える】＝
   静的に写さないと、モバイルでだけ本文の左右余白が消えて折り返しと総高が WP とズレる（M2 で実測）。
   デスクトップは中央寄せ（contentSize）で位置が決まるため差が出ず、M1 では見えていなかった。 */
.wp-block-group.has-background { padding: 20px 30px; }

/* レスポンシブの不変部分 */
@media (max-width: 767px) {
  .wp-block-columns { flex-direction: column; gap: var(--wp--preset--spacing--space-lg, 32px); }
  [style*="flex-basis:0"] { flex-basis: 100% !important; }
}

/* ---------- (2b) Kadence 打ち消し層 <- scripts/templates/kadence-overrides.css ---------- */
/* =====================================================================
   kadence-overrides.css — Kadence 打ち消し層（★静的とWPの両方に連結する）。
   ---------------------------------------------------------------------
   ★全サイト共通・不変。build-css.mjs が style.css の (2b) として連結＝静的にも入る。
     静的側の受け皿は _layout.html の <main class="entry-content single-content">（Kadence 実DOM の写し）。

   ★★「WP専用」にしてはいけない（M6-3 の実バグ。以前はそうなっていた）:
     下の block-gap 再宣言は `.single-content .is-layout-constrained > * + *`(0,3,0) で、
     サイト側 decorations の部品クラス（`.c-mphoto`(0,1,0) 等）より**詳細度が高い**。
     ＝「decorations の前に置けばサイトの意図が上に乗る」という前提は成立しない。
     この層が WP にしか無いと decorations の意図が WP でだけ踏み潰される＝静的では正しく WP でだけ壊れ、
     しかも measure は「静的==WP」を見るので原理的に検出できない
     （実害: 絶対配置の figure に block-gap 80px が乗り、重ね写真が WP でだけ下にずれた）。
     静的とWPを「同じCSS・同じDOM」にして初めて、食い違いは機械が捕まえられる。

   前提: site.css は kadence-content より後に enqueue される（plugin-scaffold が deps 指定）。

   根拠（実測 2026-07-13 / KADENCE-NOTES M1）:
   - Kadence content.min.css は `.single-content h2..h6 { margin:1.5em 0 .5em }`、
     `.single-content p, …, .wp-block-buttons, .wp-block-cover, … { margin: 0 0 var(--global-md-spacing) }`
     を出す（詳細度 0,1,1）。faithful-base の要素セレクタ（0,0,1）では勝てないため、
     ここで同詳細度・後勝ちで 0 に戻し、「余白はブロック側（padding/blockGap）が正」を守る。
   ===================================================================== */

/* Kadence の single-content 要素マージンを無効化（faithful-base の設計が正） */
.single-content p,
.single-content h1, .single-content h2, .single-content h3,
.single-content h4, .single-content h5, .single-content h6,
.single-content ul, .single-content ol, .single-content table, .single-content form,
.single-content .wp-block-buttons, .single-content .wp-block-button,
.single-content .wp-block-cover, .single-content .wp-block-group,
.single-content .wp-block-image, .single-content figure { margin: 0; }

/* ★Kadence content.min.css は figure/image を「二重の詳細度」で余白付けする（M6 で実測）:
   `.single-content figure.wp-block-image { margin-bottom: var(--global-md-spacing) }`（詳細度 0,2,1）。
   上の 0,2,0 リセットでは勝てず、縦フローでは block-gap との margin 相殺で隠れるが、
   flex 横並び行では figure の margin-bottom が行の高さに直接加算されて露出する（メディア行の +32px）。
   同一詳細度・後勝ちで確実に 0 に戻す。 */
.single-content figure.wp-block-image { margin-bottom: 0; }

/* block-gap 再現を上のリセットより強い詳細度で再宣言（margin ショートハンドに負けない） */
.single-content .is-layout-constrained > * + *,
.single-content .is-layout-flow > * + * { margin-block-start: var(--wp--style--block-gap, 0); }

/* ★上の再宣言の詳細度は `*` が加算されないので **0,2,0**（冒頭コメントの「0,3,0」は誤り）。
   Kadence content.min.css は投稿一覧を**要素名つきクラス**で殴る:
     `ul.kadence-posts-list, .single-content ul.kadence-posts-list { padding:0; margin:0; list-style:none }`（0,2,1）
   ＝0,2,0 に勝ってしまい、**見出し直後に置いた asbsb:posts の上余白（block-gap）が丸ごと消える**
   （実害: asobit_software TOP の「News」見出しと黒カードが密着＝gap 0px。静的でもWPでも同じに消えるので
    measure は素通り）。要素名を足して 0,3,1 で戻す。site.css は content.min.css より後＝静的もWPも同順。 */
.single-content .is-layout-constrained > * + ul.kadence-posts-list,
.single-content .is-layout-flow > * + ul.kadence-posts-list { margin-block-start: var(--wp--style--block-gap, 0); }

/* constrained 直下の子の中央寄せも同様に再宣言（margin:0 リセットに勝たせる） */
.single-content .is-layout-constrained > * { margin-left: auto; margin-right: auto; }
.single-content .is-layout-constrained > .alignfull { max-width: none; }

/* リスト余白（faithful-base と同値を single-content 詳細度で） */
.single-content .wp-block-list { padding-left: 1.2em; }
.single-content .wp-block-list li { margin-bottom: var(--wp--preset--spacing--space-xs, 8px); }

/* フッター: Kadence の行 padding（既定 30px 上下）を無効化。
   フッターの余白は site.css の .site-footer（静的とWP共通）に一元化する。 */
.site-footer .site-footer-row { padding-top: 0; padding-bottom: 0; }

/* ★スマホの本文左右余白（2026-07-22 追加。レシピ= MIGRATION-RECIPES §⑧ / 実測= KADENCE-NOTES 2026-07-22）
   Kadence の左右余白 `.site-container{padding:0 var(--global-content-edge-padding,1.5rem)}` は
   **ヘッダー／フッターの枠にしか効かず**、本文ラッパ `.single-content` は padding 0。
   本文セクションはほぼ全て alignfull（`width:100%`・自前の余白なし）なので、SP では
   背景帯・カード・白パネル・見出しが**画面の端から端まで**張り付く。
   → セクション自身に padding を置く＝**背景帯は端まで残り、中身だけ内側に入る**（完コピの帯を壊さない）。
   ヒーロー（全幅ビジュアル＝ sec-hero / sec-hero-wrap / sec-hero-mv）は除外して端まで見せる。
   調整はサイト側 decorations の `:root{--asbsb-sp-gutter:…}`。
   ★個別に全幅へ戻したい箱は decorations で同詳細度以上（0,2,0）に当てる:
     `@media (max-width:767px){ .single-content > .sec-x{padding-left:0;padding-right:0} }` */
@media (max-width: 767px) {
  .single-content > *:not([class*="sec-hero"]) {
    padding-left: var(--asbsb-sp-gutter, 18px);
    padding-right: var(--asbsb-sp-gutter, 18px);
  }
  /* `.alignfull` は**負マージンを持たない**（`max-width:none;width:100%` だけ）＝親に padding が付くと
     入れ子の全幅ブロックは左だけずれて幅は親の外寸のまま＝右が溢れる。しかも祖先の overflow に
     クリップされ `document.scrollWidth` に出ない（横スクロール検査では捕まらない）。通常幅に収める。 */
  .single-content > *:not([class*="sec-hero"]) > .alignfull {
    width: auto; margin-left: 0; margin-right: 0;
  }
}

/* =====================================================================
   投稿まわりの器（お知らせ一覧・記事・検索・404）＝**WP が描くページ**の読み幅と上下の空き。
   ---------------------------------------------------------------------
   ★全サイトが踏む（asobit で実害・2026-09-12 ユーザー指摘 2 件）。
     `tokens-to-kadence.mjs` は **全サイト共通で** `page_layout:'fullwidth'` /
     `page_vertical_padding:'hide'` /（投稿一覧も）`post_archive_layout:'fullwidth'` を書く。
     制作ページは「帯が画面いっぱい」の設計なのでそれで正しいが、この設定はテーマ全体に効くので
     **WP が描く投稿系のページまで器が外れる**:
       .content-width-fullwidth .content-container.site-container{max-width:none;padding:0}   (0,3,0)
         → 文章が画面の左端から始まる（実測 1440: x=0 幅 1440）
       .content-width-fullwidth .content-area{margin-top:0;margin-bottom:0}                   (0,2,0)
         → 見出し帯のすぐ下から 1 件目が始まり、最後の記事もフッターにくっつく（実測: 空き 0）
   ★静的プレビューには当たらない（`body.blog` も `.content-container` も静的の DOM に無い）＝
     この層は「WP でだけ起きるズレを WP と同じ CSS で埋める」役。固定ページにも当たらない。
   ★**縦の空きは `#primary` の margin で取る**。器（.content-container）に padding を足すと、
     中で最後に来る関連記事の**灰色帯が下端まで届かず**、帯の下に地の色が残る
     （`.entry-related` は器の中の最後の子）。
   調整はサイト側 decorations の :root で（既定は「テーマ本来の値」）:
     --asbsb-post-width   読み幅（既定 = --global-content-width＝tokens.contentSize）
     --asbsb-post-gutter  左右の余白（既定 = --global-content-edge-padding）
     --asbsb-post-space   上下の空き（既定 = --global-xxl-spacing。スマホは --asbsb-post-space-sp）
   ===================================================================== */
body.blog .content-container.site-container,
body.archive .content-container.site-container,
body.single-post .content-container.site-container,
body.search .content-container.site-container,
body.error404 .content-container.site-container {
  max-width: var(--asbsb-post-width, var(--global-content-width, 1290px));
  padding-left: var(--asbsb-post-gutter, var(--global-content-edge-padding, 1.5rem));
  padding-right: var(--asbsb-post-gutter, var(--global-content-edge-padding, 1.5rem));
}

body.blog #primary.content-area,
body.archive #primary.content-area,
body.single-post #primary.content-area,
body.search #primary.content-area,
body.error404 #primary.content-area {
  margin-top: var(--asbsb-post-space, var(--global-xxl-spacing, 5rem));
  margin-bottom: var(--asbsb-post-space, var(--global-xxl-spacing, 5rem));
}

@media (max-width: 767px) {
  body.blog #primary.content-area,
  body.archive #primary.content-area,
  body.single-post #primary.content-area,
  body.search #primary.content-area,
  body.error404 #primary.content-area {
    margin-top: var(--asbsb-post-space-sp, 40px);
    margin-bottom: var(--asbsb-post-space-sp, 40px);
  }
}

/* =====================================================================
   投稿本文の既定の余白（顧客が普通に書いた記事が読める形になる最低限）。
   ---------------------------------------------------------------------
   ★なぜ要るか: この層の冒頭で `.single-content p / h1..h6 / ul / figure …{margin:0}` と
     **要素の既定マージンを全部消して**いる（完コピした制作ページは余白をブロック属性で明示するため）。
     固定ページの本文はセクション（`is-layout-constrained`）の中なので block-gap が間隔を供給するが、
     **投稿本文のルートは `.entry-content.single-content` そのもの**で `is-layout-*` が付かない＝
     どこからも間隔が来ず、**段落も見出しも全部くっつく**（実測 gap 0px）。
   ★これは全サイトが踏む。実際に asobit_software（2026-08-09）と watanabe（2026-07）が
     **別々に同じ修正を自分の decorations に書いていた**＝共通層の穴。ここに既定を置く。
   ★`body.single-post` に限る。`.single-content` は固定ページの本文枠でもあるので、素で書くと
     全ページの余白が動いて measure が全滅する。
   ★隣接セレクタ（`* + *`）で**上**に置く＝最後の要素に余分な下余白が残らない。サイト側が
     下マージンで書いていても**隣り合う余白は相殺される**（合算されない）ので二重にはならない。
   値はサイト側 decorations の :root で調整（既定は em＝本文サイズに追従）:
     --asbsb-post-gap  段落の間 / --asbsb-post-gap-head  見出しの上 /
     --asbsb-post-gap-after-head  見出しの直後 / --asbsb-post-gap-head-head  見出しが続く時
   ===================================================================== */
body.single-post .single-content > * + * { margin-block-start: var(--asbsb-post-gap, 1.4em); }
body.single-post .single-content > * + :is(h2, h3, h4, h5, h6) { margin-block-start: var(--asbsb-post-gap-head, 2.4em); }
body.single-post .single-content > :is(h2, h3, h4, h5, h6) + * { margin-block-start: var(--asbsb-post-gap-after-head, 0.8em); }
body.single-post .single-content > :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) { margin-block-start: var(--asbsb-post-gap-head-head, 1.4em); }

/* ---------- (2c) ヘッダーの語彙 <- sites/asobit_software/header.json ---------- */
/* header.json に追加の語彙宣言なし */

/* ---------- (2d) 形と質感の語彙 <- tokens.shapes ---------- */
/* tokens.shapes の宣言なし */

/* ---------- (3) サイト固有の装飾 <- sites/asobit_software/css/decorations.css ---------- */
/* =====================================================================
   decorations.css — asobit software（アソビット合同会社）
   Astra + Elementor 版 shop.asobit.jp の Gutenberg 移植（ピクセルパーフェクト）。
   数値は元サイトの実測値（computed style / getBoundingClientRect, viewport 1440）。
   規約 v2: セクション sec-* / 部品 c-* クラス起点（DESIGN-RULES §3）。静的と WP で同一物を共有。
   実測: 特大見出し117/700/lh1.0・News/関連30/700・svc-en35/600・svc-jp16/400#555・
         本文14#999・カード pad70 60 / radius30 / border#ccc・ヘッダー地#f8f8f8・反転#242424。
   ===================================================================== */

/* ---------- サイト演出（fx）の site 側調整（asbsb-fx.css の既定を上書き。静的とWPで共有） ---------- */
:root {
  /* 大きい英文見出し専用フォント。使う見出し=TOPの From Zero to One… ／フッターCTA（毎ページ）／
     About の AI & Total Produce. ／OUR STRENGTHS の4箇所だけ（var(--font-display) を検索すれば全部出る）。
     ★2026-07-30: League Gothic は **tokens.localFonts で自前ホスト**（Google Fonts から外した）。
       Google Fonts 依存だと本番の最適化プラグイン（FlyingPress の「Google Fonts をローカルに取り込む」）が
       woff2 を落とし、この4箇所だけが Noto Sans JP 400 の「細い貧弱な字」に化けた。理由と実測＝
       scripts/compile/fonts-local.mjs 冒頭。
     ★フォールバックは**細い和文ゴシックに落とさない**: 400 の Noto Sans JP が 60〜160px で出ると
       別物に見える（ユーザー指摘の症状そのもの）。まず各OSの細長い英文書体を挟み、
       最後の砦だけ和文ゴシックにする。iOS には該当書体が無いので効かないが、
       Win/mac/Android では「似た印象」で着地する。 */
  --font-display: 'League Gothic', 'Oswald', 'Archivo Narrow', 'Haettenschweiler',
    'Arial Narrow', 'Liberation Sans Narrow', 'Roboto Condensed', Impact,
    var(--wp--preset--font-family--heading), sans-serif;

  /* TOPへ戻る サークルメーター: 反転色 #242424 の丸＋白リング（元は黒#000。サイトの暗色に合わせる） */
  --fx-backtop-size: 46px; --fx-backtop-bg: #242424; --fx-backtop-fg: #ffffff;
  --fx-backtop-ring: #ffffff; --fx-backtop-right: 22px; --fx-backtop-bottom: 22px;

  /* ヒーロー右下ロゴの線描き演出 anim-draw の調整（線の色・太さ・速さ。ここを書き換えれば即反映）
     ★ease だと序盤に大半が描かれ「すぐ出来上がって見える」＝手描き感は linear（等速）が正
     （ユーザー指摘 2026-07-22。秒数を増やしても解決しなかった原因。DESIGN-FEEDBACK 記録済） */
  --anim-draw-color: #ffffff;   /* 線の色（既定=白） */
  --anim-draw-width: 1.2;       /* 線の太さ（2→1.2。ユーザー指摘=もう少し細く） */
  --anim-draw-ease: linear;     /* 描く速度曲線（既定 ease → 等速。ユーザー指摘=描いて見えない） */
  --anim-draw-overlap: .8;      /* 文字の重なり（常時4〜6本のペンが同時に走る＝より流れる。0=もたつく/1=一斉） */
  --anim-draw-dur: 5s;          /* 線を描く速さ（3.4s→5s。ユーザー指摘=かなりゆっくり） */
  --anim-draw-fill-dur: .5s;    /* 色が出る速さ（描き終えたらすぐカラー） */
  --anim-draw-fade: .4s;        /* 白線が消える速さ */

  /* プリローダー（画面遷移）の logo-draw 調整（ユーザー指摘 2026-07-22=黒線の描画だけ・ゆっくり・総待ちは短く） */
  --asbsb-pl-draw-ease: linear; /* 等速で描く（ease だと描いて見えない） */
  --asbsb-pl-draw-overlap: .9;  /* TOP遷移はほぼ全部の線が同時に走る（ユーザー指示=最初のアニメに近い勢い） */
  --asbsb-pl-draw-dur: 2.8s;    /* 描く速さ（2.4s→2.8s。線のみになった分ゆっくりでも総待ちは短い） */
  --asbsb-pl-draw-width: 1;     /* 線の太さ（既定 1.4 → 細く） */
  --asbsb-pl-draw-fill: 0;      /* 塗り工程なし＝黒線を描いたまま終わる（カラー切替なし。総待ち 3.3s→約3.15s） */

  /* force-motion（オプトイン語彙）: OS の「視差効果を減らす」でもアニメを止めない（ユーザー決定 2026-07-21。
     完コピ元の Elementor が reduce を無視して常時アニメのため追従。DESIGN-FEEDBACK 記録済）。
     共有アセット(asbsb-animations/fx/hero-slider)がこの変数を見て reduce 判定を無効化する。 */
  --asbsb-force-motion: 1;
}

/* ---------- ベースタイポ ---------- */
body {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--site-base);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0;
  color: var(--c-body);
}
.wp-block-heading {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
:where(h1, h2, h3, h4, h5, h6) { color: var(--c-heading); }
:where(main a) { color: var(--c-accent); }

/* ---------- ヘッダー（Kadence 実クラス。地色 #f8f8f8・高さ header.json=128） ---------- */
#masthead { background: var(--c-bg-subtle); }
.site-header-row-container-inner { align-items: center; }
/* ロゴマークの下に「asobit software」を積む縦ロックアップ（Kadence theme-header の
   `.site-branding a.brand{flex-direction:row}` 0,2,1 に勝つよう 0,3,1 で指定） */
.site-branding a.brand.has-logo-image {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; text-decoration: none; line-height: 1;
}
.site-branding .custom-logo { height: 53px; width: auto; display: block; }
/* Kadence は SVG ロゴに svg-logo-image{width:200px} を与える＝縦横比が歪む（300:83 なら 53px 高で 192px が正）。
   本家はアスペクト維持なので width:auto に戻す（0,4,1 で Kadence の 0,3,1 に勝つ・両環境共通） */
.site-branding a.brand img.custom-logo.svg-logo-image { width: auto; }
.site-branding .site-title {
  font-size: 14px; color: var(--c-heading);
  letter-spacing: 0.02em; font-weight: 400; margin: 0; line-height: 1; text-align: center;
}
/* トップ項目＝本家 Elementor ナビ（e--pointer-underline）の完コピ・2026-07-21 実測:
   padding 12px 20px / letter-spacing normal / 文字 #1d1d1d / ホバーで文字が #959595 に落ち、
   #ffb012 の3px下線が【リンク全幅・bottom:0】に右端から伸びる（現在地は出しっぱなし）。
   ★セレクタはコンテナ二重指定（primary-menu-container.header-menu-container）で 0,4,3。
   Kadence 動的インラインCSS の `.main-navigation .primary-menu-container > ul > li.menu-item > a`
   （color=var(--global-palette5)=#999・padding:.6em＝0,3,3）に勝つため
   （このインラインCSSは theme-header.css の [1b] 層として静的にも写している）。 */
.header-navigation .primary-menu-container.header-menu-container > ul > li.menu-item > a {
  color: var(--c-heading); text-decoration: none;
  font-size: 14px; letter-spacing: normal; padding: 12px 20px; position: relative;
}
.header-navigation .primary-menu-container.header-menu-container > ul > li.menu-item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: #ffb012; transform: scaleX(0); transform-origin: right center; opacity: 0;
  transition: transform .3s cubic-bezier(.58, .3, .005, 1), opacity .3s cubic-bezier(.58, .3, .005, 1);
  pointer-events: none;
}
.header-navigation .primary-menu-container.header-menu-container > ul > li.menu-item > a:hover::after,
.header-navigation .primary-menu-container.header-menu-container > ul > li.menu-item > a:focus-visible::after,
.header-navigation .primary-menu-container.header-menu-container > ul > li.menu-item.current-menu-item > a::after { transform: scaleX(1); opacity: 1; }
/* ホバー/フォーカスで文字はグレー #959595（本家実測。黄色は下線だけ） */
.header-navigation .primary-menu-container.header-menu-container > ul > li.menu-item > a:hover,
.header-navigation .primary-menu-container.header-menu-container > ul > li.menu-item > a:focus { color: #959595; }

/* ---- ドロップダウン（children あり）＝本家 Elementor ナビの完コピ ---- */
/* 矢印の分だけ親リンクの右に余白を足す（下線は Elementor 同様リンク全幅のまま）。
   38px = 本家 Service 実測幅 106px（20 + 文字48 + 38）に合わせた値 */
.header-navigation .primary-menu-container.header-menu-container > ul > li.menu-item-has-children > a { padding-right: 38px; }
/* Kadence は矢印ラッパ .nav-drop-title-wrap に padding-right:14px ＋ position:relative を敷く
   （矢印インライン前提の余白と基準）。矢印は絶対配置に揃えた（下記）ので、余白は幅を +14px 太らせる
   だけ＝ゼロに。relative は矢印の基準を文字幅のラッパに奪い「Service」の末尾に重なって見えなく
   なる＝static に落として基準を <a>（右パディング38px内）へ戻す */
.header-navigation .primary-menu-container.header-menu-container > ul > li.menu-item > a .nav-drop-title-wrap { padding-right: 0; position: static; }
/* 下矢印は絶対配置で <a>（右パディング38px内）を基準に置く。24px→11px に縮小。
   ★top を少し上げて「Service」の文字に高さを揃える（既定 top:50% だと少し下がって見える）。
   ※矢印は静的も WP も <a> の中（.nav-drop-title-wrap 内）＝Kadence 実DOM（header-compiler が同形を出力）。
   色は inherit＝ホバーのグレーに自動追従。 */
.header-navigation .primary-menu-container.header-menu-container > ul > li.menu-item-has-children > a .dropdown-nav-toggle {
  position: absolute; right: 14px; top: 43%; transform: translateY(-50%); color: inherit;
}
.header-navigation .dropdown-nav-toggle svg,
.header-navigation .drawer-sub-toggle svg { width: 11px; height: 11px; }
/* フライアウト（サブメニュー内の子＝CHATCHECK / アソビーノ）の右矢印が端に付きすぎるので右に余白 */
.nav--toggle-sub ul.sub-menu li.menu-item-has-children > a { padding-right: 36px; }

/* サブメニュー項目：本家は 13px / padding 13px 20px / 幅240px、文字 #33373d。
   ホバーは【背景 #ffb012・文字 黒】（文字色ではなく背景が黄色＝ユーザー指定） */
.header-navigation ul.sub-menu { width: 240px; }
.header-navigation ul.sub-menu li.menu-item > a {
  color: #33373d; font-size: 13px; padding: 13px 20px; width: auto; transition: background-color .15s ease, color .15s ease;
}
.header-navigation ul.sub-menu li.menu-item > a:hover,
.header-navigation ul.sub-menu li.menu-item > a:focus { background-color: #ffb012; color: #1d1d1d; }
/* ★Kadence 動的インラインCSS（theme-header.css の [1b] 層として静的にも写している）の
   `.header-navigation .header-menu-container ul ul.sub-menu`(bg=var(--global-palette3)=#1d1d1d・0,3,2) と
   `.header-navigation .header-menu-container ul ul li.menu-item > a`(color=var(--global-palette8)・0,3,4) が、
   上の白背景(0,2,2)・#33373d(0,3,2)に勝つ。コンテナ二重指定＋ul ul で 0,4,2 / 0,4,4 に上げ、
   本家どおり【白背景・濃いグレー文字・ホバーは黄色背景に黒文字】を両環境で確実に効かせる。 */
.header-navigation .primary-menu-container.header-menu-container ul ul.sub-menu { background-color: #ffffff; }
/* リンクは行の全幅を張る（Kadence は li が flex ＝ width:auto だと文字幅で止まり、ホバー黄の右に
   白い余白があく。240px の li いっぱいに広げる） */
.header-navigation .primary-menu-container.header-menu-container ul ul li.menu-item > a { color: #33373d; width: 100%; flex: 1 1 auto; }
/* 今いるページの項目: 濃いグレー地×白文字（ユーザー指定。WP は Kadence が #555 を敷くが静的の
   theme-header.css には無い＝背景も明示して両環境一致）。ホバー時は下の規則（同特異度・後勝ち）が
   勝って黄背景×黒文字のまま */
.header-navigation .primary-menu-container.header-menu-container ul ul li.menu-item.current-menu-item > a { background-color: #555555; color: #ffffff; }
.header-navigation .primary-menu-container.header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .primary-menu-container.header-menu-container ul ul li.menu-item > a:focus { background-color: #ffb012; color: #1d1d1d; }

.site-header-main-section-right { gap: 14px; }

/* モバイルドロワー
   ★Kadence 既定のドロワーは暗色パネル（`.drawer-inner{background:#090c10;color:#fff}`）。
   背景だけ白に上書きすると **color:#fff が残る**＝閉じる✕（`.drawer-toggle{color:inherit}`で継承）と
   項目の区切り線（border rgba(255,255,255,.1)）が**白地に白で見えない**＝「メニューがおかしい」の正体
   （2026-07-24）。color も継承もろとも暗色へ揃える。 */
.popup-drawer .drawer-inner { background: var(--c-base); color: var(--c-heading); }
.popup-drawer .menu-toggle-close { color: var(--c-heading); }
/* 区切り線は白→薄グレーへ（非親項目は a、親項目は .drawer-nav-drop-wrap に付く。.popup-drawer 起点で
   theme-header の 0,2,3 に勝つ 0,3,3） */
.popup-drawer .mobile-navigation ul li a,
.popup-drawer .mobile-navigation ul li .drawer-nav-drop-wrap { border-bottom-color: var(--c-border); }
.popup-drawer .mobile-navigation ul li .drawer-nav-drop-wrap button { border-left-color: var(--c-border); }
.mobile-navigation .menu li a { color: var(--c-heading); text-decoration: none; font-size: 16px; letter-spacing: 0.02em; }
.mobile-navigation .menu li a:hover { color: var(--c-accent); }
/* サブメニュー展開の矢印（下層ページを開くトグル）を確実に見える色・サイズに */
.mobile-navigation .drawer-sub-toggle { color: var(--c-body); }
.mobile-navigation .drawer-sub-toggle svg { width: 15px; height: 15px; }

/* ★ハンバーガーアイコンを少し大きく（既定 20px は小さいというユーザー指摘・2026-07-24）。
   SVG を実寸で指定＝font-size 由来の em に依存せず静的/WP とも同じ大きさになる。タップ領域も少し広げる。 */
.mobile-toggle-open-container .menu-toggle-open { padding: 0.45em 0.65em; }
.mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon .kadence-svg-icon { width: 30px; height: 30px; }
.kadence-sticky-header.item-is-fixed:not(.item-at-start) #masthead { background: var(--c-bg-subtle); }

/* ---------- ヒーロー＝メインビジュアル（3枚フェード背景スライド＋右下ロゴ描画 anim-draw） ----------
   完コピ: shop.asobit.jp の elementor-background-slideshow（swiper-fade・Ken Burns・自動送り・矢印/ドット無し）。
   スライダー本体は asbsb:hero-slider 部品（各スライド=core cover）。ロゴはスライダーの上に常時オーバーレイ。 */
.sec-hero-wrap { position: relative; padding: 0; }
.sec-hero-mv { margin: 0; }
/* 各スライドの高さ（ヘッダー128pxの下でほぼ全画面）。テキストは載せないので中身枠は無視でよい */
.sec-hero-mv .c-hero-slide { min-height: 84vh; }
.sec-hero-mv .c-hero-inner { display: none; }         /* テキスト無し＝中身枠は非表示 */
.sec-hero-mv .c-hero-slide::before { background: transparent; }   /* 暗幕なし（元は素の写真） */
/* 右下の描画ロゴ（スライダーの上に常時オーバーレイ。positioned ancestor = .sec-hero-wrap） */
.sec-hero-wrap > .c-hero-logo { position: absolute; right: 6%; bottom: 9%; width: 300px; max-width: 40%; margin: 0; z-index: 3; }
.sec-hero-wrap > .c-hero-logo img, .sec-hero-wrap > .c-hero-logo svg { width: 100%; height: auto; display: block; }

/* ---------- 特大キャッチ（sec-catch を 2 箇所で共用。実測 117px / 700 / lh1.0） ---------- */
.c-catch-title {
  font-family: var(--font-display); font-weight: 400; line-height: 0.95; letter-spacing: 0.01em;
  font-size: 160px; color: var(--c-heading);
}
/* 日本語の特大見出し（例「私たちが カタチにします」）は League Gothic を使わず Noto Sans JP・太字。
   ★英文見出しの c-catch-title とはフォント/太さが別物なのでクラスを分ける（共有すると日本語が細く間延びする）。 */
.c-catch-jp {
  font-family: var(--wp--preset--font-family--heading); font-weight: 700; line-height: 1.25; letter-spacing: 0.01em;
  font-size: 100px; color: var(--c-heading);
}
.c-catch-sub {
  color: var(--c-heading); font-size: 14px; font-weight: 400; letter-spacing: 0.02em;
  line-height: 1.2; margin: 0;
}

/* ---------- News（見出し 30px/700） ---------- */
.c-sec-title { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; }
/* ★見出し「News」の下の余白（2026-07-24）。素の block-gap は Kadence の
   `ul.kadence-posts-list{margin:0}`(0,2,1) に消されるため共通層 kadence-overrides が 0,3,1 で戻す。
   ここでは SP だけ 72px→40px に詰める（同詳細度・後勝ち）。 */
@media (max-width: 767px) {
  .single-content .sec-news > * + ul.kadence-posts-list { margin-block-start: 40px; }
}
.c-news-card {
  background: #242424; border-radius: 0; padding: 44px 48px 40px;
  max-width: 620px; margin: 0; text-align: left; align-items: flex-start;
}
.c-news-tag {
  display: inline-block; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7);
  font-size: 12px; letter-spacing: 0.12em; padding: 5px 14px; border-radius: 4px; margin: 0;
}
.c-news-title { color: #ffffff; font-size: 24px; font-weight: 600; line-height: 1.3; }
.c-news-body { color: #999999; font-size: 14px; line-height: 1.5; margin: 0; }
/* Read More ボタンは白ボタン＋ホバー黒スライド（TOP暗色カード/News白カード共通・下の .c-news-more で一元定義） */
/* カードは content 幅の行（c-news-row）の中で左寄せ＝セクション全幅の左端に飛ばない */
.c-news-row { width: 100%; }

/* ---- TOP News = asbsb:posts（実投稿）。暗色カード意匠を kadence/posts の実DOM に当てる。
   件数が増減しても崩れないよう flex（1件=左に1枚 / 3件=横一列 / それ以上=折返し）。
   器: ul.kb-posts > li.kb-post-list-item > article.loop-entry > .entry-content-wrap ---- */
ul.c-news-top { width: 100%; margin: 0; margin-left: max(0px, calc((100% - 1160px) / 2)) !important; margin-right: auto !important; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--space-md, 24px); }
.c-news-top li.kb-post-list-item { flex: 0 1 360px; min-width: 0; margin: 0; }
.c-news-top article.loop-entry { background: #242424; border-radius: 0; height: 100%; display: flex; flex-direction: column; box-shadow: none; }
.c-news-top article.loop-entry > .entry-content-wrap { padding: 40px 40px 36px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.c-news-top .entry-header { display: flex; flex-direction: column; gap: 12px; }
/* カテゴリ（タグ）→ 見出し → 日付 の順（Kadence は taxonomies が見出し上＝order で整える） */
.c-news-top .entry-taxonomies { order: 1; margin: 0; }
.c-news-top .entry-taxonomies .category-links a {
  display: inline-block; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7);
  font-size: 12px; letter-spacing: 0.12em; padding: 5px 14px; border-radius: 4px; text-decoration: none;
}
.c-news-top .entry-title { order: 2; color: #ffffff; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; }
.c-news-top .entry-title a { color: inherit; text-decoration: none; }
.c-news-top .entry-meta { order: 3; margin: 0; font-size: 13px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); }
.c-news-top .entry-meta a { color: inherit; text-decoration: none; }
.c-news-top .entry-summary { margin: 0; font-size: 14px; line-height: 1.6; color: #999999; }
.c-news-top .entry-summary p { margin: 0; }
.c-news-top .entry-footer { margin: auto 0 0; padding-top: 4px; }
.c-news-top .more-link-wrap { margin: 0; }
.c-news-top .post-more-link .kadence-svg-iconset { display: none; }
.c-news-top .post-more-link {
  position: relative; overflow: hidden; z-index: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff; color: #242424;
  font-size: 14px; letter-spacing: 0.02em; text-decoration: none;
  border-radius: 999px; padding: 11px 26px;
  --fx-btn-slide-bg: #000000; --fx-btn-slide-fg: #ffffff;
  transition: color .3s;
}
.c-news-top .post-more-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fx-btn-slide-bg); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--fx-btn-slide-duration, .45s) var(--fx-btn-slide-ease, cubic-bezier(.77, 0, .18, 1));
}
.c-news-top .post-more-link::after { content: "→"; transition: transform .3s cubic-bezier(.77, 0, .18, 1); }
.c-news-top .post-more-link:hover, .c-news-top .post-more-link:focus-visible { color: var(--fx-btn-slide-fg); }
.c-news-top .post-more-link:hover::before, .c-news-top .post-more-link:focus-visible::before { transform: scaleX(1); }
.c-news-top .post-more-link:hover::after, .c-news-top .post-more-link:focus-visible::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .c-news-top .post-more-link::before { transition: none; } }

/* ---------- サービス4カード（実測 pad70 60 / radius30 / border#ccc / en35 / jp16#555 / body14#999） ---------- */
.c-svc-row { align-items: stretch; justify-content: center; }
.c-svc-card {
  background: var(--c-base); border: 1px solid var(--c-border); border-radius: 30px;
  padding: 70px 50px 70px 60px; flex: 1 0 0; min-width: 0; text-align: left; margin: 0;
}
/* サービスカードの線画アイコン（元データ svc-icon-1..4.svg。高さ揃えで左寄せ）
   ★セレクタは `.wp-block-image.c-…` 起点（下の「画像の高さ指定」の注記を参照） */
.c-svc-icon { margin: 0 0 8px; }
.wp-block-image.c-svc-icon img { height: 46px; width: auto; display: block; }
.c-svc-en { font-size: 35px; font-weight: 600; color: var(--c-heading); letter-spacing: 0; line-height: 1.2; }
.c-svc-jp { font-size: 16px; font-weight: 400; color: var(--c-body); line-height: 1.6; margin: 0; }
.c-svc-body { color: var(--c-muted); font-size: 14px; line-height: 1.85; margin: 0; }
.c-svc-more { margin-top: auto; padding-top: 12px; }
.c-svc-more a {
  position: relative; overflow: hidden; z-index: 0;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-heading); font-size: 14px; letter-spacing: 0.02em; text-decoration: none;
  border: 1px solid var(--c-border); border-radius: 999px; padding: 12px 26px;
  --fx-btn-slide-bg: var(--c-heading); --fx-btn-slide-fg: var(--c-base);
  transition: color .3s, border-color .3s;
}
/* ホバーで塗りが左→右にスライド（Service/contact us と同じ fx-btn-slide 技法を素の <a> ピルへ。
   保存正規形では <a> に class を足せないため decorations で当てる） */
.c-svc-more a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fx-btn-slide-bg); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--fx-btn-slide-duration, .45s) var(--fx-btn-slide-ease, cubic-bezier(.77, 0, .18, 1));
}
.c-svc-more a:hover, .c-svc-more a:focus-visible { color: var(--fx-btn-slide-fg); border-color: var(--c-heading); }
.c-svc-more a:hover::before, .c-svc-more a:focus-visible::before { transform: scaleX(1); }
.c-svc-more a::after { content: "↗"; font-size: 12px; transition: transform .3s cubic-bezier(.77, 0, .18, 1); }
.c-svc-more a:hover::after, .c-svc-more a:focus-visible::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .c-svc-more a::before { transition: none; } }

/* ---------- 枠線ボタン（Service / contact us） ---------- */
.c-btn-outline .wp-block-button__link,
.c-btn-outline-invert .wp-block-button__link {
  background-color: transparent; border-radius: 999px;
  padding: 17px 48px; font-size: 14px; letter-spacing: 0.02em; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
}
/* 塗りの横スライドと文字反転は共有 .fx-btn-slide が担当。ここは枠と、スライドの色（--fx-btn-slide-bg/fg）だけ与える */
.c-btn-outline .wp-block-button__link { color: var(--c-heading); border: 1px solid var(--c-heading); --fx-btn-slide-bg: var(--c-heading); --fx-btn-slide-fg: var(--c-base); }
.c-btn-outline-invert .wp-block-button__link { color: var(--c-base); border: 1px solid rgba(255, 255, 255, 0.55); --fx-btn-slide-bg: var(--c-base); --fx-btn-slide-fg: #242424; }
.c-btn-outline-invert .wp-block-button__link:hover { border-color: var(--c-base); }
.c-btn-outline .wp-block-button__link::after,
.c-btn-outline-invert .wp-block-button__link::after { content: "↗"; font-size: 12px; transition: transform .3s cubic-bezier(.77, 0, .18, 1); }

/* ---------- 関連サイト（見出し30/700・URLは黒・中央寄せ） ---------- */
.sec-links { text-align: center; }
/* ★クラス2つで書く: WP は縦flexグループごとに `.wp-container-…{flex-direction:column;align-items:flex-start}`
   を body内 inline で出す（0,1,0・後勝ち）。1クラスだと本番でだけ左寄せに潰れる（2026-07-31 実害）。 */
.wp-block-group.c-link-block { align-items: center; }
.c-link-title { font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; }
.c-link-url { margin: 0; }
.c-link-url a { color: var(--c-heading); font-size: 14px; letter-spacing: 0.02em; text-decoration: underline; text-underline-offset: 3px; }
.c-link-url a:hover { color: var(--c-accent); }

/* ---------- CTA（反転 #242424・見出し117px 白） ---------- */
.sec-cta { background-color: #242424; }
.c-cta-title {
  font-family: var(--font-display); font-weight: 400; line-height: 0.95; letter-spacing: 0.01em;
  font-size: 160px;
}

/* ---------- フッター（暗色ゾーン＝前フッターCTA＋白い角丸パネル） ----------
   ★フッターは「From Zero to One… の黒帯」から始まる（毎ページ共通・footer.html が単一の正）。
   暗色は .site-footer(#242424)。_layout の .site-container / WP の Kadence フッター行が
   白パネルを兼ねないよう素通しにし、白パネルは .sec-footer 側で描く。 */
.site-footer { background: #242424; color: var(--c-body); }
.site-footer .site-container { max-width: none; margin: 0; padding: 0; background: transparent; }
/* 前フッターCTA（From Zero to One…＝暗色。c-cta-title は白117px。.site-footer の #242424 が透ける） */
.sec-prefooter-cta { text-align: center; }
/* ---- contact us の下＝自社アプリ導線（アソビーノ iOS版・2026-07-31 App Store 公開） ----
   ★暗色帯（#242424）の上なので **Apple 公式の白ロックアップ**（images/appstore-badge-ja-white.svg）を使う。
     黒バッジは地に沈んで読めず、Apple のマーケティングガイドライン上も暗い背景は白が正。
     **バッジは改変しない**（再着色・角丸変更・影・文字差し替えは禁止）。守る規定＝高さ40px以上／
     周囲にクリアスペース／リンク先はアプリの App Store ページ（c-appstore-badge の共通指定に集約）。 */
/* ★contact us ボタンとの間隔はここが単一の正。`.c-footer-app`(0,1,0) は
   block-gap を配る `.is-layout-constrained > * + *`(0,1,0) と同点で**後勝ち**するので、
   ここに書いた値がそのままセクションの間隔を上書きする（4px にしていて詰まって見えていた）。 */
.c-footer-app { align-items: center; margin-top: 60px; }
/* アプリ行が複数並ぶとき（ChatCheck → アソビーノ）。2本目以降は 60px だと離れすぎるので詰める。
   `.c-footer-app + .c-footer-app`(0,2,0) で上の 60px と block-gap の両方に勝たせる。 */
.c-footer-app + .c-footer-app { margin-top: 28px; }
.c-footer-app-icon { flex: 0 0 auto; margin: 0; }
.wp-block-image.c-footer-app-icon img { width: 52px; height: 52px; border-radius: 13px; display: block; }
/* アプリ名の長さが違っても App Store バッジの左端が揃うよう、文言欄の幅を固定する
   （固定しないと行ごとに中央寄せの結果が変わり、バッジがガタつく）。SP では下の 1 1 100% が上書き。 */
.c-footer-app-copy { text-align: left; min-width: 0; flex: 0 0 352px; }
.c-footer-app-name { margin: 0; color: var(--c-base); font-size: 15px; font-weight: 700; line-height: 1.55; letter-spacing: 0.01em; }
.c-footer-app-note { margin: 0; color: #9d9d9d; font-size: 12.5px; line-height: 1.65; }
/* 白い角丸パネル（フッター本体・4カラム） */
.sec-footer { background: var(--c-base); max-width: 1350px; margin: 0 auto; border-radius: 30px 30px 0 0; padding: 50px 75px 40px; }
.c-footer-brand-row { align-items: center; }
.c-footer-logo { margin: 0; }
/* ★画像の高さ指定は必ず `.wp-block-image.c-…  img`（クラス2つ）で書く＝WordPress コアの
   `.wp-block-image img { height: auto; max-width: 100% }` と**同じ詳細度(0,1,1)**なので、
   1クラスで書くと **WP でだけ**（コア CSS が site.css の後に来る）負ける。
   ロゴ SVG は viewBox だけで固有サイズを持たない＝height:auto に負けた瞬間 **0×0 になって消える**
   （2026-07-31 フッターのアソビットロゴ消失＝実害。静的では起きない＝measure まで回さないと気付けない）。 */
.wp-block-image.c-footer-logo img { height: 40px; width: auto; display: block; }
/* ★URL は素のテキストで書くと WordPress が自動でリンク化して <a> が増える＝静的とWPでDOMが食い違う
   （measure は「子要素の無い要素だけ字組みを比較する」ので、そこで幻の差分になった）。
   最初からリンクとして書き、見た目は素のテキストのまま（色・下線なし）に揃える。 */
.c-footer-url a { color: inherit; text-decoration: none; }
.c-footer-url { color: var(--c-muted); font-size: 14px; letter-spacing: 0.02em; margin: 0; overflow-wrap: anywhere; }
.c-footer-cols { width: 100%; border-top: 1px solid var(--c-border); padding-top: 40px; align-items: flex-start; }
/* ★2026-07-24: 旧 `flex: 1 0 0; min-width:140px` は**縮まない**ので 768〜1024px で 3+1 に折り返し、
   あぶれた Contact 列だけが全幅に伸びて「右にはみ出した」ように見えた。
   基準幅を明示して 4→2→1 と素直に落とす（min-width:0 で長いリンク文言でも列から溢れない）。 */
.c-footer-col { flex: 1 1 160px; min-width: 0; }
/* 見出しは大きめ17px＋見出し色。★.c-footer-col p（0,1,1）に負けないよう .c-footer-col 起点で指定（0,2,0） */
.c-footer-col .c-footer-col-title { font-weight: 700; color: var(--c-heading); font-size: 17px; margin: 0 0 6px; letter-spacing: 0.01em; line-height: 1.4; }
.c-footer-col p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--c-body); }
.c-footer-col a { color: var(--c-body); text-decoration: none; }
.c-footer-col a:hover { color: var(--c-accent); }
.c-footer-bottom { width: 100%; border-top: 1px solid var(--c-border); padding-top: 20px; align-items: center; }
.c-footer-copy { margin: 0; color: var(--c-muted); font-size: 13px; letter-spacing: 0.02em; }
.c-footer-copy a { color: var(--c-muted); text-decoration: none; }
.c-footer-copy a:hover { color: var(--c-accent); }

/* =====================================================================
   About Us ページ（shop.asobit.jp /about-us/ の実測値：viewport 1440）
   実測: ヒーロー132/700・サブ22/700#555・本文16#555・OUR STRENGTHS140/700・
         関連リンク30/700・会社概要24/700＋表14#111。編集レイアウトは
         「左半分カラム＝導入」「右半分カラム＝強み」の非対称エディトリアル。
   ===================================================================== */
/* ---- 導入（特大ヒーロー＋左カラム＋会社サイン写真） ---- */
.c-about-title {
  font-family: var(--font-display); font-size: 150px; font-weight: 400; line-height: 0.95; letter-spacing: 0.01em;
  color: var(--c-heading); margin: 0; white-space: nowrap;
}
/* 導入テキストは左半分に寄せる（constrained 直下の auto 中央寄せを左ピンで上書き）
   ★この計算に `var(--content-size)` を使ってはいけない: --content-size は **静的だけの仕組み**
     （inject-content-size がセクションへインライン注入）で、WP では常に :root のグローバル既定になる。
     使うと「1160のセクションなのに本番だけ 1140 で計算」＝10px ずれる（実際に踏んだ）。直値で書く。
   ★ここだけ !important が要る（2026-07-31）: WP は constrained グループの子に
     `margin-left: auto !important; margin-right: auto !important` を **body内 inline** で出す。
     !important は詳細度をいくら上げても勝てないので、**意図的に左右へ寄せている部品だけ**
     同じ !important で取り返す。これが無いと本番で全部**中央寄せに潰れ**、About の
     「左＝導入／右＝強み」の非対称エディトリアルが成立しない（実際そうなっていた）。
     ★!important はこの「WPの!importantに対抗する」用途に限る＝濫用しない。 */
.wp-block-group.c-about-lead-col { max-width: 560px; margin-left: 0 !important; margin-right: auto !important; }
.c-about-lead-col p { color: var(--c-body); font-size: 16px; line-height: 1.95; margin: 0; }
.c-about-lead-col p.c-about-lead { font-size: 22px; font-weight: 700; line-height: 1.6; letter-spacing: 0.01em; }
/* 会社サイン写真＝左寄せ・中サイズ */
.wp-block-image.c-about-photo { max-width: 470px; margin-left: 0 !important; margin-right: auto !important; }
.c-about-photo img { width: 100%; height: auto; display: block; }

/* ---- OUR STRENGTHS（特大見出し＋右カラム） ---- */
/* 元は2行組み（OUR / STRENGTHS）で右寄り（x440〜）。max-width で折り返しを再現し右ピン */
.wp-block-heading.c-strengths-title {
  font-family: var(--font-display); font-size: 168px; font-weight: 400; line-height: 0.92; letter-spacing: 0.01em;
  color: var(--c-heading); margin-left: auto !important; margin-right: 0 !important; max-width: 760px; text-align: left;
}
.wp-block-group.c-strengths-col { max-width: 560px; margin-left: auto !important; margin-right: 0 !important; text-align: left; }
.c-strengths-col p { color: var(--c-body); font-size: 16px; line-height: 1.95; margin: 0; }
.c-strengths-col p.c-strengths-label { font-size: 22px; font-weight: 700; line-height: 1.6; letter-spacing: 0.01em; }

/* ---- 関連リンク（About は左寄せ・タイトル＋URL 横並び） ---- */
.c-alink-row { align-items: baseline; gap: 22px; }
.c-alink-title { font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; color: var(--c-heading); margin: 0; }
.c-alink-url { margin: 0; }
.c-alink-url a { color: var(--c-muted); font-size: 14px; letter-spacing: 0.02em; text-decoration: underline; text-underline-offset: 3px; }
.c-alink-url a:hover { color: var(--c-accent); }

/* ---- 会社概要（中央寄せの定義表） ---- */
.wp-block-group.c-company { max-width: 640px; }
.c-company-title { font-size: 24px; font-weight: 700; letter-spacing: 0.01em; color: var(--c-heading); margin: 0 0 8px; }
.c-company-table { width: 100%; }
/* ★縦flexの子は内容幅になる(align-items:flex-start)→width:100%で罫線を端から端まで伸ばす */
.c-company-row { width: 100%; align-items: flex-start; border-bottom: 1px solid var(--c-border); padding: 13px 0; }
.c-company-row:first-child { border-top: 1px solid var(--c-border); }
.c-company-key { flex: 0 0 130px; color: var(--c-heading); font-size: 14px; font-weight: 500; line-height: 1.75; margin: 0; }
.c-company-val { flex: 1 1 auto; color: var(--c-heading); font-size: 14px; line-height: 1.75; margin: 0; }

/* =====================================================================
   Service ページ（shop.asobit.jp /service/ の実測値：viewport 1440）
   構成: 白い角丸パネル（border#ccc/radius30/pad70-50）内の2カラム
        ＝左に線画アイコン＋英字見出し35/600＋和文＋説明、右に製品カード列。
   実測: 製品名24/700・キャッチ18/700・説明14#555・タグpill（FREE=枠/PRO=橙#ffb012）・
        Learn More=枠ピル。
   ===================================================================== */
.c-svc-page-title { font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; color: var(--c-heading); margin: 0; }

/* 白い角丸パネル（2カラム: 左=見出し / 右=製品カード） */
.c-svc-panel {
  background: var(--c-base); border: 1px solid var(--c-border); border-radius: 30px;
  padding: 48px 44px; align-items: flex-start;
}
.wp-block-group.c-svc-panel > .c-svc-phead { flex: 0 0 34%; min-width: 0; }
.wp-block-group.c-svc-panel > .c-svc-plist { flex: 1 1 0; min-width: 0; }

/* 左見出し（線画アイコン＋英字＋和文＋説明。Web/UI-UX の単独カードでも共有） */
.c-svc-picon { margin: 0 0 16px; }
.wp-block-image.c-svc-picon img { height: 76px; width: auto; display: block; }
.c-svc-pen { font-size: 35px; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: var(--c-heading); margin: 0; }
.c-svc-pjp { font-size: 15px; font-weight: 700; color: var(--c-heading); line-height: 1.6; margin: 0; }
.c-svc-pdesc { font-size: 14px; color: var(--c-body); line-height: 1.85; margin: 0; }

/* 製品カード（薄いグレー地・角丸なし＝元サイト同様） */
.c-plugin-card { background: #f6f6f6; border-radius: 0; padding: 24px 26px; margin: 0; }
/* カードの頭＝ブランドアイコンと製品名の横並び（アソビーノ／ChatCheck のカードと同じ組み方）。
   ★高さは `.wp-block-image.c-… img`（クラス2つ）で書く＝コアの `.wp-block-image img{height:auto}` と
   同点(0,1,1)なので1クラスだと WP でだけ負ける。
   ★親（カード）は縦 flex なので、頭の行の align-self / align-items は二重指定で明示する。 */
.c-plugin-head { align-items: center; align-self: stretch; }
.wp-block-group.c-plugin-card > .c-plugin-head { align-items: center; align-self: stretch; }
.wp-block-group.c-plugin-head > .c-plugin-headtext { flex: 1 1 auto; min-width: 0; }
.c-plugin-icon { flex: 0 0 auto; margin: 0; }
.wp-block-image.c-plugin-icon img { width: 72px; height: 72px; display: block; border-radius: 16px; }
.c-plugin-name { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--c-heading); margin: 0; }
.c-plugin-catch { font-size: 18px; font-weight: 700; color: var(--c-heading); line-height: 1.5; margin: 0; }
.c-plugin-desc { font-size: 14px; color: var(--c-body); line-height: 1.85; margin: 0; }

/* タグ pill（FREE=枠 / PRO=橙 / Apple Watch=淡色） */
.c-plugin-tags { align-items: center; }
.c-tag {
  display: inline-block; font-size: 13px; font-weight: 700; line-height: 1.4;
  padding: 3px 13px; border-radius: 999px; border: 1px solid var(--c-heading); margin: 0; letter-spacing: 0.02em;
}
.c-tag-free { background: transparent; color: var(--c-heading); }
.c-tag-pro { background: #ffb012; color: var(--c-heading); border-color: var(--c-heading); }
.c-tag-watch { background: #eef0f2; color: var(--c-body); border-color: #eef0f2; font-weight: 400; }
.c-tag-ios { background: #eef3fb; color: #34506f; border-color: #d9e2ee; font-weight: 600; }
.c-tag-android { background: #edf7f0; color: #28643e; border-color: #cfe7d7; font-weight: 600; }

/* Learn More ボタン（枠ピル＋塗り横スライド fx-btn-slide＋矢印。素の <a> なので decorations で） */
.c-lm { margin: 4px 0 0; }
.c-lm a {
  position: relative; overflow: hidden; z-index: 0;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--c-heading); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none;
  border: 1px solid var(--c-heading); border-radius: 999px; padding: 13px 28px;
  --fx-btn-slide-bg: var(--c-heading); --fx-btn-slide-fg: var(--c-base);
  transition: color .3s, border-color .3s;
}
.c-lm a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fx-btn-slide-bg); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--fx-btn-slide-duration, .45s) var(--fx-btn-slide-ease, cubic-bezier(.77, 0, .18, 1));
}
.c-lm a::after { content: "↗"; font-size: 12px; transition: transform .3s cubic-bezier(.77, 0, .18, 1); }
.c-lm a:hover, .c-lm a:focus-visible { color: var(--fx-btn-slide-fg); }
.c-lm a:hover::before, .c-lm a:focus-visible::before { transform: scaleX(1); }
.c-lm a:hover::after, .c-lm a:focus-visible::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .c-lm a::before { transition: none; } }

/* サービス下層（カテゴリ）ページ: 導入文＋2カラムのカードグリッド（本家 WordPress Plug-in / Mobile application と同形） */
.is-layout-constrained > .c-svc-cat-intro { max-width: 720px; }
.wp-block-group.c-plugin-grid { align-items: stretch; }
.wp-block-group.c-plugin-grid > .c-plugin-card { flex: 0 1 calc(50% - 16px); min-width: 0; }
@media (max-width: 767px) { .wp-block-group.c-plugin-grid > .c-plugin-card { flex-basis: 100%; } }

/* ---- お問い合わせページ見出し（SEO h1・本家に無いので簡素に。ピクセルパーフェクト不要＝ユーザー了承） ---- */
.c-contact-h { font-size: 44px; font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; color: var(--c-heading); margin: 0; text-align: left; }
.c-contact-lead { font-size: 15px; line-height: 1.9; color: var(--c-muted); margin: 0; text-align: left; }
@media (max-width: 767px) { .c-contact-h { font-size: 32px; } }

/* ---- お問い合わせフォーム（本家 shop.asobit.jp/contact の完コピ） ----
   お名前/会社名 を左右50%、Email/メッセージ を全幅、送信するボタンは全幅グレー。
   KB の advanced-form 実クラスに当てる（wp-block-kadence-advanced-form.c-contact-form でルート二重指定＝KB CSS に勝つ）。 */
/* ★KB は .kb-advanced-form に flex-direction:column を当てる（KB CSS は後読み）。row に上書きして横並びを解禁 */
.wp-block-kadence-advanced-form.c-contact-form form { display: flex; flex-direction: row; flex-wrap: wrap; gap: 18px 24px; }
.wp-block-kadence-advanced-form.c-contact-form .kb-adv-form-field { flex: 1 1 100%; margin: 0; }
.wp-block-kadence-advanced-form.c-contact-form .kb-adv-form-field:nth-child(1),
.wp-block-kadence-advanced-form.c-contact-form .kb-adv-form-field:nth-child(2) { flex: 1 1 calc(50% - 12px); }
/* KB のフローティングラベル（transform:scale(.75)・負マージン）を通常表示にリセット */
.wp-block-kadence-advanced-form.c-contact-form .kb-adv-form-label { display: block; font-size: 14px; font-weight: 400; color: var(--c-heading); line-height: 1.6; margin: 0 0 6px; padding: 0; transform: none; transform-origin: left top; }
.wp-block-kadence-advanced-form.c-contact-form .kb-adv-form-required { color: #e02b2b; margin-left: 5px; }
.wp-block-kadence-advanced-form.c-contact-form input[type="text"],
.wp-block-kadence-advanced-form.c-contact-form input[type="email"],
.wp-block-kadence-advanced-form.c-contact-form textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px;
  padding: 11px 13px; font-size: 15px; line-height: 1.6; color: var(--c-heading); background: #fff;
  font-family: inherit;
}
.wp-block-kadence-advanced-form.c-contact-form textarea { min-height: 132px; resize: vertical; display: block; }
.wp-block-kadence-advanced-form.c-contact-form input:focus,
.wp-block-kadence-advanced-form.c-contact-form textarea:focus { outline: none; border-color: #8c8c8c; }
.wp-block-kadence-advanced-form.c-contact-form .kb-submit-field { flex: 1 1 100%; margin-top: 4px; }
.wp-block-kadence-advanced-form.c-contact-form .kb-submit-field .kb-button {
  width: 100%; justify-content: center; background: #959595; color: #fff; border: 0; border-radius: 3px;
  padding: 15px 20px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: background .2s ease;
}
.wp-block-kadence-advanced-form.c-contact-form .kb-submit-field .kb-button:hover,
.wp-block-kadence-advanced-form.c-contact-form .kb-submit-field .kb-button:focus { background: #7f7f7f; color: #fff; }
@media (max-width: 600px) {
  .wp-block-kadence-advanced-form.c-contact-form .kb-adv-form-field:nth-child(1),
  .wp-block-kadence-advanced-form.c-contact-form .kb-adv-form-field:nth-child(2) { flex-basis: 100%; }
}

/* ChatCheck カード（アイコン＋見出しの横並びヘッダー） */
.c-cc-head { align-items: center; }
.c-cc-icon { flex: 0 0 auto; margin: 0; }
.c-cc-icon img { width: 96px; height: 96px; display: block; border-radius: 18px; }
.wp-block-group.c-cc-head > .c-cc-headtext { flex: 1 1 auto; min-width: 0; }

/* Web / UI-UX（単独カード2枚を横並び） */
.c-svc-panel-solo {
  background: var(--c-base); border: 1px solid var(--c-border); border-radius: 30px;
  padding: 56px 48px; flex: 1 1 0; min-width: 0;
}

/* =====================================================================
   News ページ（shop.asobit.jp /news/ の実測値）
   構成: 淡いグレー地(#f8f8f8)に「Information」75/700 の大見出し＋横型ニュースカード。
        カード=左サムネ枠（未設定記事はロゴ配置のプレースホルダ）＋右に見出し/カテゴリ/日付/Read More。
   ===================================================================== */
.sec-news-page { background: var(--c-bg-subtle); }
.c-news-h { font-size: 75px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: #262626; margin: 0; }
/* ---- 一覧本体 = asbsb:posts（kadence/posts の実DOM）。静的ダミーと WP 実投稿が同じクラスを共有する。
   器: ul.kb-posts > li.kb-post-list-item > article.loop-entry >(.post-thumbnail + .entry-content-wrap)。
   カード=サムネ枠（アイキャッチ。asobitはロゴを設定）の下に 見出し/カテゴリ/日付/Read More。
   ★2026-08-09: PC は 2 列（宣言側 asbsb:posts の columns:2 が正）。以前は 1 列・max-width:900px ＋
     margin-left:0 !important だったが、constrained（1160px）の auto マージンを潰していたため
     **コンテンツ幅の左端ではなくセクション全幅の左端 x=0 に貼り付いていた**（実測。DESIGN-FEEDBACK 追記7）。
     2 列では横長カード（サムネ42%+本文）だと本文が 240px まで痩せるので、カードは縦積みに切り替える。 ---- */
ul.c-news-list { width: 100%; max-width: 1160px; margin: 0 auto; margin-left: auto !important; margin-right: auto !important; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--space-lg, 32px); }
.c-news-list li.kb-post-list-item { margin: 0; }
.c-news-list article.loop-entry {
  background: var(--c-base); border-radius: 20px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
  display: grid; grid-template-columns: 1fr; align-content: start; grid-gap: 0; height: 100%;
}
.c-news-list .post-thumbnail { margin: 0; min-height: 200px; background: #f1f1f1; display: flex; justify-content: center; align-items: center; }
.c-news-list .post-thumbnail-inner { width: 44%; }
.c-news-list .post-thumbnail img { width: 100%; height: auto; display: block; opacity: 0.85; }
.c-news-list .entry-content-wrap { padding: 32px 36px 34px; display: flex; flex-direction: column; justify-content: center; gap: var(--wp--preset--spacing--space-sm, 16px); }
/* 見出し→カテゴリ→日付 の順（Kadence はカテゴリが見出しの上＝order で入れ替える） */
.c-news-list .entry-header { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--space-xs, 8px); }
.c-news-list .entry-title { font-size: 26px; font-weight: 700; line-height: 1.35; color: var(--c-heading); margin: 0; order: 1; }
.c-news-list .entry-title a { color: inherit; text-decoration: none; }
.c-news-list .entry-taxonomies { order: 2; font-size: 13px; letter-spacing: 0.06em; }
.c-news-list .entry-taxonomies a { color: var(--c-muted); text-decoration: none; }
.c-news-list .entry-meta { order: 3; font-size: 13px; letter-spacing: 0.04em; color: var(--c-muted); margin: 0; }
.c-news-list .entry-meta a { color: inherit; text-decoration: none; }
.c-news-list .entry-summary { margin: 0; font-size: 14px; color: var(--c-text); }
.c-news-list .entry-footer { margin: 8px 0 0; }
/* Read More ボタン（白ボタン＋ホバーで黒が左→右スライド＝サイトの他ボタンと統一。
   TOPの暗色ニュースカード（.c-news-more）と News一覧の post-more-link（kadence/posts 実DOM）で共用 */
.c-news-list .more-link-wrap { margin: 0; }
.c-news-list .post-more-link .kadence-svg-iconset { display: none; }
.c-news-more { margin: 8px 0 0; }
.c-news-list .post-more-link,
.c-news-more a {
  position: relative; overflow: hidden; z-index: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-base); color: var(--c-heading);
  font-size: 14px; letter-spacing: 0.02em; text-decoration: none;
  border: 1px solid var(--c-border); border-radius: 999px; padding: 11px 26px;
  --fx-btn-slide-bg: #242424; --fx-btn-slide-fg: var(--c-base);
  transition: color .3s, border-color .3s;
}
.c-news-list .post-more-link::before,
.c-news-more a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fx-btn-slide-bg); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--fx-btn-slide-duration, .45s) var(--fx-btn-slide-ease, cubic-bezier(.77, 0, .18, 1));
}
.c-news-more a::after { content: "→"; transition: transform .3s cubic-bezier(.77, 0, .18, 1); }
.c-news-more a:hover, .c-news-more a:focus-visible { color: var(--fx-btn-slide-fg); }
.c-news-more a:hover::before, .c-news-more a:focus-visible::before { transform: scaleX(1); }
.c-news-more a:hover::after, .c-news-more a:focus-visible::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .c-news-list .post-more-link::before,
.c-news-more a::before { transition: none; } }

/* =====================================================================
   投稿の個別ページ（single）の本文間隔  ★2026-08-09
   ★ここは静的HTMLが無い層（pages/ に雛形が無い＝measure / editor-health の網に掛からない）。
     直したら本番を実際に開いて目で確認する。
   なぜ要るか: 共通層 kadence-overrides が `.single-content p / h2..h6 / ul …{margin:0}` で
     Kadence の既定マージンを消し、代わりに `is-layout-constrained > * + *` の block-gap で
     間隔を供給している。固定ページの本文はセクション（constrained）の中なので効くが、
     **投稿本文のルートは `.entry-content.single-content` そのもの**＝ is-layout-* が付かないため
     どこからも間隔が来ず、見出しと本文が完全にくっつく（実測 gap 0px）。
   ★`body.single-post` に限定する。`.single-content` は固定ページの本文枠でもあるので、
     素で書くと全ページの余白が動いて measure が全滅する。
   ===================================================================== */
body.single-post .single-content > * + * { margin-block-start: 20px; }
body.single-post .single-content > * + :is(h2, h3, h4, h5, h6) { margin-block-start: 48px; }
body.single-post .single-content > :is(h2, h3, h4, h5, h6) + * { margin-block-start: 16px; }
/* 連続する見出し（h2 の直後に h3）は近づける＝節タイトルと小見出しの組 */
body.single-post .single-content > :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) { margin-block-start: 24px; }

/* ---------- レスポンシブ（BP は Kadence 準拠 1024 / 767） ---------- */
@media (max-width: 1024px) {
  .c-catch-title, .c-cta-title { font-size: 104px; }
  .c-catch-jp { font-size: 64px; }
  .c-svc-card { flex-basis: calc((100% - var(--wp--preset--spacing--space-lg, 32px)) / 2); padding: 48px 40px; }
  .c-about-title { font-size: 84px; }
  .wp-block-heading.c-strengths-title { font-size: 88px; max-width: 640px; }
  /* フッターは 4列→2列（3+1 の折返しで最終列だけ全幅に伸びるのを止める） */
  .c-footer-col { flex-basis: calc((100% - var(--wp--preset--spacing--space-xl, 48px)) / 2); }
  .wp-block-group.c-svc-panel > .c-svc-phead { flex-basis: 100%; }
  .wp-block-group.c-svc-panel > .c-svc-plist { flex-basis: 100%; }
  .c-svc-pen { font-size: 28px; }
}
@media (max-width: 767px) {
  .c-catch-title, .c-cta-title { font-size: 60px; }
  .c-catch-jp { font-size: 40px; }
  .c-sec-title, .c-link-title { font-size: 24px; }
  .c-svc-en { font-size: 28px; }
  .c-svc-card { flex-basis: 100%; }
  /* ★フッターは1列に積む。align-items:stretch ＋ width:100% にしないと列幅が max-content になり、
     長いリンク文言（「アソビット デジタルツインVR」）がパネルの右へ張り出す（2026-07-24）。 */
  .c-footer-cols { flex-direction: column; gap: 26px; align-items: stretch; }
  .c-footer-col { flex: 0 0 auto; width: 100%; }
  /* SP は一段小さく（ユーザー了承：文字サイズが少し小さくなっても良い＝はみ出し回避を優先） */
  .c-footer-col .c-footer-col-title { font-size: 15px; }
  .c-footer-col p { font-size: 13px; line-height: 1.9; }
  .c-footer-url { font-size: 12.5px; }
  .c-footer-copy { font-size: 12px; }
  /* ロゴとURLは横並びだと URL が右端に張り付くので縦に積む */
  .c-footer-brand-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* 自社アプリ導線は SP では折り返して縦に積む。★このとき文言だけ左寄せのまま残ると
     アイコンとバッジ（中央）に対してちぐはぐに見えるので、まとめて中央に揃える。 */
  .c-footer-app { justify-content: center; margin-top: 44px; }
  /* ★SP はアイコン／文言／バッジが縦3段に折り返す＝バナー1本の内側の隙間が block-gap の 24px。
     PC 用の 28px（.c-footer-app + .c-footer-app）のままだとバナー間と内側がほぼ同じ幅になり、
     ChatCheck とアソビーノが1つの塊に見える（どちらのバッジか判別できない）。SP だけ広く離す。 */
  .c-footer-app + .c-footer-app { margin-top: 64px; }
  /* ★クラス2つ（0,2,0）で書く。WP は縦並び flex グループごとに
     `.wp-container-core-group-is-layout-XXXX{flex-direction:column;align-items:flex-start}` を
     **body 内に inline で**出すので、`.c-footer-app-copy`(0,1,0) は同点で後勝ちされて負ける。
     ＝静的プレビューでは中央に見えるのに、WP でだけアプリ名と説明が左に寄る（2026-08-19 実害）。
     台帳（core-block-css.json）にはこのコンテナ規則が入っていないため validate-cascade も拾えない。 */
  .wp-block-group.c-footer-app-copy { flex: 1 1 100%; align-items: center; text-align: center; }
  .c-footer-app-name { font-size: 14px; }
  .c-footer-app-note { font-size: 12px; }
  .c-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .c-about-title { font-size: 44px; white-space: normal; }
  .wp-block-heading.c-strengths-title { font-size: 46px; max-width: 100%; }
  .wp-block-group.c-about-lead-col, .wp-block-group.c-strengths-col { max-width: 100%; }
  .wp-block-image.c-about-photo { max-width: 100%; }
  .c-alink-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .c-alink-title { font-size: 24px; }
  .c-company-key { flex-basis: 96px; }
  .c-svc-panel { padding: 40px 28px; }
  .c-svc-pen { font-size: 24px; }
  .c-svc-pair { flex-direction: column; }
  .c-svc-panel-solo { flex-basis: 100%; padding: 40px 28px; }
  .c-plugin-card { padding: 24px 24px; }
  .c-cc-head { flex-wrap: wrap; }
  .c-news-h { font-size: 44px; }
  .c-news-top li.kb-post-list-item { flex-basis: 100%; }
  .c-news-top article.loop-entry > .entry-content-wrap { padding: 32px 28px 30px; }
  /* スマホは 1 列（PC の 2 列を戻す） */
  ul.c-news-list { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--space-md, 24px); }
  .c-news-list .post-thumbnail { min-height: 180px; }
  .c-news-list .entry-content-wrap { padding: 28px 28px; }
  .c-news-list .entry-title { font-size: 24px; }

  /* ===== スマホ全体最適化（2026-07-22）：本文の左右余白／メインビジュアル高さ／フッター ===== */
  /* 本文セクションの左右余白（18px）は共通層 kadence-overrides.css が担当（全サイト共通・2026-07-22）。
     ヒーロー（sec-hero*）は共通側で除外済み。増減はここで `:root{--asbsb-sp-gutter:…}` を宣言する。 */
  /* メインビジュアルは画面ほぼ全高（84vh）→約半分に。cover の inline min-height:84vh を上書きするため !important */
  .sec-hero-mv .c-hero-slide { min-height: 50vh !important; }
  /* フッターは single-content の外＝上の余白が効かない。前フッターCTAに左右余白／白パネルの左右内側余白を 75px→22px に縮小 */
  .sec-prefooter-cta { padding-left: 20px; padding-right: 20px; }
  .sec-footer { padding-left: 22px; padding-right: 22px; }
}

/* =====================================================================
   プラグイン説明ページ（Service 詳細＝各 Learn More の遷移先）
   参考: shop.asobit.jp /service/web-application/chatcheck/（ヒーロー→2カラム機能段→Pro→比較表）
   原稿: ASBプラグイン説明ページ原稿・撮影指示.md ／ キャプチャ23枚。
   構成: ヒーロー → 導入前の悩み帯 → 2カラム機能段(交互) → テキスト段(カラムボックス)
        → Pro段 → 比較表 → 活用イメージ → CTA。
   ===================================================================== */

/* ---- パンくず（asbsb:breadcrumb・本家 shop.asobit.jp のバーに合わせた薄いバー） ---- */
.sec-breadcrumb { background: var(--c-base, #fff); padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid #eee; }
.c-breadcrumb { margin: 0; font-size: 13px; line-height: 1.7; color: #6b6b6b; word-break: break-word; }
.c-breadcrumb a { color: var(--c-body, #555); text-decoration: none; transition: color .2s ease; }
.c-breadcrumb a:hover { color: var(--c-accent, #046bd2); text-decoration: underline; }

/* ---- ヒーロー（左寄せ・淡グレー地） ----
   ★2026-07-24: 中央寄せ → 左寄せ。見出しは SP で2行に折り返して幅いっぱい＝左寄せに見えるのに、
   下の長い和文リードだけ中央揃えのまま散る（＝「見出し左・本文センター」に見える）。
   サイトの基本則＝**見出しも本文も左寄せ**（DESIGN-FEEDBACK 2026-07-24）。
   ブランドの見せ場（TOP の sec-catch / sec-prefooter-cta / sec-links）は中央のまま。 */
.sec-pg-hero { background: var(--c-bg-subtle); text-align: left; }
/* ★中央寄せ時代の max-width:900px は外す。左寄せだと「900px の箱を中央に置いた左端(270px)」だけが
   本文列の左端(150px)からズレて見えるため、箱は本文列いっぱいに使い、
   読みやすさの上限は本文側（c-pg-hero-lead 760px / c-pg-hero-note 720px）で担保する。 */
.c-pg-hero-inner { align-items: flex-start; }
/* プラグインのブランドアイコン（文字プレースホルダー版。2026-08-01 に ASB 5本は実画像へ移行済み＝
   まだアイコンが無い製品のために残す） */
.c-pg-hero-icon {
  width: 84px; height: 84px; border-radius: 20px; margin: 0;
  background: linear-gradient(135deg, #2b2b2b, #55565a);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em; line-height: 1;
}
/* 実ブランドアイコン画像版（ASB 5本・ChatCheck・アソビーノ）。
   ★高さは `.wp-block-image.c-… img`（クラス2つ）で書く＝コアの `.wp-block-image img{height:auto}` と
   同点(0,1,1)なので1クラスだと WP でだけ負ける。 */
.c-pg-hero-iconimg { width: 84px; flex: 0 0 auto; margin: 0; align-self: flex-start; }
.wp-block-image.c-pg-hero-iconimg img { width: 84px; height: 84px; border-radius: 20px; display: block; }
/* ヒーローの頭＝アイコンと製品名の横並び（ASB プラグイン5ページ）。
   製品名は以前 c-pg-eyebrow（13px・薄いグレー）でアイコンの下にあったが、商品の顔なので
   アイコンの右へ出して大きく見せる。★親（c-pg-hero-inner）は縦 flex なので二重指定で書く。 */
.c-pg-hero-head { align-items: center; align-self: flex-start; }
.wp-block-group.c-pg-hero-inner > .c-pg-hero-head { align-items: center; align-self: flex-start; }
.c-pg-hero-name { font-size: 28px; font-weight: 700; line-height: 1.35; letter-spacing: 0.01em; color: var(--c-heading); margin: 0; }
/* ★スマホ用の縮小はここ（この下）に書く。上の 653行目の @media ブロックへ書くと、
   同じ詳細度の基本ルールがその後に来るので**後勝ちで無効になる**（2026-08-01 に実際に踏んだ）。
   flexWrap:nowrap のままだと長い製品名が 390px で横にはみ出すので、スマホだけ折り返しも許す。 */
@media (max-width: 767px) {
  .c-pg-hero-head { flex-wrap: wrap; }
  .c-pg-hero-iconimg { width: 68px; }
  .wp-block-image.c-pg-hero-iconimg img { width: 68px; height: 68px; border-radius: 16px; }
  .c-pg-hero-name { font-size: 21px; }
  .c-plugin-head { flex-wrap: wrap; }
  .wp-block-image.c-plugin-icon img { width: 60px; height: 60px; border-radius: 14px; }
}
.c-pg-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--c-muted); margin: 0; }
.c-pg-hero-tags { justify-content: flex-start; align-items: center; }
.c-pg-hero-title { font-size: 40px; font-weight: 700; line-height: 1.45; color: var(--c-heading); margin: 0; }
.c-pg-hero-sub { font-size: 15px; font-weight: 600; color: var(--c-muted); margin: 0; letter-spacing: 0.02em; }
.c-pg-hero-lead { font-size: 16px; line-height: 2; color: var(--c-body); margin: 0; max-width: 760px; }
/* ★この部品は「constrained 直下」と「flex カラムの中」の両方で使う（asobino/chatcheck は後者）。
   基本の見た目は無印で当て、WP の auto中央寄せ !important に対抗する位置指定だけを
   constrained 直下に限定して足す（無印ごと限定にすると flex 側で max-width が外れて全幅化する）。 */
.c-pg-hero-note { font-size: 12.5px; line-height: 1.9; color: var(--c-muted); margin: 4px 0 0; max-width: 720px; }
.is-layout-constrained > .c-pg-hero-note { max-width: 720px; margin-left: max(0px, calc((100% - 1140px) / 2)) !important; margin-right: auto !important; }
.c-pg-hero-btns { justify-content: flex-start; flex-wrap: wrap; }

/* アソビーノ対応OS（公開状態をアイコンとセットで表示） */
.c-platforms { align-items: stretch; max-width: 620px; }
.wp-block-group.c-platforms > .c-platform-card {
  flex: 1 1 250px; min-width: 0; align-items: center;
  background: var(--c-base); border: 1px solid #e5e5e5; border-radius: 16px;
  padding: 16px 20px;
}
.c-platform-card.is-android { border-color: #d8e9dd; background: #f8fcf9; }
.c-platform-icon { flex: 0 0 48px; width: 48px; margin: 0; }
.c-platform-icon img { width: 48px; height: 48px; display: block; }
.c-platform-copy { min-width: 0; }
.c-platform-name { margin: 0; color: var(--c-heading); font-size: 15px; font-weight: 700; line-height: 1.45; }
.c-platform-status { margin: 0; color: var(--c-body); font-size: 12.5px; line-height: 1.55; }
.c-platform-status.is-development { color: #28643e; font-weight: 600; }
.c-platform-status.is-live { color: var(--c-accent); font-weight: 600; }

/* ---- App Store 公式バッジ（アソビーノ 公開＝2026-07-30） ----
   ★画像は Apple 提供の公式アートワーク（images/appstore-badge-ja.svg・日本語/黒）。
     Apple の App Store マーケティングガイドラインに従い、**改変・再着色・文字の差し替えは禁止**
     （色を変える/影を付ける/角丸を変える等をしない）。差し替えるなら Apple の配布物を丸ごと入れ替える。
   ★守っている規定: ①最小の高さ 40px 以上 ②バッジの周囲に高さの 1/10 以上のクリアスペース
     ③リンク先はアプリの App Store ページ。高さだけ指定して幅は auto＝縦横比を崩さない。 */
.wp-block-image.c-appstore-badge { margin: 0; display: inline-block; line-height: 0; }
.c-appstore-badge a { display: inline-block; padding: 6px; margin: -6px; }   /* クリアスペース（40px の 1/10 超）＝ margin 相殺で見た目の余白は増やさない */
.wp-block-image.c-appstore-badge img { height: 54px; width: auto; display: block; }  /* ★クラス2つ＝コアの height:auto に勝つ */
.c-appstore-badge a:hover img { opacity: 0.82; }                             /* 押せることだけ示す（バッジ自体は改変しない） */

/* ---- Google Play 公式バッジ（アソビーノ Android版 公開＝2026-08-19） ----
   ★画像は Google 提供の公式アートワーク（images/googleplay-badge-ja.png・日本語/汎用）。
     Google Play バッジのガイドラインに従い、**改変・再着色・トリミング・文字の差し替えは禁止**。
     差し替えるなら Google の配布物を丸ごと入れ替える。汎用バッジは枠線付き＝明るい地でも
     暗い地（フッター #242424）でもそのまま置ける（Apple のように白版へ差し替えない）。
   ★★高さが App Store バッジと違うのは正しい: この PNG は**画像の中に上下のクリアスペースを
     含む**（646x250 のうち黒い錠剤は高さ 190px＝76%）。見た目の高さを Apple の 54px に
     揃えるには 54 ÷ 0.76 ≒ 71px が要る。数字だけ見て 54px に合わせると Google だけ小さく見える。
   ★守っている規定: ①バッジの周囲にクリアスペース ②リンク先はアプリの Google Play ページ
     ③高さだけ指定して幅は auto＝縦横比を崩さない。 */
.wp-block-image.c-googleplay-badge { margin: 0; display: inline-block; line-height: 0; }
.c-googleplay-badge a { display: inline-block; padding: 6px; margin: -6px; }
.wp-block-image.c-googleplay-badge img { height: 71px; width: auto; display: block; }  /* ★クラス2つ＝コアの height:auto に勝つ */
.c-googleplay-badge a:hover img { opacity: 0.82; }
/* バッジと「開発中」ステータスボタンを1行に並べる（ボタン列と縦位置を揃える） */
.c-store-row { align-items: center; }

/* 塗りボタン（Free をはじめる＝主 CTA。fx-btn-slide と併用で白抜き→反転はしないので単色＋ホバー暗転） */
.c-btn-fill .wp-block-button__link {
  background-color: var(--c-heading); color: var(--c-base); border: 1px solid var(--c-heading); border-radius: 999px;
  padding: 17px 48px; font-size: 14px; letter-spacing: 0.02em; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px; --fx-btn-slide-bg: #55565a; --fx-btn-slide-fg: var(--c-base);
}
.c-btn-fill .wp-block-button__link::after { content: "↗"; font-size: 12px; transition: transform .3s cubic-bezier(.77, 0, .18, 1); }
/* 未公開プラグインの CTA。行き先が無いボタンを塗りのまま置くと、押せる見た目なのに
   何も起きない＝壊れて見える。破線＋文字色を落として「まだ押す物ではない」と見せる。
   公開時は className を c-btn-fill fx-btn-slide へ戻し、href を入れる。 */
.c-btn-status .wp-block-button__link {
  background-color: transparent; color: var(--c-body); border: 1px dashed #c8c8c8; border-radius: 999px;
  padding: 17px 48px; font-size: 14px; letter-spacing: 0.02em; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
  cursor: default; pointer-events: none;
}
.c-btn-status .wp-block-button__link::after { content: none; }

/* ---- 導入前の悩み帯 ---- */
.is-layout-constrained > .c-pg-problem-inner { max-width: 820px; margin: 0 auto; text-align: left; }
.c-pg-problem-label { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--c-accent-alt); margin: 0; }
.c-pg-problem-text { font-size: 15.5px; line-height: 2.1; color: var(--c-body); margin: 0; }

/* ---- 2カラム機能段（交互＝画像左/右） ---- */
.c-pg-feat-row { align-items: center; }
.wp-block-group.c-pg-feat-row > .c-pg-feat-media { flex: 1 1 52%; min-width: 0; }
.wp-block-group.c-pg-feat-row > .c-pg-feat-body { flex: 1 1 40%; min-width: 0; }
.c-pg-feat-row.is-rev { flex-direction: row-reverse; }
/* キャプチャの額縁（枠＋角丸＋影） */
.c-pg-shot { margin: 0; border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.09); }
.c-pg-shot img { width: 100%; height: auto; display: block; }
/* UI パネルの接写（メタボックス等の小さな設定パネル）＝フル幅の管理画面キャプチャより小さく、
   列幅も詰めて他の横長スクショと視覚的なバランスを取る（列の中で中央寄せ） */
.wp-block-group.c-pg-feat-row > .c-pg-feat-media.is-panel { flex: 0 1 400px; }
.c-pg-shot.is-panel { max-width: 400px; margin-left: auto; margin-right: auto; border-color: #ececec; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); background: #fafafa; }
.c-pg-feat-title { font-size: 25px; font-weight: 700; line-height: 1.55; color: var(--c-heading); margin: 0; }
.c-pg-feat-text { font-size: 15px; line-height: 2; color: var(--c-body); margin: 0; }
/* 3つの要点リスト（チェックマーカー＝ロゴのゴールド系） */
.c-pg-points { list-style: none; margin: 6px 0 0; padding: 0; }
.c-pg-points li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.8; color: var(--c-heading); margin: 7px 0; }
.c-pg-points li::before {
  content: ""; position: absolute; left: 2px; top: 0.5em; width: 11px; height: 6px;
  border-left: 2px solid var(--c-accent-alt); border-bottom: 2px solid var(--c-accent-alt); transform: rotate(-45deg);
}

/* ---- テキスト段（見出し＋カラムボックス） ---- */
.sec-pg-textsec-alt { background: var(--c-bg-subtle); }
.is-layout-constrained > .c-pg-sec-head { max-width: 780px; margin: 0 auto; text-align: left; }
.c-pg-sec-title { font-size: 27px; font-weight: 700; line-height: 1.5; color: var(--c-heading); margin: 0; }
.c-pg-sec-intro { font-size: 15px; line-height: 2; color: var(--c-body); margin: 0; }
.c-pg-cols { align-items: stretch; justify-content: center; flex-wrap: wrap; }
.c-pg-col {
  background: var(--c-base); border: 1px solid #ececec; border-radius: 14px; padding: 28px 26px;
  align-items: flex-start;
}
.c-pg-col-title { font-size: 16.5px; font-weight: 700; line-height: 1.6; color: var(--c-heading); margin: 0; }
.c-pg-col-text { font-size: 14px; line-height: 1.95; color: var(--c-body); margin: 0; }
.c-pg-col strong, .c-pg-feat-text strong, .c-pg-problem-text strong, .c-pg-col-text strong { font-weight: 700; color: var(--c-heading); }
/* カラム数（gap=space-md 24px を差し引いた basis。行の blockGap は space-md 固定で使う） */
.c-pg-cols-2 > .c-pg-col { flex: 0 1 calc((100% - 24px) / 2); }
.c-pg-cols-3 > .c-pg-col { flex: 0 1 calc((100% - 48px) / 3); }
.c-pg-cols-4 > .c-pg-col { flex: 0 1 calc((100% - 72px) / 4); }
/* テキスト段が淡グレー地のとき、カード内背景は白のまま（上のまま）。地が白のときはカードを淡グレーに */
.sec-pg-textsec:not(.sec-pg-textsec-alt) .c-pg-col { background: var(--c-bg-subtle); border-color: #ededed; }

/* ---- Pro 段（淡いゴールド地で強調） ---- */
.sec-pg-pro { background: #fbf6ec; }
.c-pg-pro-badge {
  display: inline-block; background: #ffb012; color: var(--c-heading);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 4px 15px; border-radius: 999px; margin: 0;
}

/* ---- 比較表（core/table。モバイルでも崩れないよう幅を絞る） ----
   ★セル指定は必ず `.wp-block-table.c-pg-cmp-table` 起点（クラス2つ）で書く＝コアの
     `.wp-block-table td, .wp-block-table th { border: 1px solid; … }` と**同じ詳細度(0,1,1)**なので、
     1クラスで書くと **WP でだけ**（コア CSS が site.css の後）負けて、currentColor の黒い格子が
     全セルに出る（2026-07-31 実害）。**罫線は引かない**＝行の切れ目は淡い縞だけで示す。
   ★文字色は「見出し行=白／本文行=見出し色」を thead / tbody で分けて書く。
     以前は `th:not(:first-child)`(0,2,1) が `thead th`(0,1,2) に勝って **Free / Pro が
     暗色帯に黒文字＝消えていた**（全ページ）。要素を分ければ詳細度の勝負自体が起きない。 */
/* ★幅は `.wp-block-group.` を足した二重指定で書く。素の `.c-pg-cmp-wrap`(0,1,0) は
   WP が constrained グループごとに出す `.wp-container-…-is-layout-x > :where(…)`(0,1,0・後勝ち)に
   負けて、**本番でだけ 880px→1140px に広がっていた**（2026-07-31 validate-cascade が検出）。 */
/* ★margin の一括指定は margin-top:0 も同時に書く＝block-gap を配る
   `.is-layout-constrained > * + *`(0,1,0) に (0,2,0) で勝ってしまい、見出し「Free で始める、Pro で広げる」と
   表がぴったりくっついていた（プラグイン説明ページ4本すべて。2026-08-03 実測 0px）。
   セクション宣言の blockGap（space-lg=32px）と同じ値をここで明示して離す。 */
.wp-block-group.c-pg-cmp-wrap { max-width: 880px; margin: 32px auto 0; width: 100%; }
/* ★overflow-x はコアの `.wp-block-table{overflow-x:auto}` に合わせて静的側にも書く
   （書かないと静的だけ visible ＝ validate-cascade が「WPでだけ変わる」と正しく指摘する）。 */
.c-pg-cmp-table { margin: 0; width: 100%; overflow-x: auto; }
.c-pg-cmp-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* ★thead の下線もコアが別途引く（`.wp-block-table thead{border-bottom:3px solid}`）。
   th/td の border を 0 にしても**ここが残って見出し帯の下に3pxの線が出る**ので一緒に消す。 */
.wp-block-table.c-pg-cmp-table thead { border-bottom: 0; }
.wp-block-table.c-pg-cmp-table tfoot { border-top: 0; }
.wp-block-table.c-pg-cmp-table th,
.wp-block-table.c-pg-cmp-table td { border: 0; padding: 14px 14px; font-size: 14px; line-height: 1.6; vertical-align: middle; }
.wp-block-table.c-pg-cmp-table th:not(:first-child),
.wp-block-table.c-pg-cmp-table td:not(:first-child) { text-align: center; width: 88px; font-weight: 700; }
.wp-block-table.c-pg-cmp-table thead th { background: #242424; color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.wp-block-table.c-pg-cmp-table thead th:first-child { text-align: left; }
.wp-block-table.c-pg-cmp-table tbody td { color: var(--c-heading); }
.wp-block-table.c-pg-cmp-table tbody td:first-child { text-align: left; }
.wp-block-table.c-pg-cmp-table tbody tr:nth-child(even) td { background: #faf9f7; }

/* ---- Pro版の料金（2026-09-30 カレンダーの販売開始で新設） ----
   地は Pro 段と同じ淡いゴールド、カードは白（直後の「活用イメージ」が淡グレー地なので、
   同じ地にすると 2 つの段がつながって見える）。
   ★金額は「初年度 → 2年目以降」を同じカードに並べて書く。通常価格に取り消し線を引く
     二重価格の見せ方はしない（初年度の割引は将来の値上がりであって、比べる元の実売価格ではない）。
   ★カードの中身は縦の flex（blockGap=space-xs）。ボタンだけ margin-top:auto で底へ寄せ、
     2 枚のボタンの高さを揃える（中身の行数が違っても横並びで揃う）。
     margin-top は `.wp-block-group.c-pg-price-card > …`（0,3,0）で書く＝block-gap の
     `.is-layout-flex > *`（WP 側 0,1,0 前後）に勝たせる。 */
.sec-pg-price { background: #fbf6ec; }
.wp-block-group.c-pg-price-cards { max-width: 880px; margin-left: auto; margin-right: auto; width: 100%; }
.wp-block-group.c-pg-price-card { background: var(--c-base); border-color: #eadfc8; padding: 32px 30px 30px; }
.c-pg-price-plan { font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--c-heading); margin: 0; }
.c-pg-price-for { font-size: 13.5px; line-height: 1.8; color: var(--c-body); margin: 0; }
.wp-block-group.c-pg-price-card > .c-pg-price-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--c-muted); margin: 14px 0 0; }
.c-pg-price-amount { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; color: var(--c-heading); margin: 0; }
.c-pg-price-renew { font-size: 14px; line-height: 1.7; color: var(--c-heading); background: #fbf6ec; border-radius: 6px; padding: 6px 12px; margin: 0; }
.wp-block-group.c-pg-price-card > .c-pg-price-btns { margin-top: auto; padding-top: 18px; }
.c-pg-price-btns .c-btn-fill .wp-block-button__link { padding-left: 36px; padding-right: 36px; }
.wp-block-list.c-pg-price-notes { max-width: 880px; width: 100%; margin: 32px auto 0; padding-left: 1.3em; list-style: disc; }
.c-pg-price-notes li { font-size: 13.5px; line-height: 1.9; color: var(--c-body); margin: 0 0 6px; }
.c-pg-price-notes a { color: var(--c-accent, #046bd2); text-decoration: underline; }
@media (max-width: 767px) {
  .wp-block-group.c-pg-price-card { padding: 26px 22px 24px; }
  .c-pg-price-amount { font-size: 34px; }
}

/* ---- 技術情報の表（プラグイン名＋設定値。比較表と違い全列とも文章） ----
   比較表 `.c-pg-cmp-table` と同じ注意がそのまま当てはまる＝セル指定は必ず
   `.wp-block-table.c-pg-spec-table` の二クラス起点、罫線は引かない、thead / tbody で
   文字色を分ける、overflow-x は静的側にも書く。理由は上の比較表のコメント参照。
   違いは中身が文章なので **全列とも左寄せ・table-layout は auto**、そして狭い画面では
   潰さずに横スクロールさせる（min-width）こと。 */
.wp-block-group.c-pg-spec-wrap { max-width: 1140px; margin: 32px auto 0; width: 100%; }
.c-pg-spec-table { margin: 0; width: 100%; overflow-x: auto; }
.c-pg-spec-table table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: auto; }
.wp-block-table.c-pg-spec-table thead { border-bottom: 0; }
.wp-block-table.c-pg-spec-table tfoot { border-top: 0; }
.wp-block-table.c-pg-spec-table th,
.wp-block-table.c-pg-spec-table td {
  border: 0; padding: 13px 14px; font-size: 13px; line-height: 1.8;
  text-align: left; vertical-align: top;
}
.wp-block-table.c-pg-spec-table thead th { background: #242424; color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.wp-block-table.c-pg-spec-table thead th:first-child { width: 190px; }
.wp-block-table.c-pg-spec-table tbody td { color: var(--c-body); }
.wp-block-table.c-pg-spec-table tbody td:first-child { color: var(--c-heading); font-weight: 700; }
.wp-block-table.c-pg-spec-table tbody tr:nth-child(even) td { background: #faf9f7; }
/* 設定名・パラメータは等幅で。コアの `code` にサイズ指定は無いので継承任せにしない */
.wp-block-table.c-pg-spec-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; background: #f0efec; padding: 1px 5px; border-radius: 3px;
}

/* ---- 技術情報の段（サポート対象外の注記つき） ---- */
.sec-pg-tech { background: var(--c-bg-subtle); }
/* 長い文章なので幅は絞るが、絞るのは**中の段落**で、群そのものではない。
   群に max-width を掛けると constrained レイアウトの `margin:auto` で中央へ寄り、
   見出しと表（段の 1140px 幅の左端から始まる）に対して本文だけ内側へずれる。
   かといって `margin-left:0` にすると今度は段の外側（全幅の左端）まで出てしまう。
   `.c-pg-note-inner` が中央寄せで良いのは、あちらの段に見出しが無いから。 */
.c-pg-tech-lead > * { max-width: 900px; }
.c-pg-tech-disclaimer {
  font-size: 14px; line-height: 1.9; color: var(--c-heading); margin: 0;
  background: #fff; border-left: 3px solid #ffb012; padding: 16px 18px; border-radius: 4px;
}
.c-pg-tech-text { font-size: 14px; line-height: 1.9; color: var(--c-body); margin: 0; }
.c-pg-tech-label { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--c-heading); margin: 0; }

/* ---- 売りの画面を並べて見せる部品（2026-09-25・calendar で新設） ----
   ヒーローの絵（PC とスマホの組み写真）／見本のタイル（同じ中身で「選べる見た目」を並べる）／
   プレーンな画像（組み写真は自前で影を持つので額縁を付けない）／無料版の印。
   ★縦並びの flex グループは WP が単一クラス(0,1,0)で align-items:flex-start を出す＝中の画像が縮む。
     `.wp-block-group.` を足した (0,2,0) で stretch に戻す（c-pg-hero-inner と同じ注意）。
   ★タイルの幅の計算は blockGap = space-md（24px）が前提（c-pg-cols と同じ決め方）。 */
.wp-block-group.c-pg-hero-inner > .c-pg-hero-visual { align-self: stretch; }
.c-pg-hero-visual { margin: 16px 0 0; }
.wp-block-image.c-pg-hero-visual img { width: 100%; height: auto; display: block; }
.c-pg-free-badge {
  display: inline-block; background: var(--c-base); color: var(--c-heading); border: 1px solid var(--c-heading);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 15px; border-radius: 999px; margin: 0;
}
.wp-block-group.c-pg-gal { align-items: stretch; }
.c-pg-gal-title { font-size: 21px; font-weight: 700; line-height: 1.55; color: var(--c-heading); margin: 0; }
.c-pg-gal-intro { font-size: 15px; line-height: 2; color: var(--c-body); margin: 0; max-width: 820px; }
.wp-block-group.c-pg-tiles { align-items: flex-start; }
.c-pg-tiles-3 > .c-pg-tile { flex: 0 1 calc((100% - 48px) / 3); min-width: 0; }
.wp-block-group.c-pg-tile { align-items: stretch; }
.c-pg-tile-img {
  margin: 0; background: var(--c-base); border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}
.wp-block-image.c-pg-tile-img img { width: 100%; height: auto; display: block; }
.c-pg-tile-cap { font-size: 13.5px; line-height: 1.8; color: var(--c-body); margin: 0; }
.c-pg-tile-cap strong { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.6; color: var(--c-heading); }
.c-pg-plain { margin: 0; }
.wp-block-image.c-pg-plain img { width: 100%; height: auto; display: block; }
@media (max-width: 1024px) {
  .c-pg-tiles-3 > .c-pg-tile { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
  .c-pg-tiles-3 > .c-pg-tile { flex-basis: 100%; }
  .c-pg-gal-title { font-size: 19px; }
  .c-pg-hero-visual { margin-top: 8px; }
}

/* ---- 活用イメージ（3カラム・ラベル＋説明） ---- */
.c-pg-use-label { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--c-heading); margin: 0; }
.c-pg-use-text { font-size: 14px; line-height: 1.9; color: var(--c-body); margin: 0; }

/* ---- 補足（ページ下部の小さめテキスト） ---- */
.is-layout-constrained > .c-pg-note-inner { max-width: 820px; margin: 0 auto; }
.c-pg-note { font-size: 13px; line-height: 1.95; color: var(--c-muted); margin: 0; }

/* ---- ご利用にあたって（注意事項リスト・機能リストと違い中立の箇条書き） ---- */
.sec-pg-terms { background: var(--c-bg-subtle); }
.is-layout-constrained > .c-pg-terms-list { max-width: 860px; margin: 0 auto; padding-left: 1.2em; list-style: disc; }
.c-pg-terms-list li { font-size: 14px; line-height: 1.9; color: var(--c-body); margin: 0 0 8px; }

/* ---- 末尾 CTA（Free/Pro ボタン）※2026-07-24 左寄せへ ---- */
.sec-pg-cta { background: var(--c-bg-subtle); text-align: left; }
.c-pg-cta-title { font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--c-heading); margin: 0; }
/* ★「見出しは左なのに本文だけ中央に寄る」の修正（2026-07-30 発見 → 2026-08-03 修正）。
   原因＝constrained レイアウトが `> *` に付ける margin-left/right:auto に `.c-pg-cta-lead{margin:0}`(0,1,0) が
   負け、max-width:720px の余りが左右に等分される（＝中央寄せ）。
   ★`margin-left:0` 単体では直らなかった: セクションは alignfull ＝コンテナ幅がビューポート全幅なので、
   左端が x=0（コンテンツ列の左 x=150 ではない）まで飛ぶ。実測で確認済み。
   → 直し方は HTML 側＝CTA の中身を constrained な内側グループ `.c-pg-cta-inner` で包み、
     その中で左ピンする（内側グループの左端＝コンテンツ列の左）。asobino / chatcheck の2ページ。
   ★`!important` は必須（外せない）: WP コアの constrained ルールが
     `margin-left: auto !important; margin-right: auto !important` を当てているので、
     詳細度を上げただけでは勝てない（外すと validate-cascade が WPでだけ 210px 中央寄せ に戻ると検出する）。
   ★これに伴い validate-spacing が asobino / chatcheck で
     「p.c-pg-cta-lead が中央に無い（左0px / 右420px）」を各1件出すが、**これは意図どおり**（見出しに左を揃える）。
     同バリデータは「margin ショートハンドで auto が消えた事故」を狙う検査なので、意図的な左ピンは区別できない。 */
/* ★上マージンは明示する。`margin: 0` の一括指定は block-gap（`> * + *` の margin-block-start）も潰すので、
   見出しと本文がぴったりくっついていた（比較表と同じ型）。セクション宣言の blockGap（space-md=24px）に合わせる。 */
.is-layout-constrained > .c-pg-cta-lead { font-size: 15px; line-height: 1.95; color: var(--c-body); margin: 24px 0 0; max-width: 720px; margin-left: 0 !important; margin-right: auto !important; }
.c-pg-cta-btns { justify-content: flex-start; flex-wrap: wrap; }

/* ---- 法務ページ（プライバシーポリシー等・本家 shop.asobit.jp と同じ体裁）※2026-07-24 左寄せへ ---- */
.sec-legal-head { background: var(--c-bg-subtle); text-align: left; }
.c-legal-title { font-size: 30px; font-weight: 700; line-height: 1.4; color: var(--c-heading); margin: 0; }
.is-layout-constrained > .c-legal-intro { font-size: 14.5px; line-height: 1.95; color: var(--c-body); margin: 0; max-width: 760px;  margin-left: max(0px, calc((100% - 1140px) / 2)) !important; margin-right: auto !important; }
.c-legal-date { font-size: 13px; color: var(--c-muted, #888); margin: 0; }
.sec-legal { background: var(--c-base, #fff); }
.is-layout-constrained > .c-legal-body { max-width: 880px; margin: 0 auto; }
.c-legal-h { font-size: 19px; font-weight: 700; color: var(--c-heading); margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid #eee; }
.c-legal-body > .c-legal-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.c-legal-p { font-size: 14.5px; line-height: 1.95; color: var(--c-body); margin: 0 0 10px; }
.c-legal-ol, .c-legal-ul { margin: 4px 0 12px; padding-left: 1.5em; }
.c-legal-ol { list-style: decimal; }
.c-legal-ul { list-style: disc; }
.c-legal-ol li, .c-legal-ul li { font-size: 14.5px; line-height: 1.9; color: var(--c-body); margin: 0 0 6px; }
.c-legal-contact { margin-top: 22px; padding: 18px 20px; background: var(--c-bg-subtle); border-radius: 10px; }
.c-legal-contact-line { font-size: 14px; line-height: 1.8; color: var(--c-body); margin: 0; }
.c-legal-p a { color: var(--c-accent, #046bd2); text-decoration: underline; }
.c-legal-table { width: 100%; margin: 12px 0 18px; overflow-x: auto; }
.c-legal-table table { width: 100%; min-width: 680px; border-collapse: collapse; }
.wp-block-table.c-legal-table thead { border-bottom: 0; }
.wp-block-table.c-legal-table th,
.wp-block-table.c-legal-table td { border: 1px solid #e5e5e5; padding: 12px 14px; font-size: 14px; line-height: 1.7; text-align: left; vertical-align: top; }
.wp-block-table.c-legal-table th { background: var(--c-bg-subtle); color: var(--c-heading); font-weight: 700; white-space: nowrap; }
.wp-block-table.c-legal-table td { color: var(--c-body); }
.wp-block-table.c-legal-table a { color: var(--c-accent, #046bd2); text-decoration: underline; }
.c-legal-table-profile table { min-width: 560px; }
.c-legal-table-profile th { width: 180px; }
/* サポートページの FAQ 見出し（質問） */
.c-support-q { font-size: 15.5px; font-weight: 700; color: var(--c-heading); margin: 20px 0 6px; }
/* CTA 下の補助リンク（サポート・プライバシーポリシー等） */
.c-pg-cta-links { font-size: 13.5px; color: var(--c-muted); margin: 4px 0 0; }
.c-pg-cta-links a { color: var(--c-body); text-decoration: none; }
.c-pg-cta-links a:hover { color: var(--c-accent, #046bd2); text-decoration: underline; }

/* ---- プラグインページのレスポンシブ ---- */
@media (max-width: 1024px) {
  .c-pg-hero-title { font-size: 32px; }
  .c-pg-cols-4 > .c-pg-col { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
  .c-pg-hero-title { font-size: 26px; }
  .c-pg-hero-lead { font-size: 15px; }
  .c-pg-feat-title { font-size: 21px; }
  .c-pg-sec-title { font-size: 22px; }
  .wp-block-group.c-pg-feat-row > .c-pg-feat-media,
  .wp-block-group.c-pg-feat-row > .c-pg-feat-body { flex-basis: 100%; }
  .c-pg-feat-row.is-rev { flex-direction: column; }
  .c-pg-cols-2 > .c-pg-col,
  .c-pg-cols-3 > .c-pg-col,
  .c-pg-cols-4 > .c-pg-col { flex-basis: 100%; }
  .wp-block-group.c-platforms > .c-platform-card { flex-basis: 100%; }
  /* App Store バッジは SP でも Apple 規定の最小 40px を割らない（48px に留める） */
  .wp-block-image.c-appstore-badge img { height: 48px; }
  /* Google Play バッジも同じ見た目の高さに揃える（48 ÷ 0.76 ≒ 63px。上下のクリアスペース込みの画像） */
  .wp-block-image.c-googleplay-badge img { height: 63px; }
  .wp-block-table.c-pg-cmp-table th, .wp-block-table.c-pg-cmp-table td { padding: 11px 8px; font-size: 13px; }
  .wp-block-table.c-pg-cmp-table th:not(:first-child), .wp-block-table.c-pg-cmp-table td:not(:first-child) { width: 60px; }
}

/* ---- スマホ幅キャプチャ（Smart Flow）＝メディア列を細くし、縦長は上を見せて頭打ち ---- */
.wp-block-group.c-pg-feat-row > .c-pg-feat-media.is-phone { flex: 0 1 340px; }
.c-pg-shot.is-phone { max-width: 340px; margin-left: auto; margin-right: auto; }
.c-pg-shot.is-phone img { max-height: 680px; object-fit: cover; object-position: top center; }
@media (max-width: 767px) {
  .wp-block-group.c-pg-feat-row > .c-pg-feat-media.is-phone { flex-basis: 100%; }
  .c-pg-shot.is-phone { max-width: 280px; }
}

/* ---- アソビーノ ダウンロード振り分けページ（QRの着地先・2026-08-19） ----
   紙のQRを読んだ人が最初に見る面なので、ここだけサイトの基本則（左寄せ）から外して中央に組む。
   端末の振り分けは js/site.js（iPhone→App Store ／ Android→Google Play）。**JSが動かなくても
   バッジ2枚で完結する**設計なので、CSS 側でも「バッジは常に見えている」ことを崩さない
   （＝「移動しています…」を出すために本文を隠す、のような書き方はしない）。 */
.sec-dl { text-align: center; }
/* ★クラス2つ（0,2,0）。WP は縦並び flex グループごとに単一クラス(0,1,0)の
   `align-items:flex-start` を body 内 inline で出すので、1クラスでは同点後勝ちで負ける
   （2026-08-19 にフッターで実害。詳細は .wp-block-group.c-footer-app-copy のコメント）。 */
.wp-block-group.c-dl-inner { align-items: center; }
.c-dl-inner .c-pg-hero-iconimg { align-self: center; }              /* 基本則の flex-start を打ち消す */
.c-dl-lead { font-size: 15px; line-height: 1.95; color: var(--c-body); margin: 0; max-width: 640px; }
.c-dl-note { max-width: 640px; }
.c-dl-btns { justify-content: center; }
/* 「ストアへ移動しています…」＝JS が振り分けを始めた時だけ出す。既定は非表示
   （PC や JS オフでは一度も出ない＝嘘の案内を見せない）。 */
.c-dl-status { display: none; font-size: 13px; font-weight: 600; color: var(--c-accent); margin: 0; }
.c-dl-status.is-on { display: block; }

/* ============================================================
   販売開始まで、Pro版の販売ページへ送るボタンだけを隠す（2026-08-26）
   ------------------------------------------------------------
   ★消していない。各ページのボタンには is-hidden-until-launch を
   付けてあるだけなので、戻すときは この規則を消すか、
   ページ側のクラスを外せば即座に復活する。
   対象＝calendar / line / pwa / post-thumbnail の各2か所（計8個）。

   詳細度の注意: WPコアが .wp-block-buttons > .wp-block-button に
   display:inline-block を出している（0,2,0）。同じ形にクラスを1つ
   足して（0,3,0）で勝たせている。.wp-block-button だけに書くと
   同点で負けて隠れない。
   ============================================================ */
.wp-block-buttons > .wp-block-button.is-hidden-until-launch { display: none; }
/* 隠した中のリンクにも、WPコアが出すのと同じ値を明示しておく。
   display:none の中は採寸できず width/height が auto に落ちるため、
   これが無いと validate-cascade が「WPでだけ変わる」と誤検出する。 */
.wp-block-buttons > .wp-block-button.is-hidden-until-launch > .wp-block-button__link { width: 100%; height: 100%; }

/* ============================================================
   FluentCart の商品ページの説明文（2026-08-30）
   ------------------------------------------------------------
   ★このサイトの本文は「ブロックの箱が gap で間隔を作る」設計なので、
   見出しも段落も margin が 0 に潰してある。ところが商品ページの説明は
   FluentCart が **素の HTML**（`<h2>` `<p>` `<ul>`）をそのまま出す＝
   箱も gap も無いので、上下の空きが一切生まれず窮屈に見える。
   ＝ここだけは margin で間隔を作る。ブロックで組んだ固定ページには
   `body.single-fluent-products` が付かないので影響しない。

   ボタンも同じ理由で素の `.wp-block-button__link` のまま＝テーマ既定の
   青い角ボタンが出る。サイトの塗りボタン（.c-btn-fill）と同じ見た目へ揃える。
   ============================================================ */
body.single-fluent-products .entry-content.single-content > h2 {
  font-size: 20px; font-weight: 700; line-height: 1.6; color: var(--c-heading);
  margin: 40px 0 12px;
}
body.single-fluent-products .entry-content.single-content > h2:first-child { margin-top: 8px; }
body.single-fluent-products .entry-content.single-content > h3 {
  font-size: 16.5px; font-weight: 700; line-height: 1.6; color: var(--c-heading);
  margin: 28px 0 10px;
}
body.single-fluent-products .entry-content.single-content > p {
  font-size: 14.5px; line-height: 1.95; color: var(--c-body); margin: 0 0 16px;
}
body.single-fluent-products .entry-content.single-content > ul,
body.single-fluent-products .entry-content.single-content > ol {
  font-size: 14.5px; line-height: 1.95; color: var(--c-body);
  margin: 0 0 20px; padding-left: 1.35em;
}
body.single-fluent-products .entry-content.single-content > ul > li,
body.single-fluent-products .entry-content.single-content > ol > li { margin: 0 0 6px; }
body.single-fluent-products .entry-content.single-content strong { font-weight: 700; color: var(--c-heading); }
body.single-fluent-products .entry-content.single-content > .wp-block-buttons { margin: 24px 0 8px; }
/* ★詳細度の注意: テーマ／コアが `.wp-block-button__link` に色と角丸を出している。
   body クラスから書くことで確実に上回る（.c-btn-fill と同じ見た目・同じ値）。 */
body.single-fluent-products .entry-content.single-content .wp-block-button__link {
  background-color: var(--c-heading); color: var(--c-base);
  border: 1px solid var(--c-heading); border-radius: 999px;
  padding: 15px 40px; font-size: 14px; letter-spacing: 0.02em; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
}
body.single-fluent-products .entry-content.single-content .wp-block-button__link::after { content: "↗"; font-size: 12px; }
body.single-fluent-products .entry-content.single-content .wp-block-button__link:hover { background-color: #55565a; border-color: #55565a; }

/* ---- FluentCart の購入ボタンを、サイトのボタン語彙に揃える（2026-08-30）
   FluentCart 既定は紺（#253241）の角丸8px。このサイトは黒の丸ボタンなので、
   商品ページだけ別のUIに見えてしまう。色・角・余白・字だけを合わせる。
   ★中に読み込み中のスピナーを持つので display と position には触らない。 */
.fluent-cart-direct-checkout-button,
a.fluent-cart-direct-checkout-button {
  background-color: var(--c-heading); color: var(--c-base);
  border: 1px solid var(--c-heading); border-radius: 999px;
  padding: 14px 34px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none;
}
.fluent-cart-direct-checkout-button:hover { background-color: #55565a; border-color: #55565a; color: var(--c-base); }
.fluent-cart-add-to-cart-button,
button.fluent-cart-add-to-cart-button {
  background-color: transparent; color: var(--c-heading);
  border: 1px solid var(--c-heading); border-radius: 999px;
  padding: 14px 34px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
}
.fluent-cart-add-to-cart-button:hover { background-color: var(--c-heading); color: var(--c-base); }