/* 本番の head のスタイルを**同じ順序**で連結したもの（カテゴリハブ・区間 1）。
 * 生成: scripts/fetch-wp-assets.mjs — 手で編集しない。
 * 順序がカスケードを決めるため、並べ替え・分割をしないこと。
 * ★別種別の bundle と混ぜないこと（読み込む子テーマCSSが違う）。 */

/* ===== css/lp/theme.css ===== */
/* [読み込み] 英語ラベル用のセリフ体（Playfair Display）。@import は先頭に置く必要がある。 */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap");
/* =====================================================================
   AI検索パートナーズ — ブランドテーマ（カラートークンのみ）
   共通DS: techsuite-ds.css ／ 差分はこの配色だけ。
   ベース: ロゴのマゼンタ→バイオレット グラデーション（実測 色相≈333°→283°）
   ===================================================================== */
:root {
  --font-en-serif: "Playfair Display", "Noto Serif JP", "Hiragino Mincho ProN", serif;

  --accent:#6b5090;                 /* 主役バイオレット（見出しem・リンク・アイコン） */
  --accent-2:#57406f;               /* 小さい文字・バッジ用の濃色 */
  --accent-soft:#ece7f1;            /* 淡いラベンダー面 */
  --accent-glow:rgba(107, 80, 144, .18);

  --teal:#6b5090;                   /* グラデ開始＝マゼンタ */
  --teal-2:#6b5090;

  --dark: #1c1240;                   /* ダークセクション＝深いインディゴ（ロゴ終端） */
  --dark-2: #271a55;

  --accent-on-dark:#c9bcd6;         /* ダーク上のラベンダー */

  --shadow-cta:0 12px 26px rgba(107, 80, 144, .32);

  --glow-hero-1:rgba(107, 80, 144, .16);   /* ヒーロー装飾：マゼンタ */
  --glow-hero-2:rgba(107, 80, 144, .10);   /* 同：バイオレット */
  --glow-section:rgba(107, 80, 144, .16);  /* クロージング等の装飾グロー */
}



/* ===== css/lp/header.css ===== */
/* =====================================================================
   TechSuite 共通ヘッダー（.hd）単体スタイル
   目的: WordPress通常ページ（記事/QA/ブログ等）にも LP と同じ .hd ヘッダーを
         載せるための「ヘッダーだけ」の自己完結CSS。
   本文に影響しないよう全て .hd 配下にスコープ（body.nav-open のバーガー除く）。
   色は各サイトの theme.css（:root の --accent/--teal/--accent-glow/--shadow-cta）を利用。
   3種のボタン構成（①LP=アンカー ②contact/meeting=ロゴ+CTAのみ ③その他=全ナビ）は
   マークアップ側（hd_links の中身）で切替。CTAは全種共通で入れる。
   ===================================================================== */
