@charset "UTF-8";
/* BoostX Media v11 統一構成（2026-10-06・V6-STANDARD §12）— 記事ページ（boostx-media/article.php・inc/article-v11.php）
   v10-article.css の後に読む。v11 の記事（外枠 .bxa--v11）だけに効く。既存の記事の見た目は変えない。
   言語は v10 と同じ: 白地・墨の文字（見出しは明朝）・業界色（--bxa-acc / --bxa-cta）は小さな印と主ボタンだけ・温かい灰の細い罫と余白で区切る。
   影・グラデーション・角丸のカード・チップ・バッジは足さない。資料CTAカードも「枠 1 つ・表紙・題・箇条・ボタン」だけ。
   画面を覆う表示・追従バナーにはしない（PC のカードは右の目次と同じ段に置くだけ）。 */

/* ---------- 1. 頭: 対象読者 → 概要（タイトルの直下・本文と同じ 680px の読み幅まで） ---------- */
.bxmt .bxa--v11 .bxv-reader{box-sizing:border-box;max-width:var(--bxa-measure);margin:0 0 12px;padding:1px 0 1px 14px;border-left:2px solid var(--bxa-acc);font-family:var(--v8-sans);font-size:14.5px;font-weight:600;line-height:1.75;letter-spacing:.01em;color:var(--bxa-ink);line-break:strict}
.bxmt .bx4.bxa--v11 .bxv-ov{max-width:var(--bxa-measure);margin:0 0 14px;font-family:var(--v8-sans);font-size:15.5px;font-weight:400;line-height:1.85;letter-spacing:.01em;color:var(--bxa-body);line-break:strict}

