/* ★自動生成: 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 */
* { 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); }

/* 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; }
.alignfull { max-width: none; width: 100%; }

/* 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; }
/* 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 側と一致 */
.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-* が後勝ち）。 */
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 で */
}
.is-style-outline > .wp-block-button__link { background-color: transparent; border: 2px solid currentColor; }

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

.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 はそちらが勝つので既存サイトに影響しない。 */
.wp-block-cover { position: relative; display: flex; align-items: center; overflow: hidden; padding: 16px; min-height: 430px; background-size: cover; background-position: center; }
.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.wp-block-cover__background { position: absolute; inset: 0; z-index: 1; background-color: currentColor; }
/* ★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); }

/* 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; }

/* ---------- (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 {
  /* 大きい英文見出し専用フォント（League Gothic＝Web フォント。tokens.googleFonts で読込・他は Noto Sans JP）。
     使う見出し=TOPの From Zero to One… ×2／About の AI & Total Produce.／OUR STRENGTHS のみ。 */
  --font-display: 'League Gothic', 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 の調整（線の色・太さ・速さ。ここを書き換えれば即反映） */
  --anim-draw-color: #ffffff;   /* 線の色（既定=白） */
  --anim-draw-width: 1.2;       /* 線の太さ（2→1.2。ユーザー指摘=もう少し細く） */
  --anim-draw-dur: 3.4s;        /* 線を描く速さ（1.2s→2.4s→3.4s。ユーザー指摘=もう少しゆっくり） */
  --anim-draw-fill-dur: .5s;    /* 色が出る速さ（描き終えた後） */
  --anim-draw-fade: .4s;        /* 白線が消える速さ */

  /* プリローダー（画面遷移）の logo-draw 調整（ユーザー指摘=速すぎ・線が太い） */
  --asbsb-pl-draw-dur: 2.4s;    /* 描く速さ（既定 1.05s → ゆっくり） */
  --asbsb-pl-draw-width: 1;     /* 線の太さ（既定 1.4 → 細く） */

  /* 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; }

/* モバイルドロワー */
.popup-drawer .drawer-inner { background: var(--c-base); }
.popup-drawer .menu-toggle-close { color: var(--c-heading); }
.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); }
.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; }
.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; 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。高さ揃えで左寄せ） */
.c-svc-icon { margin: 0 0 8px; }
.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; }
.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; }
/* 白い角丸パネル（フッター本体・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; }
.c-footer-logo img { height: 40px; width: auto; display: block; }
.c-footer-url { color: var(--c-muted); font-size: 14px; letter-spacing: 0.02em; margin: 0; }
.c-footer-cols { width: 100%; border-top: 1px solid var(--c-border); padding-top: 40px; align-items: flex-start; }
.c-footer-col { flex: 1 0 0; min-width: 140px; }
/* 見出しは大きめ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 中央寄せ 0,2,0 を左ピンで上書き） */
.wp-block-group.c-about-lead-col { max-width: 560px; margin-left: 0; margin-right: auto; }
.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; margin-right: auto; }
.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; margin-right: 0; max-width: 760px; text-align: left;
}
.wp-block-group.c-strengths-col { max-width: 560px; margin-left: auto; margin-right: 0; 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; }
.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; }
.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; }

/* 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 と同形） */
.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: center; }
.c-contact-lead { font-size: 15px; line-height: 1.9; color: var(--c-muted); margin: 0; text-align: center; }
@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 ---- */
ul.c-news-list { width: 100%; max-width: 900px; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--wp--preset--spacing--space-md, 24px); }
.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: 42% 1fr; align-items: stretch; grid-gap: 0;
}
/* アイキャッチ未設定の記事はサムネ列なし＝1カラムに落ちる（実投稿にはアイキャッチ設定を促す=HANDOFF） */
.c-news-list article.loop-entry:not(.has-post-thumbnail) { grid-template-columns: 1fr; }
.c-news-list .post-thumbnail { margin: 0; min-height: 230px; 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: 40px 44px; 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: 32px; 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; } }

