/*
 * BoostX Blog Article CSS
 * Source: blog_design_enforcer.py CORRECT_STYLE (参照記事: gas-estimate-auto-generate)
 * Version: 1.0.0
 * Date: 2026-04-24
 *
 * 変更禁止（2026-04-19社長直接指示）。
 */

/* v1.0.7: .border-brand-blue を削除（2026-04-27 社長指示）
 * 元々の .border-brand-blue{display:none!important} は記事本文内の特定要素を消す目的だったが、
 * テーマの single-blog.php がタイトル部分に同じクラスを使っており、タイトルが非表示になる事故が発生した。
 * → このルールは完全削除し、必要なら .bx-article 配下にスコープした記述で対応する。*/
.bx-article{font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;color:#333;line-height:1.9;max-width:800px;margin:0 auto}
.bx-toc{max-height:400px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:8px;padding:25px;margin-bottom:40px;background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.bx-toc__title{font-weight:bold;font-size:18px;margin-bottom:20px;color:#2c3e50;border-bottom:2px solid #2563eb;padding-bottom:10px}
.bx-toc__list{list-style:none;padding-left:0;margin:0}
.bx-toc__item{margin-bottom:12px}
.bx-toc__item a{color:#2563eb;text-decoration:none;font-size:15px}
.bx-h2{font-size:28px;color:#2c3e50;margin-top:60px;margin-bottom:30px;padding-bottom:15px;border-bottom:3px solid #2563eb;font-weight:bold}
.bx-h3{font-size:22px;color:#2c3e50;margin-top:40px;margin-bottom:20px;padding-left:15px;border-left:4px solid #2563eb;font-weight:bold}
.bx-p{font-size:16px;line-height:1.9;color:#333;margin-bottom:25px}
.bx-article p{font-size:16px;line-height:1.9;color:#333;margin-bottom:25px}
.bx-table-wrap{overflow-x:auto;margin:35px 0}
.bx-table{width:100%;border-collapse:collapse;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.08);border-radius:8px;overflow:hidden}
.bx-table thead tr{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%)}
.bx-table th{padding:18px 20px;text-align:left;color:#fff;font-weight:bold;border:none}
.bx-table td{padding:16px 20px;border-bottom:1px solid #e0e0e0}
.bx-table tbody tr:nth-child(odd){background-color:#fff}
.bx-table tbody tr:nth-child(even){background-color:#f8f9fa}
.bx-table td:first-child{font-weight:bold;color:#2c3e50}
.bx-faq{margin:40px 0}
.bx-faq__item{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:20px;box-shadow:0 2px 6px rgba(0,0,0,.05);overflow:hidden}
.bx-faq__q{background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);padding:20px 25px;border-bottom:1px solid #e0e0e0}
.bx-faq__q p{font-weight:bold;font-size:17px;color:#2c3e50;margin:0}
.bx-faq__q-badge{color:#2563eb;margin-right:10px}
.bx-faq__a{padding:20px 25px}
.bx-faq__a p{font-size:15px;color:#444;margin:0;line-height:1.8}
.bx-faq__a-badge{color:#27ae60;font-weight:bold;margin-right:10px}
.bx-matome{background:linear-gradient(135deg,#1e293b 0%,#2d3748 100%);border-radius:12px;padding:35px;margin:50px 0;box-shadow:0 4px 15px rgba(44,62,80,.2)}
.bx-matome__title{font-weight:bold;font-size:20px;color:#fff;margin-bottom:25px;text-align:center}
.bx-matome__list{margin:0;padding-left:25px;color:#fff}
.bx-matome__list li{margin-bottom:15px;line-height:1.7;font-size:15px;color:#fff!important}
.bx-matome li{color:#fff!important}
.bx-matome p{color:#fff!important}
.bx-point{background:#f8fafc;border-left:4px solid #0F172A;border-radius:0 6px 6px 0;padding:22px 28px;margin:35px 0}
.bx-point__title{font-weight:bold;font-size:16px;color:#0F172A;margin-bottom:10px}
.bx-point__text{font-size:15px;color:#444;margin:0;line-height:1.8}
.bx-author{border-top:2px solid #e0e0e0;margin-top:50px;padding-top:30px}
.bx-author__name{font-size:18px;font-weight:bold;color:#2c3e50;margin-bottom:5px}
.bx-author__title{font-size:14px;color:#666;margin-bottom:10px}
.bx-author__desc{font-size:14px;color:#555;line-height:1.8}
.bx-cta-box{background:#0F172A!important;border-radius:12px;padding:36px 40px;margin:56px 0;color:#fff!important;text-align:center}
.bx-cta-box__badge{display:inline-block;background:#f59e0b!important;color:#000!important;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:12px;letter-spacing:1px}
.bx-cta-box__title{font-size:20px;font-weight:700;margin:0 0 10px;color:#fff!important}
.bx-cta-box__desc{font-size:14px;color:#fff!important;margin:0 0 24px;line-height:1.7}
.bx-cta-box__btn{display:inline-block;background:#3b82f6!important;color:#fff!important;font-weight:700;font-size:15px;padding:14px 36px;border-radius:8px;text-decoration:none}
.bx-service-funnel{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:28px 32px;margin:48px 0}
.bx-service-funnel__badge{display:inline-block;font-size:12px;font-weight:700;color:#2563eb;letter-spacing:1px;margin:0 0 12px;text-transform:uppercase}
.bx-service-funnel__title{font-size:18px;font-weight:700;color:#0F172A;margin:0 0 14px;line-height:1.6}
.bx-service-funnel__desc{font-size:14px;color:#475569;line-height:1.85;margin:0 0 18px}
.bx-service-funnel__links{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0;align-items:center}
.bx-service-funnel__link{display:inline-block;color:#2563eb;font-weight:700;font-size:14px;text-decoration:underline;padding:6px 0}
.bx-service-funnel__cta{display:inline-block;background:#2563eb;color:#fff!important;font-weight:700;font-size:14px;padding:12px 22px;border-radius:8px;text-decoration:none}
.bx-service-funnel__cta:hover{background:#1d4ed8}
.bx-dl-cta{background:#0F172A;border-radius:12px;padding:36px 40px;margin:56px 0;display:flex;align-items:center;gap:36px}
.bx-dl-cta__badge{display:inline-block;background:#1e40af;color:#fff!important;font-size:12px;font-weight:700;letter-spacing:.08em;padding:4px 12px;border-radius:4px;margin-bottom:10px}
.bx-dl-cta__title{color:#fff;font-size:20px;font-weight:700;line-height:1.5;margin:0 0 8px}
.bx-dl-cta__desc{color:#94a3b8;font-size:14px;line-height:1.7;margin:0}
.bx-dl-cta__btn{display:inline-block;background:#2563EB;color:#fff;font-weight:700;font-size:15px;padding:16px 28px;border-radius:8px;white-space:nowrap;text-decoration:none;flex-shrink:0}
.bx-date{font-size:13px;color:#999;text-align:right;margin-top:50px;padding-top:20px;border-top:1px solid #e0e0e0}
.bx-img{width:100%;border-radius:8px;margin:20px 0 30px;display:block}
.bx-img-caption{font-size:13px;color:#999;text-align:center;margin-top:-20px;margin-bottom:30px}
pre,.wp-block-code,.wp-block-preformatted{background:#0f172a!important;color:#ffffff!important;padding:20px 24px!important;border-radius:8px!important;overflow-x:auto;font-size:14px!important;line-height:1.7!important;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace!important;margin:20px 0 30px!important;white-space:pre-wrap;word-wrap:break-word;border:none!important}
pre *,.wp-block-code *,.wp-block-preformatted *{color:#ffffff!important}
code{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace!important;font-size:14px}
p code,li code,td code{background:#f1f5f9!important;padding:2px 6px!important;border-radius:4px!important;color:#1e293b!important;font-size:13px!important}
pre code,.wp-block-code code,.wp-block-preformatted code{background:none!important;padding:0!important;border-radius:0!important;color:#ffffff!important;font-size:inherit!important}
@media(max-width:768px){.bx-article{padding:0 4px!important}.bx-h2{font-size:22px!important;margin-top:40px!important;margin-bottom:20px!important}.bx-h3{font-size:18px!important;margin-top:28px!important}.bx-p{font-size:15px!important}.bx-toc{padding:18px!important}.bx-toc__item a{font-size:14px!important}.bx-table-wrap{margin:20px -4px!important}.bx-table th,.bx-table td{padding:10px 12px!important;font-size:13px!important}.bx-matome{padding:24px 20px!important;margin:36px 0!important}.bx-matome__title{font-size:18px!important}.bx-matome__list li{font-size:14px!important}.bx-faq__q{padding:16px 18px!important}.bx-faq__q p{font-size:15px!important}.bx-faq__a{padding:16px 18px!important}.bx-faq__a p{font-size:14px!important}.bx-point{padding:16px 18px!important}.bx-author__desc{font-size:13px!important}pre{font-size:12px!important;padding:14px 16px!important;margin:16px 0 24px!important}}

/* =====================================================================
 * 色背景エリア 白文字強制（2026-04-24 社長直接指示）
 * ===================================================================== */
.bx-matome, .bx-matome *,
.bx-cta-box, .bx-cta-box *,
.bx-dl-cta, .bx-dl-cta * {
  color: #fff !important;
}
/* 例外：明示色維持 */
.bx-cta-box__badge { color: #000 !important; background: #f59e0b !important; }
.bx-cta-box__btn { color: #fff !important; background: #3b82f6 !important; }
.bx-dl-cta__btn { color: #fff !important; background: #2563EB !important; }

/* =====================================================================
 * モバイル（〜768px）CTA系の崩れ防止（2026-04-26 追加）
 * v1.0.0/1.0.1 では .bx-cta-box / .bx-dl-cta / .bx-service-funnel の
 * モバイル専用ルールが欠落していたため、padding/flex設定が原因で
 * 375px幅画面でオーバーフロー・ボタンが画面端まで張り付く崩れが発生していた。
 * v1.0.2 で全CTA要素のモバイル最適化を一括適用。
 * ===================================================================== */
@media (max-width: 768px) {
  /* CTAボックス（黒背景・中央寄せ） */
  .bx-cta-box {
    padding: 24px 20px !important;
    margin: 36px 0 !important;
    border-radius: 10px !important;
  }
  .bx-cta-box__title { font-size: 17px !important; line-height: 1.5 !important; }
  .bx-cta-box__desc  { font-size: 13px !important; line-height: 1.7 !important; margin: 0 0 18px !important; }
  .bx-cta-box__btn   {
    font-size: 14px !important;
    padding: 14px 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
  }
  .bx-cta-box__badge { font-size: 10px !important; padding: 3px 8px !important; }

  /* 資料ダウンロードCTA（横並び→縦積み） */
  .bx-dl-cta {
    padding: 24px 20px !important;
    margin: 36px 0 !important;
    border-radius: 10px !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
    text-align: center !important;
  }
  .bx-dl-cta__title { font-size: 17px !important; line-height: 1.5 !important; }
  .bx-dl-cta__desc  { font-size: 13px !important; line-height: 1.7 !important; }
  .bx-dl-cta__badge { font-size: 11px !important; padding: 3px 10px !important; }
  .bx-dl-cta__btn   {
    font-size: 14px !important;
    padding: 14px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
    flex-shrink: 1 !important;
  }

  /* サービス導線（料金などへの内部誘導） */
  .bx-service-funnel {
    padding: 20px 18px !important;
    margin: 32px 0 !important;
    border-radius: 10px !important;
  }
  .bx-service-funnel__title { font-size: 16px !important; line-height: 1.5 !important; }
  .bx-service-funnel__desc  { font-size: 13px !important; line-height: 1.8 !important; }
  .bx-service-funnel__badge { font-size: 11px !important; }
  .bx-service-funnel__links {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .bx-service-funnel__link {
    font-size: 13px !important;
    padding: 8px 0 !important;
  }
  .bx-service-funnel__cta {
    font-size: 14px !important;
    padding: 12px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* 共通: 画像横はみ出し防止 + リンクタップ領域確保 */
  .bx-article img,
  .bx-article video,
  .bx-article iframe { max-width: 100% !important; height: auto !important; }
  .bx-article a { word-break: break-word; }
}

/* 小型モバイル（〜480px）のさらに詰めた調整 */
@media (max-width: 480px) {
  .bx-cta-box, .bx-dl-cta { padding: 20px 16px !important; }
  .bx-cta-box__title, .bx-dl-cta__title { font-size: 16px !important; }
  .bx-cta-box__btn, .bx-dl-cta__btn { font-size: 13px !important; padding: 13px 18px !important; }
  .bx-service-funnel { padding: 18px 14px !important; }
  .bx-service-funnel__title { font-size: 15px !important; }
}

/* =====================================================================
 * v1.0.3 全記事統一フォールバック（2026-04-26 社長指示）
 *
 * 既存ブログ記事は .bx-h2 等のクラスが付いていない箇所が72%。
 * .bx-article 内の素の <h2>/<h3>/<p>/<ul>/<table>/<blockquote> 等にも
 * 同じデザインが適用されるよう descendant セレクタでフォールバックを定義。
 *
 * 既存記事のHTML構造は一切変更せず、CSSだけで全記事を統一する。
 * クラス指定（.bx-h2 等）がある場合はそちらが詳細度で優先される。
 * ===================================================================== */

/* 見出し: bx-h2 / bx-h3 と同等のデザインを素のh2/h3にも適用 */
.bx-article h2:not(.bx-h2):not(.bx-author__name):not(.bx-cta-box__title):not(.bx-dl-cta__title):not(.bx-matome__title):not(.bx-faq__q):not(.bx-service-funnel__title){
  font-size:28px;color:#2c3e50;margin-top:60px;margin-bottom:30px;padding-bottom:15px;border-bottom:3px solid #2563eb;font-weight:bold;
}
.bx-article h3:not(.bx-h3):not(.bx-author__title){
  font-size:22px;color:#2c3e50;margin-top:40px;margin-bottom:20px;padding-left:15px;border-left:4px solid #2563eb;font-weight:bold;
}
.bx-article h4{
  font-size:18px;color:#2c3e50;margin-top:30px;margin-bottom:15px;font-weight:bold;
}

/* 段落: bx-p と同等 */
.bx-article > p,
.bx-article > div > p:not(.bx-author__name):not(.bx-author__title):not(.bx-author__desc):not(.bx-cta-box__title):not(.bx-cta-box__desc):not(.bx-dl-cta__title):not(.bx-dl-cta__desc):not(.bx-matome__title):not(.bx-faq__q p):not(.bx-faq__a p){
  font-size:16px;line-height:1.9;color:#333;margin-bottom:25px;
}

/* リスト */
.bx-article > ul,
.bx-article > ol {
  font-size:16px;line-height:1.9;color:#333;margin:0 0 25px;padding-left:25px;
}
.bx-article > ul > li,
.bx-article > ol > li {
  margin-bottom:10px;
}

/* テーブル: bx-table 風（クラスなしテーブル用） */
.bx-article table:not(.bx-table){
  width:100%;border-collapse:collapse;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.08);border-radius:8px;overflow:hidden;margin:35px 0;
}
.bx-article table:not(.bx-table) thead tr{
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);
}
.bx-article table:not(.bx-table) th{
  padding:18px 20px;text-align:left;color:#fff;font-weight:bold;border:none;
}
.bx-article table:not(.bx-table) td{
  padding:16px 20px;border-bottom:1px solid #e0e0e0;
}
.bx-article table:not(.bx-table) tbody tr:nth-child(odd){background-color:#fff;}
.bx-article table:not(.bx-table) tbody tr:nth-child(even){background-color:#f8f9fa;}
.bx-article table:not(.bx-table) td:first-child{font-weight:bold;color:#2c3e50;}

/* 引用 */
.bx-article blockquote {
  background:#f8fafc;border-left:4px solid #2563eb;padding:20px 24px;margin:30px 0;font-style:italic;color:#475569;border-radius:0 6px 6px 0;
}

/* リンク */
.bx-article a:not(.bx-cta-box__btn):not(.bx-dl-cta__btn):not(.bx-service-funnel__cta):not(.bx-toc__item a){
  color:#2563eb;text-decoration:underline;
}
.bx-article a:not(.bx-cta-box__btn):not(.bx-dl-cta__btn):not(.bx-service-funnel__cta):hover{
  color:#1d4ed8;
}

/* 強調 */
.bx-article strong, .bx-article b {
  font-weight:bold;color:#0F172A;
}

/* 区切り線 */
.bx-article hr {
  border:none;border-top:2px solid #e0e0e0;margin:40px 0;
}

/* モバイル対応（〜768px）：素HTML要素にも適用 */
@media (max-width: 768px) {
  .bx-article h2:not(.bx-h2):not(.bx-author__name):not(.bx-cta-box__title):not(.bx-dl-cta__title):not(.bx-matome__title):not(.bx-faq__q):not(.bx-service-funnel__title){
    font-size:22px !important;margin-top:40px !important;margin-bottom:20px !important;
  }
  .bx-article h3:not(.bx-h3):not(.bx-author__title){
    font-size:18px !important;margin-top:28px !important;
  }
  .bx-article h4 { font-size:16px !important; }
  .bx-article > p,
  .bx-article > div > p:not(.bx-author__name):not(.bx-author__title):not(.bx-author__desc):not(.bx-cta-box__title):not(.bx-cta-box__desc):not(.bx-dl-cta__title):not(.bx-dl-cta__desc):not(.bx-matome__title){
    font-size:15px !important;
  }
  .bx-article > ul, .bx-article > ol { font-size:15px !important; padding-left:20px !important; }
  .bx-article table:not(.bx-table) th,
  .bx-article table:not(.bx-table) td { padding:10px 12px !important; font-size:13px !important; }
  .bx-article blockquote { padding:16px 18px !important; margin:20px 0 !important; }
}


/* v1.0.6: 過剰なh2/h3フォールバックを撤回し、bx-* クラス記事のデザインのみ統一に戻す。社長指示「サイズが変わる」対応 (2026-04-27) */

/* =====================================================================
 * v1.0.9: 冒頭3点セット (bx-article-summary) / 構造図 (bx-figure) /
 *         CTAアクションラッパー (bx-cta-box__action) を追加 (2026-05-04)
 *
 * 経緯:
 *   ・blog_stable_baseline.json で required 指定されているが
 *     プラグイン側に CSS 定義が存在しなかった (v1.0.0〜1.0.8)
 *   ・直近5記事すべての本番 HTML で使用中だがスタイル無効状態
 *   ・社長指示「テストとブログ作成をプラグインに合わせて」(2026-05-04)
 *     を受けて、プラグインに正規追加することで
 *     テンプレート/baseline/プラグインの三者を整合
 * ===================================================================== */

/* 冒頭3点セット: <aside class="bx-article-summary"> */
.bx-article-summary{
  background:#f8fafc;
  border-left:4px solid #2563eb;
  border-radius:0 8px 8px 0;
  padding:24px 28px;
  margin:30px 0 40px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.bx-article-summary__title{
  font-weight:bold;
  font-size:16px;
  color:#0F172A;
  margin:0 0 14px;
  letter-spacing:.02em;
}
.bx-article-summary__list{
  margin:0;
  padding-left:22px;
  color:#333;
}
.bx-article-summary__list li{
  font-size:15px;
  line-height:1.85;
  margin-bottom:8px;
}
.bx-article-summary__list li:last-child{
  margin-bottom:0;
}

/* 構造図: <figure class="bx-figure"> + <img> + <figcaption> */
.bx-figure{
  margin:35px auto;
  text-align:center;
  max-width:100%;
}
.bx-figure img{
  max-width:100%;
  height:auto;
  border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  display:inline-block;
}
.bx-figure figcaption{
  font-size:13px;
  color:#666;
  margin-top:12px;
  line-height:1.7;
  padding:0 8px;
}

/* CTA ボタンラッパー: <p class="bx-cta-box__action"> (中央寄せ・余白制御) */
.bx-cta-box__action{
  margin:0;
  text-align:center;
}

/* モバイル (〜768px): 冒頭3点セット / 構造図 の詰め調整 */
@media (max-width: 768px) {
  .bx-article-summary{
    padding:18px 18px !important;
    margin:24px 0 32px !important;
    border-radius:0 6px 6px 0 !important;
  }
  .bx-article-summary__title{
    font-size:15px !important;
    margin:0 0 10px !important;
  }
  .bx-article-summary__list{
    padding-left:18px !important;
  }
  .bx-article-summary__list li{
    font-size:14px !important;
    line-height:1.8 !important;
  }
  .bx-figure{
    margin:24px auto !important;
  }
  .bx-figure figcaption{
    font-size:12px !important;
    margin-top:10px !important;
  }
}

/* =====================================================================
 * v1.1.0: 記事デザイン v5「Feature Story」(2026-06-12 社長指示)
 *
 * - 全スタイルは .bx-v5 スコープ内のみ有効。既存記事 (.bx-article のみ) には一切影響しない。
 * - 変更対象はヒーロー・本文・監修者のみ。サイドバー/関連記事/CTA(bx-cp-cta)/テーマは不変。
 * - JS 非依存（WAF が script を遮断するため、アニメは純CSS・バーは静的幅）。
 * - 既存ゲート互換: bx-h2/bx-h3/bx-p/bx-toc/bx-article-summary/bx-faq/bx-matome/
 *   bx-author/bx-service-funnel のクラス名は維持し、本スコープで再スタイルのみ行う。
 * ===================================================================== */

.bx-v5{
  --bx5-blue:#2563EB; --bx5-blue-d:#1D4ED8; --bx5-blue-l:#3B82F6; --bx5-blue-xl:#60A5FA;
  --bx5-navy:#0F172A; --bx5-ink:#111827; --bx5-text:#374151; --bx5-muted:#64748B; --bx5-faint:#94A3B8;
  --bx5-gray:#F8FAFC; --bx5-line:#E2E8F0; --bx5-line-soft:#EEF2F7; --bx5-blue-50:#EFF6FF; --bx5-amber:#F59E0B;
  --bx5-eng:'Inter',system-ui,-apple-system,sans-serif;
  --bx5-sh-sm:0 1px 2px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.05);
  --bx5-sh-md:0 2px 4px rgba(15,23,42,.04),0 12px 28px rgba(15,23,42,.09);
  --bx5-sh-lg:0 4px 10px rgba(15,23,42,.07),0 28px 64px rgba(15,23,42,.16);
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
  color:var(--bx5-text);
  counter-reset:bxsec;
}
.bx-v5 .bx-p{font-size:16px;line-height:2.05;color:var(--bx5-text);margin-bottom:26px}
.bx-v5 .bx-p strong{color:var(--bx5-navy);font-weight:700;background:linear-gradient(transparent 64%,rgba(37,99,235,.16) 64%);padding:0 1px}
.bx-v5 .bx-lead{font-size:17px;color:#1E293B}

/* ---------- HERO（モックアップ完全準拠 / 2026-06-12 社長指示「コードの通りに全て」） ---------- */
.bx-hero{background:radial-gradient(ellipse 130% 100% at 72% -15%,#23386A 0%,#16264A 38%,#0B1326 78%);color:#fff;position:relative;overflow:hidden;border-radius:18px;margin:0}
.bx-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse 78% 88% at 32% 6%,#000 22%,transparent 70%);mask-image:radial-gradient(ellipse 78% 88% at 32% 6%,#000 22%,transparent 70%)}
.bx-hero::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");pointer-events:none;opacity:.7}
.bx-hero__orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.bx-hero__orb--1{width:480px;height:480px;background:rgba(37,99,235,.28);top:-180px;right:-110px;animation:bx5drift 14s ease-in-out infinite alternate}
.bx-hero__orb--2{width:340px;height:340px;background:rgba(96,165,250,.13);bottom:-160px;left:-90px;animation:bx5drift 18s ease-in-out infinite alternate-reverse}
@keyframes bx5drift{from{transform:translate(0,0)}to{transform:translate(34px,26px)}}
.bx-hero__in{position:relative;z-index:2;padding:34px 30px 88px;display:flex;gap:40px;align-items:center}
.bx-hero__text{flex:1 1 0;min-width:0}
.bx-hero__media{flex:0 0 38%;max-width:400px}
.bx-hero__img{width:100%;height:auto;border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.1);display:block}
.bx-hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none;z-index:1}
@media(max-width:768px){.bx-hero__in{flex-direction:column;align-items:stretch;gap:22px;padding:24px 20px 64px}.bx-hero__media{flex:none;max-width:none}}
.bx-v5 .bx-hero__crumb{font-size:12px;color:rgba(255,255,255,.5);display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px}
.bx-v5 .bx-hero__crumb a{color:rgba(255,255,255,.65)!important;text-decoration:none!important}
.bx-v5 .bx-hero__crumb a:hover{color:#fff!important}
.bx-hero__crumb-s{color:rgba(255,255,255,.28)}
.bx-hero__meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.bx-hero__cat{font-size:11.5px;font-weight:700;color:#BFDBFE;background:rgba(37,99,235,.22);border:1px solid rgba(96,165,250,.45);padding:6px 14px;border-radius:7px;letter-spacing:.03em}
.bx-hero__date{font-family:var(--bx5-eng);font-size:12px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.12em}
.bx-hero__date--upd{letter-spacing:.08em}
.bx-v5 .bx-hero__rt{font-size:12px;font-weight:500;color:rgba(255,255,255,.5);display:inline-flex;align-items:center;gap:6px}
.bx-hero__rt::before{content:"";width:13px;height:13px;flex:0 0 13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.5)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center/contain}
.bx-v5 .bx-hero__title{font-family:'Noto Sans JP',sans-serif;font-size:clamp(26px,4vw,42px);font-weight:900;color:#fff;line-height:1.44;letter-spacing:-.01em;margin:0 0 22px;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.bx-hero__hl{display:inline-block;background:linear-gradient(135deg,#BFDBFE 0%,#60A5FA 60%,#3B82F6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none}
.bx-v5 .bx-hero__lead{font-size:15px;color:rgba(255,255,255,.72);line-height:2;max-width:540px;margin:0 0 28px}
.bx-hero__trust{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.bx-v5 .bx-hero__chip{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:99px;padding:8px 18px 8px 9px;font-size:12.5px;color:rgba(255,255,255,.85);margin:0}
.bx-v5 .bx-hero__chip b{color:#fff}
.bx-hero__chip-av{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--bx5-blue),var(--bx5-blue-d));display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.5)}
.bx-hero__chip-tx{display:inline;line-height:1.6}
.bx-v5 .bx-hero__chip--vf{padding:8px 18px;gap:7px;color:#86EFAC;border-color:rgba(134,239,172,.3);background:rgba(34,197,94,.1)}
.bx-v5 .bx-hero__chip--vf::before{content:"";width:14px;height:14px;flex:0 0 14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386EFAC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") no-repeat center/contain}
/* ヒーロー登場アニメーション（モックアップ .hd .d1〜.d5 準拠） */
.bx-hd{opacity:0;transform:translateY(22px);animation:bx5rise .8s cubic-bezier(.2,.7,.3,1) forwards}
.bx-hd--d1{animation-delay:.05s}.bx-hd--d2{animation-delay:.16s}.bx-hd--d3{animation-delay:.27s}.bx-hd--d4{animation-delay:.38s}.bx-hd--d5{animation-delay:.5s}
@keyframes bx5rise{to{opacity:1;transform:none}}

/* ---------- 統計ブリッジ ---------- */
.bx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:-62px 14px 0;position:relative;z-index:5}
.bx-stat{background:#fff;border:1px solid var(--bx5-line-soft);border-radius:14px;padding:20px 16px 17px;box-shadow:var(--bx5-sh-lg);text-align:center;position:relative;overflow:hidden}
.bx-stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--bx5-blue),var(--bx5-blue-xl))}
.bx-v5 .bx-stat__k{font-family:var(--bx5-eng);font-size:9.5px;font-weight:800;letter-spacing:.2em;color:var(--bx5-faint);margin:0 0 8px;text-transform:uppercase}
.bx-v5 .bx-stat__n{font-family:var(--bx5-eng);font-size:clamp(22px,3vw,30px);font-weight:900;color:var(--bx5-navy);letter-spacing:-.02em;line-height:1.1;margin:0;font-variant-numeric:tabular-nums}
.bx-v5 .bx-stat__n i{font-style:normal;color:var(--bx5-blue);font-size:.55em;font-weight:800;margin:0 1px}
.bx-v5 .bx-stat__l{font-size:11.5px;font-weight:500;color:var(--bx5-muted);margin:6px 0 0;line-height:1.55}

/* ---------- 本文リード余白 ---------- */
.bx-v5 .bx-hero + .bx-stats + .bx-p, .bx-v5 .bx-hero + .bx-p{margin-top:34px}

/* ---------- TLDR（30秒サマリー） ---------- */
.bx-tldr{background:var(--bx5-navy);border-radius:16px;padding:26px 30px;margin:6px 0 34px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--bx5-sh-md)}
.bx-tldr::after{content:"";position:absolute;top:-50px;right:-50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.4),transparent 70%)}
.bx-tldr__head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:15px;position:relative;z-index:2}
.bx-tldr__head b{font-size:14px;font-weight:900;color:#fff;letter-spacing:.04em}
.bx-tldr__tag{font-family:var(--bx5-eng);font-size:9.5px;font-weight:800;letter-spacing:.16em;color:#1A1206;background:linear-gradient(135deg,#FBBF24,var(--bx5-amber));border-radius:99px;padding:4px 11px}
.bx-v5 .bx-tldr__list{list-style:none;display:grid;gap:11px;counter-reset:bxtl;margin:0;padding:0;position:relative;z-index:2}
.bx-v5 .bx-tldr__list li{counter-increment:bxtl;position:relative;padding-left:34px;font-size:14px;line-height:1.9;color:#E2E8F0;font-weight:500;margin:0}
.bx-v5 .bx-tldr__list li::before{content:counter(bxtl);position:absolute;left:0;top:3px;width:23px;height:23px;border-radius:8px;background:linear-gradient(135deg,var(--bx5-blue),var(--bx5-blue-d));color:#fff;font-family:var(--bx5-eng);font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 9px rgba(37,99,235,.5)}
.bx-v5 .bx-tldr__list li b{color:#fff}

/* ---------- この記事で分かること（bx-article-summary 再スタイル） ---------- */
.bx-v5 .bx-article-summary{background:linear-gradient(135deg,var(--bx5-blue-50) 0%,#fff 72%);border:1px solid #DBEAFE;border-left:none;border-radius:16px;padding:28px 32px;margin:8px 0 34px;position:relative;overflow:hidden;box-shadow:var(--bx5-sh-sm)}
.bx-v5 .bx-article-summary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--bx5-blue),var(--bx5-blue-xl))}
.bx-v5 .bx-article-summary__title{font-size:15.5px;font-weight:900;color:var(--bx5-navy);margin:0 0 16px;letter-spacing:.01em}
.bx-v5 .bx-article-summary__list{list-style:none;display:grid;gap:11px;margin:0;padding:0}
.bx-v5 .bx-article-summary__list li{position:relative;padding-left:27px;font-size:14.5px;line-height:1.8;color:#1E293B;font-weight:500;margin:0}
.bx-v5 .bx-article-summary__list li::before{content:"";position:absolute;left:3px;top:9px;width:9px;height:9px;border-radius:3px;background:var(--bx5-blue);transform:rotate(45deg);opacity:.85}

/* ---------- 目次（bx-toc 再スタイル・自動ナンバリング） ---------- */
.bx-v5 .bx-toc{max-height:none;overflow:visible;border:1px solid var(--bx5-line);border-radius:16px;background:#fff;box-shadow:var(--bx5-sh-sm);padding:28px 32px;margin-bottom:64px}
.bx-v5 .bx-toc__title{font-size:17px;font-weight:900;color:var(--bx5-navy);border-bottom:2px solid var(--bx5-navy);padding-bottom:13px;margin:0 0 8px}
.bx-v5 .bx-toc__title::after{content:"TABLE OF CONTENTS";float:right;font-family:var(--bx5-eng);font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--bx5-faint);margin-top:6px}
.bx-v5 .bx-toc__list{counter-reset:bxtoc;list-style:none;margin:0;padding:0}
.bx-v5 .bx-toc__item{counter-increment:bxtoc;border-bottom:1px dashed var(--bx5-line-soft);margin:0}
.bx-v5 .bx-toc__item:last-child{border-bottom:none}
.bx-v5 .bx-toc__item a{display:flex;gap:15px;align-items:baseline;padding:13px 8px;font-size:14.5px;color:#1E293B;font-weight:500;line-height:1.65;border-radius:9px;text-decoration:none;transition:all .18s}
.bx-v5 .bx-toc__item a::before{content:counter(bxtoc,decimal-leading-zero);font-family:var(--bx5-eng);font-size:12px;font-weight:800;color:var(--bx5-blue);flex:0 0 24px}
.bx-v5 .bx-toc__item a:hover{color:var(--bx5-blue);background:var(--bx5-blue-50);padding-left:14px}

/* ---------- セクション見出し（bx-sechead + bx-h2 再スタイル） ---------- */
.bx-sechead{margin:78px 0 28px;position:relative;counter-increment:bxsec}
/* 背景の透かし数字は社長指示で廃止（2026-06-12「ここの数字いらん」） */
.bx-sechead__no{display:flex;align-items:center;gap:13px;margin-bottom:13px;position:relative;z-index:1}
.bx-sechead__no::before{content:"SECTION " counter(bxsec,decimal-leading-zero);font-family:var(--bx5-eng);font-size:11.5px;font-weight:800;letter-spacing:.24em;color:var(--bx5-blue)}
.bx-sechead__no::after{content:"";flex:0 0 40px;height:2px;background:linear-gradient(90deg,var(--bx5-blue),transparent)}
.bx-v5 .bx-sechead .bx-h2{margin:0;padding:0 0 17px;border-bottom:1px solid var(--bx5-line)}
.bx-v5 .bx-h2{font-size:clamp(22px,3vw,27px);font-weight:900;color:var(--bx5-ink);line-height:1.56;letter-spacing:.005em;border-bottom:1px solid var(--bx5-line);padding-bottom:17px;margin-top:78px;margin-bottom:28px;position:relative;z-index:1}
.bx-v5 .bx-h2::after{content:"";position:absolute;left:0;bottom:-1px;width:76px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--bx5-blue),var(--bx5-blue-xl))}
.bx-v5 .bx-h3{font-size:19px;font-weight:700;color:var(--bx5-ink);margin:44px 0 16px;padding:3px 0 3px 17px;border-left:4px solid var(--bx5-blue);line-height:1.65}

/* ---------- 引用プル ---------- */
.bx-pull{margin:38px 0;padding:26px 30px 26px 64px;background:linear-gradient(135deg,var(--bx5-gray),#fff);border:1px solid var(--bx5-line-soft);border-radius:16px;position:relative;font-size:17.5px;font-weight:700;color:var(--bx5-navy);line-height:1.85;box-shadow:var(--bx5-sh-sm)}
.bx-pull::before{content:"\201C";position:absolute;left:22px;top:8px;font-family:Georgia,serif;font-size:54px;line-height:1;background:linear-gradient(135deg,var(--bx5-blue),var(--bx5-blue-xl));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.bx-v5 .bx-pull small{display:block;font-size:12.5px;font-weight:500;color:var(--bx5-muted);margin-top:11px;line-height:1.8}

/* ---------- ポイントボックス ---------- */
.bx-keypoint{background:var(--bx5-gray);border:1px solid var(--bx5-line-soft);border-left:4px solid var(--bx5-navy);border-radius:0 14px 14px 0;padding:22px 28px;margin:36px 0}
.bx-v5 .bx-keypoint__title{font-size:14.5px;font-weight:700;color:var(--bx5-navy);margin:0 0 9px}
.bx-v5 .bx-keypoint__text{font-size:14.5px;line-height:2;margin:0;color:var(--bx5-text)}

/* ---------- 工数比較バー（静的幅・CSSアニメ） ---------- */
.bx-bars{border:1px solid var(--bx5-line);border-radius:16px;background:#fff;box-shadow:var(--bx5-sh-md);padding:8px 0;margin:34px 0 10px;overflow:hidden}
.bx-bars__head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:18px 28px 14px;border-bottom:1px solid var(--bx5-line-soft)}
.bx-v5 .bx-bars__head b{font-size:15px;font-weight:900;color:var(--bx5-navy)}
.bx-bars__legend{display:flex;gap:18px;font-size:11.5px;color:var(--bx5-muted);font-weight:500}
.bx-bars__legend span{display:inline-flex;align-items:center;gap:6px}
.bx-bars__legend i{width:18px;height:8px;border-radius:4px;font-style:normal}
.bx-bars__legend .bx-bars__lg1 i{background:#E2E8F0}
.bx-bars__legend .bx-bars__lg2 i{background:linear-gradient(90deg,var(--bx5-blue),var(--bx5-blue-xl))}
.bx-bars__row{padding:18px 28px 16px;border-bottom:1px solid #F6F8FB}
.bx-bars__row:last-child{border-bottom:none}
.bx-bars__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.bx-v5 .bx-bars__top b{font-size:14.5px;font-weight:700;color:var(--bx5-ink)}
.bx-bars__cut{font-family:var(--bx5-eng);font-size:12px;font-weight:800;color:var(--bx5-blue-d);background:var(--bx5-blue-50);border:1px solid #BFDBFE;border-radius:99px;padding:4px 13px;white-space:nowrap}
.bx-bars__track{position:relative;height:14px;margin:5px 0}
.bx-bars__bar{position:absolute;left:0;top:3px;height:8px;border-radius:5px;transform-origin:left center;animation:bx5grow 1.1s cubic-bezier(.25,.7,.25,1) both}
.bx-bars__bar--base{background:#E2E8F0}
.bx-bars__bar--now{background:linear-gradient(90deg,var(--bx5-blue),var(--bx5-blue-xl));box-shadow:0 1px 6px rgba(37,99,235,.4);animation-delay:.2s}
@keyframes bx5grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bx-bars__val{position:absolute;top:-3px;font-family:var(--bx5-eng);font-size:11px;font-weight:700;color:var(--bx5-faint);white-space:nowrap;transform:translateX(8px)}
.bx-bars__val--now{color:var(--bx5-blue-d)}
.bx-v5 .bx-bars__note{font-size:12.5px;color:var(--bx5-faint);margin:0 0 32px;line-height:1.8}

/* ---------- ビフォーアフター ---------- */
.bx-ba{display:grid;grid-template-columns:1fr 30px 1fr;gap:0;align-items:stretch;margin:34px 0 38px}
.bx-ba__card{border-radius:16px;padding:28px 26px;border:1px solid var(--bx5-line);background:var(--bx5-gray)}
.bx-ba__card--before{background:var(--bx5-gray)}
.bx-ba__card--after{background:#fff;border-color:rgba(37,99,235,.45);box-shadow:0 4px 10px rgba(37,99,235,.06),0 22px 48px rgba(37,99,235,.13)}
.bx-ba__label{display:inline-flex;align-items:center;font-family:var(--bx5-eng);font-size:10.5px;font-weight:800;letter-spacing:.18em;padding:6px 15px;border-radius:99px;margin-bottom:16px;background:#E2E8F0;color:var(--bx5-muted)}
.bx-ba__card--after .bx-ba__label{background:linear-gradient(135deg,var(--bx5-blue),var(--bx5-blue-d));color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.4)}
.bx-v5 .bx-ba__title{font-size:15.5px;font-weight:700;color:var(--bx5-ink);line-height:1.65;margin:0 0 12px}
.bx-v5 .bx-ba__card p{font-size:13.5px;line-height:2.05;margin:0;color:var(--bx5-text)}
.bx-ba__mid{display:flex;align-items:center;justify-content:center}
.bx-ba__mid::before{content:"→";width:34px;height:34px;border-radius:50%;background:var(--bx5-blue);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(37,99,235,.45)}

/* ---------- サービス導線（bx-service-funnel 再スタイル） ---------- */
.bx-v5 .bx-service-funnel{background:linear-gradient(135deg,var(--bx5-gray),#fff);border:1px solid var(--bx5-line);border-radius:16px;padding:30px 34px;margin:50px 0;box-shadow:var(--bx5-sh-sm);position:relative;overflow:hidden}
.bx-v5 .bx-service-funnel::before{content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.09),transparent 70%)}
.bx-v5 .bx-service-funnel__badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--bx5-eng);font-size:10.5px;font-weight:800;color:var(--bx5-blue);letter-spacing:.2em;text-transform:uppercase;margin:0 0 13px}
.bx-v5 .bx-service-funnel__badge::before{content:"";width:19px;height:2px;background:var(--bx5-blue)}
.bx-v5 .bx-service-funnel__title{font-size:18px;font-weight:900;color:var(--bx5-navy);line-height:1.6;margin:0 0 13px}
.bx-v5 .bx-service-funnel__desc{font-size:14px;color:#475569;line-height:2;margin:0 0 21px}
.bx-v5 .bx-service-funnel__links{display:flex;flex-wrap:wrap;gap:13px 26px;align-items:center}
.bx-v5 .bx-service-funnel__link{display:inline-block;color:var(--bx5-blue)!important;font-weight:700;font-size:14px;text-decoration:none!important;padding:6px 0}
.bx-v5 .bx-service-funnel__link:hover{color:var(--bx5-blue-d)!important}
.bx-v5 .bx-service-funnel__cta{display:inline-block;background:var(--bx5-blue);color:#fff!important;font-weight:700;font-size:14px;padding:13px 26px;border-radius:10px;text-decoration:none;box-shadow:0 1px 2px rgba(29,78,216,.4),0 6px 18px rgba(37,99,235,.35);transition:all .22s}
.bx-v5 .bx-service-funnel__cta:hover{background:var(--bx5-blue-d);transform:translateY(-2px)}

/* ---------- FAQ（bx-faq 再スタイル・常時展開） ---------- */
.bx-v5 .bx-faq{margin:34px 0 0}
.bx-v5 .bx-faq__item{background:#fff;border:1px solid var(--bx5-line);border-radius:15px;margin-bottom:15px;box-shadow:var(--bx5-sh-sm);overflow:hidden}
.bx-v5 .bx-faq__q{background:#fff;padding:20px 25px;border-bottom:1px solid var(--bx5-line-soft)}
.bx-v5 .bx-faq__q p{display:flex;gap:14px;align-items:flex-start;font-weight:700;font-size:15.5px;color:var(--bx5-ink);line-height:1.75;margin:0}
.bx-v5 .bx-faq__q-badge{flex:0 0 29px;width:29px;height:29px;border-radius:10px;background:linear-gradient(135deg,var(--bx5-blue-50),#DBEAFE);color:var(--bx5-blue);font-family:var(--bx5-eng);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin:2px 0 0}
.bx-v5 .bx-faq__a{padding:18px 25px 22px}
.bx-v5 .bx-faq__a p{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;line-height:2.05;color:#475569;margin:0}
.bx-v5 .bx-faq__a-badge{flex:0 0 29px;width:29px;height:29px;border-radius:10px;background:#F1F5F9;color:#64748B;font-family:var(--bx5-eng);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}

/* ---------- まとめ（bx-matome 再スタイル） ---------- */
.bx-v5 .bx-matome{background:radial-gradient(ellipse 120% 130% at 12% 115%,#1C3461 0%,#0F172A 55%);border-radius:20px;padding:40px 42px;margin:36px 0 0;box-shadow:var(--bx5-sh-lg)}
.bx-v5 .bx-matome__title{display:flex;align-items:center;justify-content:center;gap:15px;font-size:19px;font-weight:900;letter-spacing:.06em;margin:0 0 28px;text-align:center}
.bx-v5 .bx-matome__title::before,.bx-v5 .bx-matome__title::after{content:"";width:36px;height:1px;background:rgba(255,255,255,.32)}
.bx-v5 .bx-matome__list{list-style:none;display:grid;gap:16px;margin:0;padding:0}
.bx-v5 .bx-matome__list li{position:relative;padding-left:36px;font-size:14.5px;line-height:2;margin:0}
.bx-v5 .bx-matome__list li::before{content:"✓";position:absolute;left:0;top:4px;width:23px;height:23px;border-radius:50%;background:linear-gradient(135deg,var(--bx5-blue),var(--bx5-blue-d));color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(37,99,235,.55)}

/* ---------- 監修者（bx-author 再スタイル・固定マークアップ互換） ---------- */
/* 監修者カード: 本番の各p インラインstyle(font-size/color/border/padding)に勝つため全面!important。
   バーは最初のpだけ・他pは素に戻す（インラインstyle付きでも線だらけにしない / 2026-06-12 崩れ修正） */
.bx-v5 .bx-author{border:1px solid var(--bx5-line)!important;border-radius:18px!important;margin:56px 0 0!important;padding:0 0 26px!important;background:#fff!important;box-shadow:var(--bx5-sh-sm)!important;overflow:hidden!important}
.bx-v5 .bx-author > p{border:none!important;background:none!important}
.bx-v5 .bx-author > p:first-child{background:linear-gradient(135deg,var(--bx5-gray),#fff)!important;border-bottom:1px solid var(--bx5-line-soft)!important;padding:14px 28px!important;font-size:12.5px!important;font-weight:700!important;color:var(--bx5-muted)!important;margin:0 0 22px!important;letter-spacing:.02em!important}
.bx-v5 .bx-author__name{font-size:19px!important;font-weight:900!important;color:var(--bx5-ink)!important;margin:0 28px 4px!important;padding:0!important;display:flex!important;align-items:center;gap:16px}
.bx-v5 .bx-author__name::before{content:"";flex:0 0 58px;width:58px;height:58px;border-radius:50%;background:url(https://boostx-inc.com/wp-content/uploads/2026/06/yoshimoto-daiki-ceo-2026.jpg) center 22%/cover no-repeat;box-shadow:0 8px 20px rgba(15,23,42,.18);border:3px solid #fff;outline:1px solid var(--bx5-line)}
.bx-v5 .bx-author__title{font-size:13px!important;color:var(--bx5-muted)!important;margin:6px 28px 13px 102px!important;padding:0!important}
.bx-v5 .bx-author__desc{font-size:13.5px!important;line-height:2!important;color:#475569!important;margin:0 28px 0 102px!important;padding:0!important}

/* ---------- 日付・図 ---------- */
.bx-v5 .bx-date{font-size:12.5px;color:var(--bx5-faint);text-align:right;margin-top:44px;padding-top:18px;border-top:1px solid var(--bx5-line)}
.bx-v5 .bx-figure{margin:32px auto 34px;text-align:center}
.bx-v5 .bx-figure img{border-radius:14px;border:1px solid var(--bx5-line-soft);box-shadow:var(--bx5-sh-md)}
.bx-v5 .bx-img{border-radius:14px;box-shadow:var(--bx5-sh-md)}

/* ---------- レスポンシブ ---------- */
@media (max-width:768px){
  .bx-hero{border-radius:14px}
  .bx-hero__in{padding:22px 20px 64px}
  .bx-v5 .bx-hero__crumb{margin-bottom:24px}
  .bx-stats{gap:9px;margin:-44px 8px 0}
  .bx-stat{padding:13px 8px 11px;border-radius:11px}
  .bx-v5 .bx-stat__k{font-size:8px;letter-spacing:.14em;margin-bottom:5px}
  .bx-v5 .bx-stat__l{font-size:9.5px}
  .bx-tldr{padding:20px 18px}
  .bx-v5 .bx-article-summary{padding:22px 18px!important;border-radius:14px!important}
  .bx-v5 .bx-toc{padding:22px 18px!important}
  .bx-v5 .bx-toc__title::after{display:none}
  .bx-sechead{margin:58px 0 22px}
  .bx-sechead::before{font-size:58px;top:-32px}
  .bx-v5 .bx-h2{font-size:21px!important;margin-top:58px!important}
  .bx-sechead .bx-h2{margin-top:0!important}
  .bx-v5 .bx-h3{font-size:17px!important;margin-top:34px!important}
  .bx-v5 .bx-p{font-size:15px!important;line-height:2!important}
  .bx-pull{padding:20px 18px 20px 50px;font-size:15px}
  .bx-pull::before{left:15px;font-size:42px}
  .bx-keypoint{padding:16px 18px}
  .bx-bars__head{padding:15px 18px 12px}
  .bx-bars__row{padding:14px 18px 12px}
  .bx-ba{grid-template-columns:1fr}
  .bx-ba__mid{padding:12px 0}
  .bx-ba__mid::before{transform:rotate(90deg)}
  .bx-v5 .bx-matome{padding:26px 20px!important}
  .bx-v5 .bx-author__name{margin:0 18px 4px}
  .bx-v5 .bx-author__name::before{flex-basis:46px;width:46px;height:46px;font-size:18px}
  .bx-v5 .bx-author__title,.bx-v5 .bx-author__desc{margin-left:18px!important;margin-right:18px!important}
  .bx-v5 .bx-author > p:first-child{padding:12px 18px!important}
}
@media (prefers-reduced-motion:reduce){
  .bx-v5 *,.bx-v5 *::before,.bx-v5 *::after{animation:none!important;transition:none!important}
  .bx-v5 .bx-hd{opacity:1!important;transform:none!important}
}

/* ---------- テーマ統合（v5記事のみ）: ヒーローが代替するためテーマ側の
   タイトル帯・アイキャッチ・パンくず帯を畳む（2026-06-12 社長指示・全記事v5化）
   - h1はSEO/アクセシビリティのためDOMに残し視覚のみ隠す（sr-only方式・display:noneにしない）
   - セレクタはテーマ予約クラス(.border-brand-blue等)を直接 display:none しない＝Step 0B-guard-2系の事故パターン回避 ---------- */
.blog-main:has(.bx-v5) > header{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0);clip-path:inset(50%);border:0!important}
.blog-main:has(.bx-v5) > div.rounded-xl.overflow-hidden.shadow-lg{display:none}
body:has(.bx-v5) nav.bg-gray-50[aria-label="Breadcrumb"]{display:none}

/* ---------- サイドバー目次カード（プラグインJSが生成・全ブログ単記事）
   2026-06-12 社長指示「サイドバーは目次とCTAのみにする」 ---------- */
.bx-sbtoc{background:#fff;border:1px solid #EEF2F7;border-radius:15px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.05)}
.bx-sbtoc__head{background:linear-gradient(135deg,#0A192F,#13294A);padding:13px 19px;font-family:'Inter',system-ui,sans-serif;font-size:10px;font-weight:800;color:#93C5FD;letter-spacing:.26em;text-transform:uppercase;display:flex;align-items:center;gap:9px}
.bx-sbtoc__head::before{content:"";width:6px;height:6px;border-radius:50%;background:#60A5FA;box-shadow:0 0 8px #60A5FA}
.bx-sbtoc__pct{margin-left:auto;font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.bx-sbtoc__list{padding:8px 10px 10px}
.bx-sbtoc__list a{display:flex;gap:12px;padding:8px 13px;border-radius:9px;font-size:12.5px;line-height:1.65;color:#64748B!important;font-weight:500;text-decoration:none!important;transition:all .18s;position:relative}
.bx-sbtoc__list a i{font-style:normal;font-family:'Inter',system-ui,sans-serif;font-size:10.5px;font-weight:800;color:#CBD5E1;padding-top:2px;flex:0 0 18px}
.bx-sbtoc__list a:hover{background:#F8FAFC;color:#111827!important}
.bx-sbtoc__list a.on{background:#EFF6FF;color:#1D4ED8!important;font-weight:700}
.bx-sbtoc__list a.on i{color:#2563EB}
.bx-sbtoc__list a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,#2563EB,#60A5FA)}