/* ---------- 2. この記事で分かること ＋ 読後に決められること（上は墨の太い罫・下は細い罫で閉じる） ---------- */
.bxmt .bxa--v11 .bxv-learn{margin:32px 0 0;padding:20px 0 0;border:0;border-top:2px solid var(--bxa-ink);border-radius:0;background:none}
.bxmt .bxa--v11 .bxv-learn .bxv-learn__h{margin:0 0 14px;padding:0;border:0;font-family:var(--v8-serif);font-size:20px;font-weight:600;line-height:1.5;letter-spacing:.02em;color:var(--bxa-ink)}
.bxmt .bxa--v11 .bxv-learn .bxv-learn__h::before{content:none}
.bxmt .bxa--v11 .bxv-learn .bxv-learn__l{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.bxmt .bxa--v11 .bxv-learn .bxv-learn__i{position:relative;margin:0;padding:0 0 0 24px;font-size:16px;line-height:1.75;color:var(--bxa-ink);line-break:strict}
.bxmt .bxa--v11 .bxv-learn .bxv-learn__i::before{content:"";position:absolute;left:1px;top:.62em;width:9px;height:9px;border:2px solid var(--bxa-acc);box-sizing:border-box;background:none}
.bxmt .bxa--v11 .bxv-learn .bxv-decide{margin:20px 0 0;padding:16px 0 18px;border-top:1px solid var(--bxa-rule);border-bottom:1px solid var(--bxa-rule);font-family:var(--v8-serif);font-size:16.5px;font-weight:600;line-height:1.75;letter-spacing:.01em;color:var(--bxa-ink);line-break:strict}

/* ---------- 3. 資料CTAカード（スマホ・タブレットは目次の直後／PC は右の目次の直下） ---------- */
.bxmt .bxa--v11 .bxv-wp{box-sizing:border-box;margin:28px 0 0;padding:16px 20px 20px;border:1px solid var(--bxa-rule);border-top:2px solid var(--bxa-ink);border-radius:0;background:#fff;color:var(--bxa-ink)}
.bxmt .bxa--v11 .bxv-wp__k{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.08em;line-height:1.5;color:var(--bxa-ink)}
.bxmt .bxa--v11 .bxv-wp__k::before{content:"";flex:none;width:24px;height:2px;background:var(--bxa-acc)}
.bxmt .bxa--v11 .bxv-wp__top{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0 16px;align-items:start}
/* 表紙は縦長（A4）でも横長（スライド）でも切らずに収める */
.bxmt .bxa--v11 .bxv-wp__cover{display:flex;align-items:center;justify-content:center;box-sizing:border-box;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--bxa-rule);background:var(--bxa-warm)}
.bxmt .bxa--v11 .bxv-wp__cover img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.bxmt .bxa--v11 .bxv-wp__t{min-width:0;margin:0;font-family:var(--v8-serif);font-size:17px;font-weight:600;line-height:1.6;letter-spacing:.01em;color:var(--bxa-ink);word-break:auto-phrase;line-break:strict;text-wrap:pretty}
.bxmt .bxa--v11 .bxv-wp__l{display:grid;gap:4px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--bxa-rule);list-style:none}
.bxmt .bxa--v11 .bxv-wp__i{position:relative;margin:0;padding:0 0 0 18px;font-size:14.5px;line-height:1.7;color:var(--bxa-body);line-break:strict}
.bxmt .bxa--v11 .bxv-wp__i::before{content:"";position:absolute;left:2px;top:.7em;width:6px;height:6px;background:var(--bxa-acc)}
.bxmt .bxa--v11 a.bxv-wp__btn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;margin:16px 0 0;padding:8px 18px;border-radius:2px;background:var(--bxa-cta);color:#fff;font-size:15px;font-weight:700;letter-spacing:.04em;line-height:1.4;text-align:center;text-decoration:none;transition:background-color .15s ease-out}
.bxmt .bxa--v11 a.bxv-wp__btn:hover,.bxmt .bxa--v11 a.bxv-wp__btn:focus-visible{background:var(--bx-cta-dk,#111)}
/* 右の段（幅 248px）: 表紙を小さく・字を一段小さく・題は 3 行まで（目次と同じ段に静かに並べる。
   高さ 800px の画面でも 目次 7 本＋カードが追従の段（画面の高さ − ヘッダー）に収まる大きさ） */
.bxmt .bxa--v11 .bxv-wp--rail{margin:16px 0 0;padding:12px 14px 14px}
.bxmt .bxa--v11 .bxv-wp--rail .bxv-wp__k{margin-bottom:8px;font-size:12.5px}
.bxmt .bxa--v11 .bxv-wp--rail .bxv-wp__top{grid-template-columns:56px minmax(0,1fr);gap:0 12px}
.bxmt .bxa--v11 .bxv-wp--rail .bxv-wp__t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:14px;line-height:1.55}
.bxmt .bxa--v11 .bxv-wp--rail .bxv-wp__l{gap:2px;margin-top:10px;padding-top:8px}
.bxmt .bxa--v11 .bxv-wp--rail .bxv-wp__i{padding-left:14px;font-size:12.5px;line-height:1.55}
.bxmt .bxa--v11 .bxv-wp--rail .bxv-wp__i::before{left:1px;width:5px;height:5px}
.bxmt .bxa--v11 .bxv-wp--rail a.bxv-wp__btn{min-height:44px;margin-top:12px;padding:6px 12px;font-size:14px}

/* ---------- 4. 先に結論（本文の先頭・本文と同じ読み幅。最初の段落だけ明朝で一段強く） ---------- */
.bxmt .bxa--v11 .bxa-prose > .bxv-first__p--lead{font-family:var(--v8-serif);font-size:19px;font-weight:600;line-height:1.75;letter-spacing:.01em;color:var(--bxa-ink);line-break:strict}

/* 記事末の診断・無料相談の枠、中盤の診断は v10 のまま（ここでは何も足さない・2026-10-06 社長指示） */

/* ---------- 5. 版面 ---------- */
@media (min-width:1200px){
  /* PC は右の段のカードだけ（本文の頭のカードは出さない＝同時に 2 つ出さない） */
  .bxmt .bxa--v11 .bxv-wp--inline{display:none}
  .bxmt .bxa--v11 .bxv-learn{margin-top:40px}
}
/* 2026-10-06 親: 画面の高さが低い PC でも項目（2〜3）は隠さない（統一プロンプト「カードに内容を示す2〜3項目」）。
   右の段は v10 の .bxa-rail が max-height＋overflow:auto なので、収まらなければ段の中でスクロールする */
@media (min-width:1200px) and (max-height:760px){
  .bxmt .bxa--v11 .bxv-wp--rail .bxv-wp__t{-webkit-line-clamp:2}
}
@media (min-width:768px) and (max-width:1199px){
  .bxmt .bxa--v11 .bxv-wp__top{grid-template-columns:120px minmax(0,1fr);gap:0 20px}
  .bxmt .bxa--v11 .bxv-wp__t{font-size:18px}
}
@media (max-width:767px){
  /* スマホは H1 → 対象読者 → 概要 → メタ → 写真 の順（v10 は写真が先頭。v11 は文を先に読ませる） */
  .bxmt .bxa--v11.bxa--b .bxa-pic.bx8a-hero__pic{order:0;margin-top:16px;margin-bottom:0}
  .bxmt .bxa--v11 .bxv-reader{font-size:14px;margin-bottom:10px}
  .bxmt .bx4.bxa--v11 .bxv-ov{font-size:15px;line-height:1.8;margin-bottom:12px}
  .bxmt .bxa--v11 .bxv-learn{margin-top:24px;padding-top:16px}
  .bxmt .bxa--v11 .bxv-learn .bxv-learn__h{font-size:18.5px;margin-bottom:12px}
  .bxmt .bxa--v11 .bxv-learn .bxv-learn__i{font-size:15.5px}
  .bxmt .bxa--v11 .bxv-learn .bxv-decide{margin-top:16px;padding:14px 0 16px;font-size:15.5px}
  .bxmt .bxa--v11 .bxv-wp{margin-top:24px;padding:14px 16px 18px}
  .bxmt .bxa--v11 .bxv-wp__top{grid-template-columns:88px minmax(0,1fr);gap:0 14px}
  .bxmt .bxa--v11 .bxv-wp__t{font-size:16px}
  .bxmt .bxa--v11 .bxa-prose > .bxv-first__p--lead{font-size:17.5px}
}
@media print{
  .bxmt .bxa--v11 .bxv-wp{display:none}
}