.hd {
  /* ヘッダー用の構造トークン（.hd スコープ＝本文の :root を汚さない） */
  --border: #e3eaf0; --maxw: 1200px; --pill: 999px; --fg: #0e2a43; --fg-muted: #52697a;
  /* DS にしか無いトークンをここでも定義する。WPページは DS を読まないので、
     これが無いと var() が無効になり、メガメニューの「＋」や丸い矢印の枠線（＝丸）が消える（2026-10-11） */
  --border-strong: #c8d5df; --fg-body: #3f5566; --fg-dim: #7a8b98;
  --font-en: "Inter", system-ui, sans-serif;
  /* LP（body.ui-flat）と同じフラットなヘッダーにするためのトークン。
     --hd-fg はナビの文字色（LPは page.css が #242422 を入れている。ここでは本文色を使う） */
  --hd-fg: var(--fg); --bg-soft: #f3f8fb;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border); font-family: var(--font-jp);
}
.hd *, .hd *::before, .hd *::after { box-sizing: border-box; }
.hd a { text-decoration: none; }
.hd_inner { width: min(var(--maxw), 94%); margin-inline: auto; height: 70px; display: flex; align-items: center; gap: 34px; }
.hd_logo { flex: none; }
.hd_logo img { height: 30px; width: auto; display: block; }
.hd_nav { flex: 1; display: flex; align-items: center; gap: 30px; }
.hd_links { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
/* ナビ/テキストリンクの色は LP（body.ui-flat）と同じ「本文色・ホバーはダーク」にする。
   アクセント色（紫）にしないのは、LPでフラットなトーンに統一しているため（2026-10-11） */
.hd_links a { position: relative; padding-block: 6px; font-size: 14px; font-weight: 700; color: var(--hd-fg, var(--fg-muted)); transition: color .15s; }
.hd_links a:hover, .hd_actions .txt:hover { color: var(--dark); }
.hd_actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.hd_actions .txt { font-size: 13.5px; font-weight: 700; color: var(--fg); }
/* 今いるセクションのリンクはダーク＋下線（マークアップが aria-current を付けたときだけ効く） */
.hd_links a[aria-current="true"] { color: var(--dark); }
.hd_links a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; }
/* 電話CV（サイト別・任意。markupがある時だけ表示） */
.hd_tel { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.12; text-decoration: none; }
.hd_tel__copy { font-size: 10px; font-weight: 700; color: var(--accent); }
.hd_tel__num { font-family: var(--font-en); font-size: 16px; font-weight: 800; color: var(--fg); letter-spacing: .01em; }
.hd .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; border-radius: var(--pill); font-family: var(--font-jp); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.hd .btn--cv { color: #fff; background: linear-gradient(135deg, var(--teal) 0%, var(--accent) 62%); box-shadow: var(--shadow-cta); }
.hd .btn--cv:hover { transform: translateY(-2px); box-shadow: 0 16px 32px var(--accent-glow); }
.hd .btn--cv::after { content: "→"; font-weight: 700; line-height: 1; transition: transform .18s var(--ease); }
.hd .btn--cv:hover::after { transform: translateX(3px); }
/* ヘッダー右上に細いCVを複数並べる型（ai-searchのみ使用。.btn--cv=塗り / .btn--ghost=線 を .btn--slim で細く） */
.hd_actions--slim { gap: 8px; }
.hd .btn--slim { padding: 5px 14px; font-size: 12.5px; line-height: 1.4; letter-spacing: 0; border-radius: 4px; box-shadow: none; white-space: nowrap; gap: 0; }
.hd .btn--slim.btn--cv { background: var(--accent); border-color: var(--accent); }
.hd .btn--slim.btn--cv::after { content: none; }
.hd .btn--slim.btn--cv:hover { transform: none; box-shadow: none; background: var(--accent-2, var(--accent)); border-color: var(--accent-2, var(--accent)); }
.hd .btn--slim.btn--ghost { background: #fff; color: var(--accent); border-color: var(--accent); }
.hd .btn--slim.btn--ghost:hover { background: var(--accent-soft, #f4f0f8); }
@media (max-width: 1320px) { .hd_inner:has(.hd_actions--slim) { gap: 18px; } .hd_inner:has(.hd_actions--slim) .hd_nav { gap: 16px; } .hd_inner:has(.hd_actions--slim) .hd_links { gap: 14px; } .hd_inner:has(.hd_actions--slim) .hd_links a { font-size: 13px; } .hd .btn--slim { padding: 5px 10px; } .hd_actions--slim { gap: 6px; } }
@media (min-width: 641px) and (max-width: 1100px) { .hd_actions--slim .btn--ghost { display: none; } }
.hd_burger { display: none; width: 30px; height: 22px; position: relative; background: none; border: 0; cursor: pointer; }
.hd_burger span { position: absolute; left: 0; width: 100%; height: 2.5px; background: var(--fg); border-radius: 2px; transition: .25s; }
.hd_burger span:nth-child(1) { top: 1px; }
.hd_burger span:nth-child(2) { top: 10px; }
.hd_burger span:nth-child(3) { top: 19px; }
body.nav-open .hd_burger span:nth-child(1) { top: 10px; transform: rotate(45deg); }
body.nav-open .hd_burger span:nth-child(2) { opacity: 0; }
body.nav-open .hd_burger span:nth-child(3) { top: 10px; transform: rotate(-45deg); }
@media (max-width: 640px) {
  .hd_nav { display: none; }
  .hd_burger { display: block; margin-left: auto; }
  .hd_nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 22px; position: absolute; top: 70px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 26px 28px 32px;
    /* 画面より高くなるので、ドロワー自身をスクロールさせる（下が見切れて到達できないのを防ぐ）。
       ヘッダーが sticky なので、はみ出した分はページスクロールでは見えない。 */
    max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .hd_nav.open .hd_links { flex-direction: column; gap: 18px; }
  .hd_nav.open .hd_actions { flex-direction: column; align-items: stretch; margin-left: 0; }
  .hd_nav.open .hd_tel { align-items: center; margin-bottom: 4px; }
  .hd_nav.open .btn { width: 100%; }
  /* contact/meeting（hd_nav無し＝ハンバーガー無し）もCTAボタンを表示する（他ページと統一）。
     ロゴ＋CTAのみで収まるよう、テキストリンク・電話番号はモバイルで畳む
     （フルナビ機種でもモバイル既定は非表示＝ハンバーガー展開時のみ表示、と同じ考え方）。 */
  .hd_inner > .hd_actions { gap: 10px; }
  .hd_inner > .hd_actions .txt,
  .hd_inner > .hd_actions .hd_tel { display: none; }
  .hd_inner > .hd_actions .btn { padding: 9px 14px; font-size: 12.5px; }
  .hd_inner > .hd_actions--slim .btn--ghost { display: none; }
  .hd_inner > .hd_actions--slim .btn--slim { padding: 6px 12px; }
  .hd_nav.open .hd_actions--slim .btn--ghost { display: inline-flex; }
}

/* ---------- 中くらいの幅（641〜1100px）: LP（body.ui-flat）と同じくナビのリンクを畳んでバーガーにする。
   リンクを隠す帯（〜1100px）とバーガーが出る帯（〜640px）が食い違っていると、その帯だけ
   ナビに到達できず、ホバーでメガメニューが開いてしまう（2026-10-11 に LP 側で修正済みの内容を WP にも適用） ---------- */
@media (min-width: 641px) and (max-width: 1100px) {
  .hd_links { display: none; }
  .hd_actions { margin-left: auto; }
  .hd_burger { display: block; margin-left: auto; }
  .hd_nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 22px; position: absolute; top: 70px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 26px 28px 32px;
    /* 画面より高くなるので、ドロワー自身をスクロールさせる（下が見切れて到達できないのを防ぐ） */
    max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .hd_nav.open .hd_links { display: flex; flex-direction: column; gap: 18px; }
  .hd_nav.open .hd_actions { flex-direction: column; align-items: stretch; margin-left: 0; }
}

/* ---------- ヘッダー全幅版（.hd--wide）: ロゴを左端・CTAを右端に寄せ、左右の余白をなくす（本文幅の制限を外す）。
   LP/front と同じ体裁。techsuite-ds.css と同一仕様 ---------- */
.hd--wide .hd_inner { width: 100%; max-width: none; padding-inline: clamp(20px, 3vw, 48px); box-sizing: border-box; }
.hd--wide { border-bottom: 0; }

/* ---- ヘッダーナビ折り返し防止（WP非frontで各ラベル/電話/ボタンが2行化する不具合の修正） ---- */
.hd_nav { flex-wrap: nowrap; min-width: 0; }
.hd_links { flex-wrap: nowrap; justify-content: flex-start; }
.hd_links li { flex: 0 0 auto; list-style: none; }
.hd_links a { white-space: nowrap; }
.hd_tel { flex: 0 0 auto; }
.hd_tel__num, .hd_tel__copy { white-space: nowrap; }
.hd_actions { flex: 0 0 auto; }
.hd_actions .txt { white-space: nowrap; }
.hd .btn { white-space: nowrap; }

/* ---- ヘッダーナビのホバードロップダウン（項目をまとめて折り返しを防ぐ場合に使用。LP/frontの techsuite-ds.css と同一仕様） ---- */
.hd_links li.hd_dropdown { position: relative; }
.hd_links li.hd_dropdown > a { display: inline-flex; align-items: center; gap: 4px; }
.hd_links li.hd_dropdown > a::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .55; }
/* トリガーとメニューの間の余白は見た目だけの隙間で、その部分にカーソルを置くとホバーが外れてメニューが閉じてしまう。
   実際にホバー判定される透明ブリッジを敷いて、隙間を移動中もドロップダウンが開いたままになるようにする。 */
.hd_links li.hd_dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.hd_dropdown_menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 30px rgba(14, 42, 67, .14); padding: 8px; min-width: 120px; list-style: none; margin: 8px 0 0; z-index: 60; }
.hd_links li.hd_dropdown:hover > .hd_dropdown_menu,
.hd_links li.hd_dropdown:focus-within > .hd_dropdown_menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.hd_dropdown_menu li { white-space: nowrap; }
.hd_dropdown_menu a { display: block; padding: 6px 10px; font-size: 13.5px; font-weight: 700; color: var(--fg-muted); white-space: nowrap; }
.hd_dropdown_menu a:hover { color: var(--dark); background: var(--bg-soft); }   /* LP（.ui-flat）と同じホバー */
@media (max-width: 640px) {
  .hd_links li.hd_dropdown { position: static; }
  .hd_links li.hd_dropdown::after { content: none; }
  .hd_dropdown_menu { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: 0; padding: 8px 0 0 14px; margin: 6px 0 0; }
}

/* ---- ヘッダーナビのメガメニュー（baigie.me のサービスメニューを参考。header.css / techsuite-ds.css と同一仕様） ----
   ・「サービス」「お役立ち情報」のように項目をまとめる場合に使う。列組み（.hd_mega_cols）で中見出し＋リンクを並べる
   ・トリガーの丸い「＋」は、ホバー/フォーカスで縦棒が回って「−」になる
   ・リンクは .hd_mega_ic（丸い矢印）付き。ホバーで反転する */
/* 項目の文字を上下中央に揃える（素のリンクは行ボックスで上に寄り、ドロップダウンとずれるため）。
   メガメニューを持つヘッダー＝ai-search だけに効かせる（他サービスの見た目を変えない）。 */
/* PC幅だけ。モバイル（ハンバーガー展開）は li をブロックのままにして、
   メガメニューのパネルがトリガーの下に積まれるようにする。 */
@media (min-width: 641px) {
  .hd:has(.hd_mega) .hd_links > li { display: flex; align-items: center; }
  .hd:has(.hd_mega) .hd_links > li > a { display: inline-flex; align-items: center; }
  /* バーガーを開いたときは縦積みに戻す（横並びのままだとパネルがトリガーの横に付く） */
  .hd:has(.hd_mega) .hd_nav.open .hd_links > li { display: block; }
}
/* パネルはトリガーの真下に開く（li を基準にし、左端をトリガーに揃える）。
   left:50% の中央寄せだと、左寄りのトリガーでパネルが画面外へはみ出すため。
   li をヘッダーの高さ（.hd_links を100%）まで伸ばし、top:100% がヘッダー下端に来るようにする。 */
.hd:has(.hd_mega) .hd_nav { align-self: stretch; }
.hd:has(.hd_mega) .hd_links { height: 100%; align-items: stretch; }
.hd:has(.hd_mega) .hd_links > li.hd_mega { position: relative; }
/* display:inline-block が必須。素の <i> はインラインなので width/height が効かず、
   モバイル（ハンバーガー内＝ <a> が flex でない）で円が潰れて滲んでいた。
   寸法は 17px（border-box）＝中身15px。バーを 7×1 の整数座標に置くと、回転後も
   輪郭が整数に乗って滲まない（50%＋translate だと 0.5px ずれて滲む）。 */
.hd_mega_i { display: inline-block; vertical-align: middle; position: relative; flex: none; width: 17px; height: 17px; margin-left: 7px; border: 1px solid var(--border-strong); border-radius: 50%; }
.hd_mega_i::before, .hd_mega_i::after { content: ""; position: absolute; top: 7px; left: 4px; width: 7px; height: 1px; background: currentColor; transition: transform .3s cubic-bezier(.215, .61, .355, 1); }
.hd_mega_i::after { transform: rotate(90deg); }
.hd_links li.hd_mega:hover .hd_mega_i::after,
.hd_links li.hd_mega:focus-within .hd_mega_i::after { transform: rotate(0); }

.hd_mega_panel { position: absolute; top: calc(100% - 4px); left: 0; z-index: 110; width: max-content; max-width: min(1080px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 40px rgba(14, 42, 67, .14); opacity: 0; visibility: hidden; pointer-events: none; transition: visibility .2s, opacity .2s; }
/* トリガーとパネルの隙間を渡るときに閉じないよう、透明のブリッジを敷く（.hd_dropdown と同じ考え方） */
.hd_mega_panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.hd_links li.hd_mega:hover > .hd_mega_panel,
.hd_links li.hd_mega:focus-within > .hd_mega_panel { opacity: 1; visibility: visible; pointer-events: auto; }
.hd_mega_in { padding: 34px 38px 38px; }
.hd_mega_cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 34px; }
.hd_mega_head { margin: 0; font-family: var(--font-jp); font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--fg); }
.hd_mega_sub { display: block; margin-top: 6px; font-family: var(--font-en-serif, var(--font-en)); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }
.hd_mega_list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hd_mega_list a { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--fg-body); white-space: nowrap; }
.hd_mega_list a:hover { color: var(--accent); }
.hd_mega_ic { position: relative; flex: none; width: 17px; height: 17px; border: 1px solid var(--border-strong); border-radius: 50%; transition: border-color .15s, background-color .15s, color .15s; }
.hd_mega_ic::before { content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.hd_mega_list a:hover .hd_mega_ic { border-color: var(--accent); background: var(--accent); color: #fff; }

/* 1100px以下（ui-flat のナビが隠れる帯）はパネルを画面幅に合わせ、列を縦に積む */
@media (max-width: 1100px) {
  .hd_mega_panel { left: 0; transform: none; width: 100%; max-width: none; }
  .hd_mega_cols { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: 22px; }
  .hd_mega_in { padding: 24px 22px 28px; }
}
/* ハンバーガー内のメガメニューはアコーディオン（タップで開閉）。
   以前は「常時開いて見せる」だったため、ドロワーが長くなり中見出しも重複していた。
   ホバーでは開かない（タッチで意図せず開くため）。開閉は JS が付ける li.on だけで決める。
   ui-flat のページは 641〜1100px でもバーガーになるので、その帯も含める。 */
@media (max-width: 1100px) {
  .hd_nav.open .hd_mega_panel { position: static; display: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: 0; width: auto; max-width: none; margin: 0; }
  .hd_nav.open li.hd_mega.on > .hd_mega_panel { display: block; }
  .hd_nav.open .hd_mega_in { padding: 12px 0 2px 14px; }
  /* 中見出しの1列目はトリガーと同じ文言なので出さない（2列目以降は小見出しとして残す） */
  .hd_nav.open .hd_mega_col:first-child .hd_mega_head { display: none; }
  .hd_nav.open .hd_mega_cols { gap: 18px; }
  .hd_nav.open .hd_mega_list { margin-top: 0; gap: 14px; }
  .hd_nav.open .hd_mega_list a { white-space: normal; }
  /* 開閉アイコン: 閉=＋ / 開=−（ホバー・フォーカスでは動かさない） */
  .hd_nav.open li.hd_mega.on .hd_mega_i::after,
  .hd_nav.open li.hd_mega.on:hover .hd_mega_i::after,
  .hd_nav.open li.hd_mega.on:focus-within .hd_mega_i::after { transform: rotate(0); }
  .hd_nav.open li.hd_mega:not(.on):hover .hd_mega_i::after,
  .hd_nav.open li.hd_mega:not(.on):focus-within .hd_mega_i::after { transform: rotate(90deg); }
}
/* ---- ヘッダーのCVボタンを LP系（body.ui-flat）と同じ平坦な見た目に揃える（2026-10-11） ----
   値は techsuite-ds.css の .ui-flat .btn と同一。techsuite-ds.css を読まない
   WP/CV ページでも LP と同じボタンになるように、ここにも持たせる。
   --btn-bg は各サービスの theme/page CSS が定義。未定義のサービスでは、そのサービスの --accent
   （theme.css / theme-vars.css）に落とす。以前は ai-search の #6b5090 固定だったため、
   bakuyasu・media-partners などのヘッダーCTAが ai-search の紫になっていた（2026-10-11 修正）。 */
.hd .btn--cv { background: var(--btn-bg, var(--accent, var(--dark))); border-color: var(--btn-bg, var(--accent, var(--dark))); color: #fff; box-shadow: none; border-radius: 4px; font-weight: 500; }
.hd .btn--cv:hover { background: #fff; color: var(--btn-bg, var(--accent, var(--dark))); transform: none; box-shadow: none; }
.hd .btn--cv::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.hd .btn--cv:hover::after { transform: translateX(3px) rotate(45deg); }
.hd .btn--ghost { background: #fff; border-color: var(--border-strong); color: var(--fg); box-shadow: none; border-radius: 4px; }
.hd .btn--ghost:hover { background: var(--fg); border-color: var(--fg); color: #fff; transform: none; box-shadow: none; }


/* ===== css/lp/footer.css ===== */
/* =====================================================================
   TechSuite 共通フッター（.cta3 3分割CTA ＋ .rel 製品導線 ＋ .ft サイトフッター）単体CSS
   目的: WordPress通常ページにも LP と同じフッターを載せる（旧 site-footer/lp-chrome.css は廃止）。
   本文に影響しないよう .cta3 / .rel / .ft 配下にスコープ。DS全体(techsuite-ds.css)は載せない。
   ブランド色は各サイト theme.css（:root の --dark/--accent/--accent-2/--accent-on-dark）を利用。

   トークンは必ず .cta3 / .rel / .ft の3つに配る。WPページには DS も theme-vars.css も無いため、
   ここが抜けると var() が未定義になり、そのセクションだけ SWELL の body フォント・全幅に落ちる
   （2026-10-11: .cta3 がトークンを持たず、フッターより139px広く・書体も違っていた）。
   ===================================================================== */
.cta3, .rel, .ft {
  --on-dark: #e8f0f6; --on-dark-dim: #9fb4c4; --fg: #0e2a43; --fg-muted: #52697a; --fg-dim: #7a8b98;
  --border: #e3eaf0; --r-sm: 14px; --maxw: 1200px;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --font-en: "Inter", system-ui, sans-serif; --ease: cubic-bezier(.4, 0, .2, 1);
}
/* 書体の既定。書体を宣言していない要素（フッターの会社名・住所・リンク・コピーライト等）が
   WPの body（SWELLのZen Kaku Gothic New）に落ちないよう、配下の既定をここで決める（2026-10-11） */
.cta3 { font-family: var(--font-jp); }
.rel, .ft { font-family: var(--font-jp); }

.cta3 *, .rel *, .ft *, .cta3 *::before, .rel *::before, .ft *::before { box-sizing: border-box; }
.cta3 a, .rel a, .ft a { text-decoration: none; }
.rel .wrap { width: min(var(--maxw), 89%); margin-inline: auto; }
.rel { background: #fff; padding: clamp(60px, 7vw, 92px) 0; border-top: 1px solid var(--border); }
.rel_logo { text-align: center; }   /* ロゴは中央。テンプレートのインラインstyleから移した（2026-10-11） */
.rel_logo img { height: 24px; width: auto; margin: 0 auto 14px; opacity: .7; display: block; }
.rel h2 { text-align: center; font-family: var(--font-jp); font-weight: 700; font-size: clamp(20px, 2.4vw, 27px); color: var(--fg); margin: 0; }
.rel .div { text-align: center; font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); margin: 36px 0 16px; }
.rel_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rel_card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 22px 24px; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
.rel_card:hover { border-color: var(--accent); }   /* 浮き上がらせない（DS の ui-flat と同じ流儀） */
.rel_card .d { font-size: 12.5px; color: var(--fg-muted); line-height: 1.7; margin: 0 0 8px; }
.rel_card .n { font-family: var(--font-jp); font-weight: 700; font-size: 16px; color: var(--fg); }
.ft { background: var(--dark); color: var(--on-dark-dim); padding: 56px 0 84px; }
.ft_inner { width: min(var(--maxw), 89%); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 32px 64px; justify-content: space-between; }
.ft_info dt img { height: 30px; filter: brightness(0) invert(1); margin-bottom: 16px; }
.ft_info dt.co { font-weight: 800; color: #fff; font-size: 15px; }
.ft_info dd { margin: 8px 0 0; font-size: 12.5px; line-height: 1.8; max-width: 340px; }
.ft_col h5 { margin: 0 0 12px; font-family: var(--font-en); font-size: 11.5px; letter-spacing: .12em; color: var(--on-dark); font-weight: 600; }
.ft_col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ft_col a { font-size: 13px; color: var(--on-dark-dim); transition: color .15s; }
.ft_col a:hover { color: var(--accent-on-dark); }
.ft_copy { width: min(var(--maxw), 89%); margin: 40px auto 0; font-size: 12px; color: var(--fg-dim); }
@media (max-width: 640px) { .rel_grid { grid-template-columns: 1fr; } }

/* =====================================================================
   フッター上の3分割CTA（.cta3）= 資料請求 / お問い合わせ / メールマガジン
   WP全ページのフッター（footer-block.php）で .rel（製品・サービス）の上に置く。
   メールマガジンは記事下のウィジェットと同じ HubSpot フォーム（新規作成しない）。
   色は DS のトーンに合わせ、白の半透明だけで組む（v1 の青灰 --on-dark-dim は使わない）。
   ===================================================================== */
.cta3 { background: var(--dark); color: #fff; padding: clamp(48px, 6vw, 76px) 0; }
.cta3_in { width: min(var(--maxw), 89%); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cta3_col { min-width: 0; display: flex; flex-direction: column; padding: 0 clamp(20px, 2.6vw, 40px); }
.cta3_col:first-child { padding-left: 0; }
.cta3_col:last-child { padding-right: 0; }
.cta3_col + .cta3_col { border-left: 1px solid rgba(255, 255, 255, .28); }
.cta3_h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--font-jp); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; color: #fff; }
.cta3_h svg { flex: none; width: 26px; height: 26px; }
.cta3_d { margin: 0 0 24px; font-family: var(--font-jp); font-size: 13.5px; line-height: 1.9; color: rgba(255, 255, 255, .72); }
/* 大きめの枠線ボタン（右端に丸い矢印）。寸法は padding で取り、アイコンは整数座標で描く（滲ませない） */
.cta3_btn { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px 18px 26px; border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-family: var(--font-jp); font-size: 16px; font-weight: 700; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.cta3_btn i { position: relative; flex: none; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; }
.cta3_btn i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); transition: transform .2s var(--ease); }
.cta3_btn:hover { background: #fff; border-color: #fff; color: var(--dark); }
.cta3_btn:hover i::after { transform: translate(calc(-50% + 2px), -50%) rotate(45deg);   /* ホバーで右へ2px（端数を作らない） */ }
/* メールマガジンのフォーム（HubSpot）: 記事下のウィジェットと同じもの。
   ※ HubSpot のフォームはクロスオリジンの iframe で描画されるため、中の要素は装飾できない
      （CVページのフォームも同じ）。見た目は HubSpot 側のフォームエディタで設定する。 */
.cta3_col--news .cta3_d { margin-bottom: 16px; }
.cta3_form iframe, .cta3_form .hs-form-frame { width: 100%; max-width: 100%; border: 0; }

@media (max-width: 900px) {
  .cta3_in { grid-template-columns: 1fr; }
  .cta3_col { padding: 0; }
  .cta3_col + .cta3_col { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); margin-top: 32px; padding-top: 32px; }
  .cta3_btn { margin-top: 4px; }
}


/* ===== css/app/blog-hub.css ===== */
/* [読み込み] 英語ラベル用のセリフ体（Playfair Display）。@import は先頭に置く必要がある。 */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap");
/* =========================================================
   お役立ち情報TOP（固定ページ「ブログ」/blog/ = page-blog.php）
   ブログ / ウェビナー / お役立ち資料 への導線を1カラムで集約。
   配色・フォントは LP(lp-chrome.css) に合わせる。
   すべて .blog-hub 配下にスコープ（SWELL本文スタイルと干渉させない）。
   2026-06-30
   ========================================================= */
.blog-hub{
  --bg:#ffffff; --bg-soft:#f3f8fb; --bg-3:#eef1f4;
  --fg:#0e2a43; --fg-muted:#52697a; --fg-dim:#7a8b98;
  --accent:#6b5090; --accent-2:#57406f; --accent-soft:#ece7f1; --accent-shadow:rgba(107,80,144,.18);
  --cv-orange:#ef7322; --cv-orange-hi:#f5912f;
  --border:#e3eaf0; --border-strong:#c8d5df; --radius:20px; --radius-sm:14px; --radius-pill:999px;
  --maxw:1200px;   /* 一覧の本文幅。baigie.me の .l-block__inner と同じ（ヘッダー/フッターの --maxw とも揃える） */
  --font-jp:'Noto Sans JP','Hiragino Sans','Yu Gothic UI',system-ui,sans-serif;
  --font-en:'Inter',system-ui,sans-serif;
  color:var(--fg); font-family:var(--font-jp);
  background:var(--bg);
}
.blog-hub *{ box-sizing:border-box; }
.blog-hub a{ color:inherit; text-decoration:none; }
.blog-hub img{ display:block; max-width:100%; height:auto; }

.blog-hub .bh-inner{ max-width:var(--maxw); margin:0 auto; padding:56px 24px 80px; }

/* ---------- Head ---------- */
.blog-hub .bh-head{ text-align:center; margin-bottom:44px; }
.blog-hub .bh-eyebrow{ font-family:var(--font-en-serif, var(--font-en)); font-size:12px; letter-spacing:.22em; color:var(--accent); font-weight:600; margin:0 0 12px; }
.blog-hub .bh-title{ font-size:34px; font-weight:700; letter-spacing:.02em; margin:0 0 16px; line-height:1.3; }
.blog-hub .bh-lead{ font-size:15px; line-height:1.9; color:var(--fg-muted); max-width:680px; margin:0 auto; }

/* ---------- 3 導線タイル（横並び） ---------- */
.blog-hub .bh-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:64px; }
.blog-hub .bh-tile{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:30px 22px;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color .2s, background .2s;
}
.blog-hub .bh-tile:hover{ border-color:var(--accent); }
.blog-hub .bh-tile__ico{
  flex:none; width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
}
.blog-hub .bh-tile__ico svg{ width:28px; height:28px; }
.blog-hub .bh-tile__body{ min-width:0; }
.blog-hub .bh-tile__name{ display:block; font-size:18px; font-weight:700; margin-bottom:8px; }
.blog-hub .bh-tile__desc{ display:block; font-size:13px; line-height:1.7; color:var(--fg-muted); }

/* ---------- セクション共通 ---------- */
.blog-hub .bh-sec{ margin-bottom:60px; }
.blog-hub .bh-sec__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:14px; margin-bottom:24px; border-bottom:2px solid var(--accent-soft); }
.blog-hub .bh-sec__title{ font-size:22px; font-weight:700; margin:0; position:relative; padding-left:15px; }
.blog-hub .bh-sec__title::before{ content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:5px; border-radius:3px; background:var(--accent); }
.blog-hub .bh-sec__more{ flex:none; font-size:13px; font-weight:600; color:var(--accent); white-space:nowrap; transition:color .2s; }
.blog-hub .bh-sec__more:hover{ color:var(--cv-orange); }

/* ---------- カテゴリチップ ---------- */
.blog-hub .bh-cats{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.blog-hub .bh-cat{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-pill);
  font-size:13px; font-weight:500; color:var(--fg); transition:all .2s;
}
.blog-hub .bh-cat:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.blog-hub .bh-cat__count{ font-family:var(--font-en); font-size:11px; color:var(--fg-dim); }
.blog-hub .bh-cat:hover .bh-cat__count{ color:rgba(255,255,255,.85); }

/* ---------- ブログ記事リスト ---------- */
.blog-hub .bh-posts{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.blog-hub .bh-post__link{ display:flex; gap:18px; align-items:center; padding:14px; border-radius:var(--radius-sm); transition:background .2s; }
.blog-hub .bh-post__link:hover{ background:var(--bg-soft); }
.blog-hub .bh-post__thumb{ flex:none; width:128px; height:80px; border-radius:8px; overflow:hidden; background:var(--bg-3); }
.blog-hub .bh-post__thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-hub .bh-post__thumb--ph{ background:linear-gradient(135deg,var(--accent-soft),#fff); }
.blog-hub .bh-post__main{ min-width:0; }
.blog-hub .bh-post__metarow{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.blog-hub .bh-post__date{ font-family:var(--font-en); font-size:12px; color:var(--fg-dim); }
.blog-hub .bh-post__cat{ font-size:11px; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:2px 9px; border-radius:var(--radius-pill); }
.blog-hub .bh-post__ttl{ display:block; font-size:15px; font-weight:600; line-height:1.6; color:var(--fg);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-hub .bh-post__link:hover .bh-post__ttl{ color:var(--accent); }

/* ---------- ウェビナー カード ---------- */
.blog-hub .bh-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.blog-hub .bh-card{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .2s, background .2s; }
.blog-hub .bh-card:hover{ border-color:var(--accent); }
.blog-hub .bh-card__link{ display:flex; flex-direction:column; height:100%; }
.blog-hub .bh-card__thumb{ aspect-ratio:16/9; background:var(--bg-3); overflow:hidden; }
.blog-hub .bh-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-hub .bh-card__thumb--ph{ display:grid; place-items:center; font-family:var(--font-en); font-size:13px; letter-spacing:.18em; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.blog-hub .bh-card__body{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:7px; }
.blog-hub .bh-card__date{ font-family:var(--font-en); font-size:12px; color:var(--fg-dim); }
.blog-hub .bh-card__ttl{ font-size:14px; font-weight:600; line-height:1.6; color:var(--fg);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.blog-hub .bh-card:hover .bh-card__ttl{ color:var(--accent); }

/* ---------- お役立ち資料 ---------- */
.blog-hub .bh-docs{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.blog-hub .bh-doc{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .2s, background .2s; }
.blog-hub .bh-doc:hover{ border-color:var(--cv-orange); }
.blog-hub .bh-doc__link{ display:flex; align-items:center; gap:18px; padding:16px 20px; }
.blog-hub .bh-doc__thumb{ flex:none; width:96px; height:64px; border-radius:8px; overflow:hidden; background:var(--bg-3); display:grid; place-items:center; }
.blog-hub .bh-doc__thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-hub .bh-doc__thumb--ph{ color:var(--cv-orange); background:#fdeee2; }
.blog-hub .bh-doc__thumb--ph svg{ width:30px; height:30px; }
.blog-hub .bh-doc__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.blog-hub .bh-doc__ttl{ font-size:15px; font-weight:600; line-height:1.6; color:var(--fg); }
.blog-hub .bh-doc__cta{ font-size:13px; font-weight:600; color:var(--cv-orange); }

/* ---------- Responsive ---------- */
@media (max-width:680px){
  .blog-hub .bh-inner{ padding:36px 18px 60px; }
  .blog-hub .bh-title{ font-size:26px; }
  .blog-hub .bh-tiles{ gap:10px; }
  .blog-hub .bh-tile{ gap:10px; padding:18px 8px; }
  .blog-hub .bh-tile__ico{ width:44px; height:44px; border-radius:12px; }
  .blog-hub .bh-tile__ico svg{ width:22px; height:22px; }
  .blog-hub .bh-tile__name{ font-size:13px; margin-bottom:0; }
  .blog-hub .bh-tile__desc{ display:none; }
  .blog-hub .bh-cards{ grid-template-columns:1fr; }
  .blog-hub .bh-post__thumb{ width:96px; height:64px; }
  .blog-hub .bh-post__ttl{ font-size:14px; }
  .blog-hub .bh-doc__thumb{ width:72px; height:54px; }
}

/* ========== ページ送り（全アーカイブ共通：qa / case / useful / seminar） ==========
   archive-*.php は paginate_links を .custom-pagination 直下に、
   taxonomy-*.php は the_posts_pagination（.nav-links 入れ子）を出力する。
   SWELL 既定の .page-numbers（縦積み）に負けないよう flex で横並びを明示する。 */
.blog-hub .custom-pagination{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:40px; }
.blog-hub .custom-pagination .nav-links{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
.blog-hub .custom-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; margin:0; padding:8px 13px;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font-en); font-size:14px; line-height:1;
  color:var(--fg); text-decoration:none; transition:border-color .2s, color .2s, background .2s;
}
.blog-hub .custom-pagination .page-numbers:hover{ border-color:var(--accent); color:var(--accent); }
.blog-hub .custom-pagination .current{ background:var(--accent); border-color:var(--accent); color:#fff; }
.blog-hub .custom-pagination .dots{ border-color:transparent; background:transparent; }


/* ===== css/app/choosing-service.css ===== */
/* カテゴリ「支援会社・サービスの選び方」専用（category-choosing-service.php）。
   .blog-hub の変数（blog-hub.css / theme-vars.css）を使う。構造のみ・色は変数から。 */
.blog-hub.cs-hub .cs-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0 0 28px; font-size:13px; color:var(--fg-dim); }
.blog-hub.cs-hub .cs-crumb a{ color:var(--fg-muted); }
.blog-hub.cs-hub .cs-crumb a:hover{ color:var(--accent); text-decoration:underline; }
.blog-hub.cs-hub .cs-crumb [aria-current]{ color:var(--fg); font-weight:600; }

/* ---------- L0: 6つの切り口（3列・同じ高さに揃える） ---------- */
.blog-hub.cs-hub .cs-axes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.blog-hub.cs-hub .cs-axis{ display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.blog-hub.cs-hub .cs-axis:hover{ border-color:var(--accent); box-shadow:0 10px 28px var(--accent-shadow); }
.blog-hub.cs-hub .cs-axis__main{ position:relative; display:flex; flex-direction:column; gap:8px; padding:22px 22px 14px 70px; flex:none; }
.blog-hub.cs-hub .cs-axis__no{ position:absolute; left:20px; top:20px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-weight:700; font-family:var(--font-en); }
.blog-hub.cs-hub .cs-axis__name{ font-size:18px; font-weight:700; line-height:1.4; }
.blog-hub.cs-hub .cs-axis__desc{ font-size:13px; line-height:1.7; color:var(--fg-muted); }
.blog-hub.cs-hub .cs-axis__count{ font-size:12px; font-weight:600; color:var(--accent); }

/* ---------- チップ（小分類・他の切り口） ---------- */
.blog-hub.cs-hub .cs-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0 22px 20px; }
.blog-hub.cs-hub .cs-chips li{ margin:0; }
.blog-hub.cs-hub .cs-chips a{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; font-size:13px; background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-pill); transition:all .2s; }
.blog-hub.cs-hub .cs-chips a:hover{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.blog-hub.cs-hub .cs-chips small{ font-family:var(--font-en); font-size:11px; color:var(--accent); font-weight:700; }
.blog-hub.cs-hub .cs-chips--lg{ padding:0; }
.blog-hub.cs-hub .cs-chips--lg a{ padding:10px 18px; font-size:14px; }

/* ---------- L1: 小分類カード ---------- */
.blog-hub.cs-hub .cs-groups{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.blog-hub.cs-hub .cs-group{ display:flex; flex-direction:column; padding:22px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); }
.blog-hub.cs-hub .cs-group__name{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 14px; padding:0 0 12px 15px; font-size:17px; font-weight:700; line-height:1.4; border-bottom:2px solid var(--accent-soft); position:relative; }
.blog-hub.cs-hub .cs-group__name::before{ content:""; position:absolute; left:0; top:.2em; bottom:calc(12px + .2em); width:5px; border-radius:3px; background:var(--accent); }
.blog-hub.cs-hub .cs-group__name a:hover{ color:var(--accent); }
.blog-hub.cs-hub .cs-group__name small{ flex:none; font-size:12px; color:var(--accent); font-weight:600; }
.blog-hub.cs-hub .cs-more{ margin-top:auto; padding-top:14px; font-size:13px; font-weight:600; color:var(--accent); }
.blog-hub.cs-hub .cs-more:hover{ color:var(--cv-orange); }

/* ---------- 記事リスト ---------- */
.blog-hub.cs-hub .cs-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.blog-hub.cs-hub .cs-item{ margin:0; }
.blog-hub.cs-hub .cs-item a{ display:block; padding:14px 18px; font-size:15px; line-height:1.6; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); transition:all .2s; }
.blog-hub.cs-hub .cs-item a:hover{ border-color:var(--accent); background:var(--accent-soft); }
.blog-hub.cs-hub .cs-item.is-hub a{ border-color:var(--accent); background:var(--bg-soft); font-weight:600; }
.blog-hub.cs-hub .cs-list--compact{ gap:8px; }
.blog-hub.cs-hub .cs-list--compact .cs-item a{ padding:10px 14px; font-size:13.5px; }
.blog-hub.cs-hub .cs-badge{ display:inline-block; margin-right:10px; padding:2px 9px; font-size:11px; font-weight:700; color:#fff; background:var(--accent); border-radius:var(--radius-pill); vertical-align:1px; }

@media (max-width:1000px){
  .blog-hub.cs-hub .cs-axes, .blog-hub.cs-hub .cs-groups{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .blog-hub.cs-hub .cs-axes, .blog-hub.cs-hub .cs-groups{ grid-template-columns:1fr; }
  .blog-hub.cs-hub .bh-title{ font-size:26px; }
}

/* 本文内のパンくず（ホーム›ブログ›…）を正とし、SWELL標準の重複パンくずは隠す */
body:has(.cs-hub) .p-breadcrumb{ display:none; }


/* ===== css/app/theme-vars.css ===== */
/* [読み込み] LP/front と同じフォント（Noto Sans JP + Inter）。@import は先頭に置く必要があるためここに置く。 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&family=Playfair+Display:wght@500;600;700&display=swap");

/* フォントは LP/front に合わせる。SWELL が本文にインラインで出している設定（游ゴシック・weight500）を
   上書きする。SWELL の :root 定義より詳細度を上げて（html:root）、読み込み順に依存せず効かせる。 */
html:root{
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --font-en: "Inter", system-ui, sans-serif;
  --font-en-serif: "Playfair Display", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --swl-font_family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --swl-font_weight: 400;
}

/* SWELL 子テーマの style.css が body に "Zen Kaku Gothic New" を当てているため、
   LP/front と同じ Noto Sans JP に上書きする（body だけでは負けるので html:root で詳細度を上げる）。 */
html:root body { font-family: var(--font-jp); font-weight: 400; }
/* ai-search — WP トークン（blog / Q&A 共通・色とフォントだけ差分）
   shared/css（blog-hub / qa-archive / qa-single）の後に読み込む。構造CSSは書かない。
   ai-search＝バイオレット（/blog の既存トーンを踏襲）。 */
.blog-hub, .l-archive-qa, .l-single-qa, .l-archive-case, .l-single-case,
.l-archive-useful, .l-single-useful, .l-archive-seminar, .l-single-seminar{
  --accent:#6b5090; --accent-2:#57406f; --accent-soft:#ece7f1; --accent-shadow:rgba(107,80,144,.18);
  --cv-orange:#6b5090; --cv-orange-hi:#57406f;
}