/* ---------- レスポンシブ（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; }
  .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%; }
  .c-footer-cols { flex-direction: column; gap: 28px; }
  .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; }
  .c-news-list article.loop-entry { grid-template-columns: 1fr; }
  .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; }
}

/* =====================================================================
   プラグイン説明ページ（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; }

/* ---- ヒーロー（中央寄せ・淡グレー地） ---- */
.sec-pg-hero { background: var(--c-bg-subtle); text-align: center; }
.c-pg-hero-inner { max-width: 900px; margin: 0 auto; align-items: center; }
/* プラグインのブランドアイコン（★仮＝プレースホルダー。実アイコン完成後に画像へ差し替え） */
.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;
}
/* 実ブランドアイコン画像版（ChatCheck 等・アイコンが既にある製品はプレースホルダーでなく画像を出す） */
.c-pg-hero-iconimg { width: 84px; margin: 0; }
.c-pg-hero-iconimg img { width: 84px; height: 84px; border-radius: 20px; display: block; }
.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: center; 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; }
.c-pg-hero-note { font-size: 12.5px; line-height: 1.9; color: var(--c-muted); margin: 4px 0 0; max-width: 720px; }
.c-pg-hero-btns { justify-content: 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); }

/* ---- 導入前の悩み帯 ---- */
.c-pg-problem-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.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); }
.c-pg-sec-head { max-width: 780px; margin: 0 auto; text-align: center; }
.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。モバイルでも崩れないよう幅を絞る） ---- */
.c-pg-cmp-wrap { max-width: 880px; margin: 0 auto; width: 100%; }
.c-pg-cmp-table { margin: 0; width: 100%; }
.c-pg-cmp-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.c-pg-cmp-table th, .c-pg-cmp-table td { border-bottom: 1px solid #e6e6e6; padding: 14px 14px; font-size: 14px; line-height: 1.6; vertical-align: middle; }
.c-pg-cmp-table thead th { background: #242424; color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.c-pg-cmp-table thead th:first-child { text-align: left; }
.c-pg-cmp-table th:not(:first-child), .c-pg-cmp-table td:not(:first-child) { text-align: center; width: 88px; color: var(--c-heading); font-weight: 700; }
.c-pg-cmp-table td:first-child { text-align: left; color: var(--c-heading); }
.c-pg-cmp-table tbody tr:nth-child(even) td { background: #faf9f7; }

/* ---- 活用イメージ（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; }

/* ---- 補足（ページ下部の小さめテキスト） ---- */
.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); }
.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 ボタン） ---- */
.sec-pg-cta { background: var(--c-bg-subtle); text-align: center; }
.c-pg-cta-title { font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--c-heading); margin: 0; }
.c-pg-cta-lead { font-size: 15px; line-height: 1.95; color: var(--c-body); margin: 0 auto; max-width: 720px; }
.c-pg-cta-btns { justify-content: center; }

/* ---- 法務ページ（プライバシーポリシー等・本家 shop.asobit.jp と同じ体裁） ---- */
.sec-legal-head { background: var(--c-bg-subtle); text-align: center; }
.c-legal-title { font-size: 30px; font-weight: 700; line-height: 1.4; color: var(--c-heading); margin: 0; }
.c-legal-intro { font-size: 14.5px; line-height: 1.95; color: var(--c-body); margin: 0 auto; max-width: 760px; }
.c-legal-date { font-size: 13px; color: var(--c-muted, #888); margin: 0 auto; }
.sec-legal { background: var(--c-base, #fff); }
.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; }
/* サポートページの 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%; }
  .c-pg-cmp-table th, .c-pg-cmp-table td { padding: 11px 8px; font-size: 13px; }
  .c-pg-cmp-table th:not(:first-child), .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; }
}