/*
 * legacy-content.css
 * 旧テーマ(SANGO)のエディタで作られた本文を、ベストミルのテーマで正しく見せるためのCSS。
 *
 * 本番137本の本文には、旧テーマ前提のクラスが延べ5,000箇所以上残っている
 * （蛍光マーカー1,085・ボタン463・タイムライン429・見出し装飾394 など）。
 * 記事のHTMLは書き換えず、同じクラス名にこちら側でスタイルを当てて救う。
 *
 * ※SANGOのCSSは複製していない。クラス名だけを受けて、ベストミルの3色ルール
 *   （紺=情報／緑=成約／コーラル=寄り添い）に沿って独自に組み直したもの。
 * ※記事本文を新しく書き直していく過程で不要になったら、このファイルごと外せる。
 */

:root{
  /* 本文のインラインstyleが参照している変数。未定義のままだと色が消えるので受け皿を用意する */
  --sgb-accent-color:var(--bm-green);
  --wp--preset--color--sango-main:var(--bm-navy);
  --wp--preset--color--sango-pastel:#EAF0F7;
  --wp--preset--color--sango-gray:var(--bm-text-sub);
  --sgb-main-color:var(--bm-navy);
  --sgb-pastel-color:#EAF0F7;
}

/* ---- 蛍光マーカー（1,085箇所）---- */
.keiko_yellow{background:linear-gradient(transparent 62%,#FFEB99 62%);}
.keiko_blue{background:linear-gradient(transparent 62%,#CFE6FF 62%);}
.keiko_pink{background:linear-gradient(transparent 62%,#FFD9E2 62%);}
.keiko_green{background:linear-gradient(transparent 62%,#CFEEDC 62%);}

/* ---- ボタン（463箇所）---- */
/* 本文中のAmazonリンクなどの導線。押せると分かる見た目に戻す */
.wp-block-sgb-btn{margin:22px 0;text-align:center;}
.wp-block-sgb-btn a,.wp-block-sgb-btn a.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--bm-green);color:#fff;font-size:var(--bm-fs-base);font-weight:800;
  padding:14px 26px;border-radius:var(--bm-radius-btn);text-decoration:none;
  box-shadow:var(--bm-shadow-green);line-height:1.3;max-width:100%;
}
.wp-block-sgb-btn a:hover{filter:brightness(1.04);}
.wp-block-sgb-btn.sng-align-center{text-align:center;}
.wp-block-sgb-btn.sng-align-left{text-align:left;}

/* ---- 手順のタイムライン（429箇所・56本で使用）---- */
.sgb-tl{position:relative;margin:20px 0;padding-left:26px;}
.sgb-tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--bm-border);}
.sgb-tl-item{position:relative;margin-bottom:22px;}
.sgb-tl-item:last-child{margin-bottom:0;}
.sgb-tl-item__marker,.sgb-tl-item__label--default{
  position:absolute;left:-26px;top:4px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--bm-navy);box-sizing:border-box;
}
.sgb-tl-item__title{font-size:var(--bm-fs-lg);font-weight:800;color:var(--bm-navy);margin-bottom:6px;line-height:1.5;}
.sgb-tl-item__main{font-size:var(--bm-fs-base);}
.sgb-tl-item__main p{margin:0 0 .8em;}

/* ---- 見出し装飾（394箇所）---- */
.sgb-heading{margin:28px 0 14px;}
.sgb-heading__inner{display:block;padding:10px 14px;border-left:4px solid var(--bm-navy);
  background:var(--bm-bg);border-radius:0 var(--bm-radius-sm) var(--bm-radius-sm) 0;}
.sgb-heading__inner--center{text-align:center;border-left:none;border-radius:var(--bm-radius-sm);}
.sgb-heading__text{font-weight:800;color:var(--bm-navy);}
.sgb-heading--type1 .sgb-heading__inner{border-left-width:4px;}

/* ---- 囲みボックス（72箇所）---- */
/* 色は本文のインラインstyleが持っているので、こちらは余白と枠だけ整える */
.sgb-box-simple{margin:20px 0;border-radius:var(--bm-radius-card);overflow:hidden;}
.sgb-box-simple__title{padding:8px 14px;font-size:var(--bm-fs-md);font-weight:700;}
.sgb-box-simple__body{padding:14px;border:1px solid var(--bm-border);border-top:none;}
.sgb-box-simple__body p:last-child{margin-bottom:0;}

/* ---- FAQ（80箇所）---- */
.sgb-faq{margin:16px 0;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);
  background:#fff;overflow:hidden;}
.sgb-faq .hhq{margin:0;padding:13px 16px 13px 42px;position:relative;font-size:var(--bm-fs-lg);
  font-weight:700;color:var(--bm-navy);background:var(--bm-bg);}
.sgb-faq .hhq::before{content:"Q";position:absolute;left:16px;top:13px;font-weight:800;color:var(--bm-blue);}
.sgb-faq .hha{padding:13px 16px 13px 42px;position:relative;font-size:var(--bm-fs-base);}
.sgb-faq .hha::before{content:"A";position:absolute;left:16px;top:13px;font-weight:800;color:var(--bm-green-text);}

/* ---- リストのスタイル ---- */
.is-style-sango-list-circle,.is-style-sango-list-simple,.is-style-sango-list-check{list-style:none;padding-left:0;}
.is-style-sango-list-circle li,.is-style-sango-list-simple li,.is-style-sango-list-check li{
  position:relative;padding-left:24px;margin-bottom:8px;}
.is-style-sango-list-circle li::before{content:"";position:absolute;left:4px;top:.55em;
  width:9px;height:9px;border-radius:50%;border:2px solid var(--bm-blue);box-sizing:border-box;}
.is-style-sango-list-simple li::before{content:"";position:absolute;left:6px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--bm-text-sub);}
.is-style-sango-list-check li::before{content:"";position:absolute;left:3px;top:.35em;
  width:12px;height:12px;background:var(--bm-green);
  -webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l9 -9'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l9 -9'/%3E%3C/svg%3E");}

/* ---- 表（67箇所）---- */
/* スマホで横にはみ出さないよう、表だけ横スクロールさせる */
.wp-block-table{overflow-x:auto;}
.wp-block-table table{width:100%;border-collapse:collapse;font-size:var(--bm-fs-sm);background:#fff;}
.wp-block-table th,.wp-block-table td{border:1px solid var(--bm-border);padding:9px 10px;}
.wp-block-table thead th{background:var(--bm-navy);color:#fff;font-weight:700;}
.sgb-table-icon[data-type="circle"]{color:var(--bm-green-text);font-weight:700;}
.sgb-table-icon[data-type="cross"]{color:var(--bm-text-sub);}

/* ---- 画像の枠（108箇所）---- */
.is-style-sango-with-border img{border:1px solid var(--bm-border);border-radius:var(--bm-radius-sm);}

/* ---- 文字色 ---- */
.has-sango-gray-color{color:var(--bm-text-sub);}
.has-sango-main-color{color:var(--bm-navy);}
.main-bc{background-color:var(--bm-navy);}
.main-bdr{border-color:var(--bm-navy);}

/* ---- Font Awesome（548箇所）---- */
/* アイコンフォントは読み込まない。使われている5種だけCSSマスクで用意する */
.fa,.fas,.far,.fab{display:inline-block;width:1em;height:1em;vertical-align:-.125em;
  -webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;}
/* 色を持たせるのは用意した5種だけ。未対応のアイコンは何も描かない
   （ここでbackground-colorを共通指定すると、マスクの無いアイコンが塗りつぶしの四角になる） */
.fa-lightbulb,.fa-check,.fa-angle-right,.fa-arrow-alt-circle-down,.fa-bullhorn{background-color:currentColor;}
.fa-lightbulb{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 1 3 11v2h-6v-2a6 6 0 0 1 3 -11z M9.5 19h5 M10.5 21.5h3'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 1 3 11v2h-6v-2a6 6 0 0 1 3 -11z M9.5 19h5 M10.5 21.5h3'/%3E%3C/svg%3E");}
.fa-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l9 -9'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l9 -9'/%3E%3C/svg%3E");}
.fa-angle-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6'/%3E%3C/svg%3E");}
.fa-arrow-alt-circle-down{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18z M12 8v8 M9 13l3 3l3 -3'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18z M12 8v8 M9 13l3 3l3 -3'/%3E%3C/svg%3E");}
.fa-bullhorn{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9v6h3l9 5V4l-9 5z M18 9a3 3 0 0 1 0 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9v6h3l9 5V4l-9 5z M18 9a3 3 0 0 1 0 6'/%3E%3C/svg%3E");}

/* ---- ブロックのラッパー要素 ----
   sgbのブロックは <div class="wp-block-sgb-xxx sgb-xxx"> の二重構造になっている。
   内側だけ整えると余白が二重になるので、外側は余白を持たせない。 */
.wp-block-sgb-timeline,.wp-block-sgb-headings,.wp-block-sgb-faq-item,
.wp-block-sgb-block-simple,.wp-block-sgb-box,.wp-block-sgb-message{margin:20px 0;}
.wp-block-sgb-timeline .sgb-tl{margin:0;}
.wp-block-sgb-faq-item.sgb-faq{margin:16px 0;}
.wp-block-sgb-timeline-item{margin:0;}

/* ボタンの後置きアイコン */
.wp-block-sgb-btn__icon-after{margin-left:2px;font-size:.9em;}

/* ボックスの枠あり・枠なし・見出し形状のバリエーション */
.sgb-box-simple--no-border .sgb-box-simple__body{border:none;}
.sgb-box-simple--with-border .sgb-box-simple__body{border:1px solid var(--bm-border);border-top:none;}
.sgb-box-simple--title-normal .sgb-box-simple__title{border-radius:0;}

/* FAQの点線バリエーション */
.sgb-faq--dotted .hha{border-top:1px dashed var(--bm-border);}

/* メモ枠の段落（52箇所） */
.is-style-sango-paragraph-memo-alt{
  background:var(--bm-bg);border:1px dashed var(--bm-border);
  border-radius:var(--bm-radius-sm);padding:12px 14px;margin:16px 0;
  font-size:var(--bm-fs-sm);color:var(--bm-text);
}

/* お知らせ系ブロックは <div class="wp-block-sgb-message"><div class="memo">…</div></div>
   という入れ子で、外側はただのラッパー。ここに背景や枠を付けると箱が二重になる。
   見た目は内側の .memo が持つ。 */
.wp-block-sgb-message{margin:20px 0;}

/* レスポンシブ表：スマホでは横スクロールで逃がす */
.is-style-sango-table-responsive{overflow-x:auto;}
.is-style-sango-table-responsive table{min-width:520px;}

/* ---- メモ／メッセージボックス（23箇所）----
   <div class="memo"><div class="memo_ttl"><span class="sng-box-msg__icon"><i class="far fa-lightbulb"></i></span>… */
.memo,.sng-box,.box2,.bg-box{
  margin:20px 0;padding:14px 16px;border-radius:var(--bm-radius-card);
  background:var(--bm-bg);border:1px solid var(--bm-border);font-size:var(--bm-fs-sm);
}
.memo_ttl{display:flex;align-items:center;gap:8px;font-weight:800;margin-bottom:8px;}
.sng-box-msg__icon{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:26px;height:26px;border-radius:50%;color:#fff;font-size:14px;
}
.sng-box-msg__title{font-weight:800;}
.sng-box-msg__contents p:last-child{margin-bottom:0;}
.sng-shadow-0{box-shadow:none;}

/* ---- 吹き出し（41箇所）---- */
.balloon{margin:18px 0;padding:13px 15px;background:var(--bm-bg);
  border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);font-size:var(--bm-fs-sm);}

/* ---- 表のラッパー（90箇所）---- */
.table-wrap,.service-table{overflow-x:auto;}
.service-table table{width:100%;border-collapse:collapse;font-size:var(--bm-fs-sm);}
.service-table-head{font-weight:700;color:var(--bm-navy);}

/* ---- 文字まわりのユーティリティ ---- */
.bold{font-weight:700;}
.big{font-size:1.14em;}
.large{font-size:1.28em;}
.small{font-size:.88em;}
.center{text-align:center;}
.emphasis{font-weight:700;color:var(--bm-navy);}
.haiiro{color:var(--bm-text-sub);}
.dfont{font-feature-settings:"palt";}
.text-link{color:var(--bm-blue);text-decoration:underline;}
.relevance-link{display:inline-block;color:var(--bm-blue);font-weight:700;}
.wp-element-caption{font-size:var(--bm-fs-xs);color:var(--bm-text-sub);text-align:center;margin-top:6px;}

/* ボタンのサイズ違い。.normal 単体だと他に当たるのでボタン内に限定する */
.wp-block-sgb-btn a.normal{font-size:var(--bm-fs-base);}
.wp-block-sgb-btn a.small{font-size:var(--bm-fs-sm);padding:11px 20px;}
.wp-block-sgb-btn a.big{font-size:var(--bm-fs-lg);padding:16px 30px;}

/* ---- 独自クラス（本番のカスタマイザー「追加CSS」で定義されていたもの）----
   テーマを切り替えると追加CSSは失われるため、崩れない最小限の見た目を当てておく。
   本番の追加CSSを取得できたら、こちらに移植して置き換えること。 */

/* 比較表に並ぶサービスのロゴ */
.compare-image{display:inline-block;vertical-align:middle;max-height:26px;width:auto;}

/* テレビ/スマホなど、対応状況を示すラベル */
.view{display:inline-flex;align-items:center;gap:4px;font-size:var(--bm-fs-xs);
  color:var(--bm-text-sub);white-space:nowrap;}
.view.tv::before{content:"TV";font-weight:700;color:var(--bm-navy);}
.view.mobile::before{content:"スマホ";font-weight:700;color:var(--bm-navy);}

/* 用語・期間などの小さな見出し */
.fs-term{font-size:var(--bm-fs-xs);color:var(--bm-text-sub);font-weight:700;}

/* 矢印つきリンク */
.text-link.arrow::after{content:"›";margin-left:4px;font-weight:700;}

/* 交互に色が付く表 */
table.alternate tbody tr:nth-child(even){background:var(--bm-bg);}

/* 枠線つきの表 */
.has-border-color,.has-whitesmoke-border-color{border-color:var(--bm-border)!important;}
.wp-block-table.is-style-regular table{border:1px solid var(--bm-border);}

/* 垂直中央揃え（カラムブロック） */
.is-vertically-aligned-center{align-self:center;}

/* =========================================================
   本文ブロックの配色をベストミルに統一する
   SANGOで使われていた色（ターコイズ #54c3af・赤 #f9584d など）が
   本文のインラインstyleに残っているため、記事本文の中だけ上書きする。
   .bm-body で囲んでいるので、テーマ側のUIには影響しない。
   3色ルール：紺=情報 ／ 緑=成約 ／ コーラル=注意・寄り添い
   ========================================================= */

/* ---- 囲みボックス（72箇所）----
   見出しは紺、本文は白。ベストミルの基本情報表（.bm-spec）と同じ語彙に揃える */
.bm-body .sgb-box-simple{border:1px solid var(--bm-border);}
.bm-body .sgb-box-simple__title{
  background:var(--bm-navy)!important;color:#fff!important;
  font-size:var(--bm-fs-md);font-weight:700;padding:9px 14px;
}
.bm-body .sgb-box-simple__body{
  background:#fff!important;border-color:var(--bm-border)!important;
  border-top:none;padding:14px;
}

/* ---- 強調の色文字（220箇所）----
   SANGOの赤をコーラルに。注意・共感はコーラルという役割分担に合わせる */
.bm-body mark.has-inline-color{background:transparent;color:var(--bm-coral-text)!important;font-weight:700;}
.bm-body mark:not(.has-inline-color){background:linear-gradient(transparent 62%,#FFEB99 62%);color:inherit;}

/* ---- CTA上のマイクロコピー（4箇所）---- */
.bm-body .microcopy{
  color:var(--bm-coral-text)!important;font-size:var(--bm-fs-sm);font-weight:700;
  text-align:center;margin:0 0 6px;
}

/* ---- タイムラインの見出しを本文の見出しと揃える ---- */
.bm-body .sgb-tl-item__title{font-size:var(--bm-fs-lg);}

/* ---- 独自クラスの作り直し ----
   旧サイトの追加CSSは引き継がず、ベストミルのデザインで組む */
.bm-body .service-table{overflow-x:auto;margin:18px 0;}
.bm-body .service-table table{width:100%;border-collapse:collapse;font-size:var(--bm-fs-sm);
  background:#fff;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);overflow:hidden;}
.bm-body .service-table th,.bm-body .service-table td{padding:10px 8px;border-bottom:1px solid var(--bm-line,#F0F4F8);text-align:center;}
.bm-body .service-table-head,.bm-body .service-table thead th{
  background:var(--bm-navy);color:#fff;font-weight:700;}
.bm-body .service-table td:first-child{text-align:left;font-weight:600;}

/* 対応状況のラベル（TV／スマホ）はバッジで表す */
.bm-body .view{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--bm-radius-pill);
  background:#EAF0F7;color:var(--bm-blue);font-size:var(--bm-fs-xs);font-weight:700;white-space:nowrap;}
.bm-body .view.tv::before{content:"テレビ";}
.bm-body .view.mobile::before{content:"スマホ";}

.bm-body .fs-term{display:inline-block;font-size:var(--bm-fs-xs);font-weight:700;
  color:var(--bm-text-sub);letter-spacing:.02em;}
.bm-body .compare-image{max-height:24px;width:auto;vertical-align:middle;}

/* ---- メモ／ポイント枠の配色をベストミルに寄せる ----
   本文のインラインstyleがSANGOの水色（#d2f0ff）と青文字（#009EF3）を持っており、
   そのままだと文字まで青一色になって読みにくい。本文の中だけ上書きする。 */
.bm-body .memo{
  background:var(--bm-bg)!important;color:var(--bm-text)!important;
  border:1px solid var(--bm-border);border-radius:var(--bm-radius-card)!important;
}
.bm-body .memo .memo_ttl,.bm-body .memo .sng-box-msg__title{color:var(--bm-navy);}
.bm-body .memo .sng-box-msg__icon{background:var(--bm-navy)!important;}
.bm-body .memo li,.bm-body .memo p{color:var(--bm-text);}
.bm-body .memo strong{color:var(--bm-navy);}
.bm-body .sng-box-msg__contents > :last-child{margin-bottom:0;}

/* =========================================================
   SANGOを止めると崩れる・消える部品（T-005）
   ========================================================= */

/* ---- 本文中の関連記事カード（sgb/kanren 226箇所・sgb/posts 38箇所）----
   inc/bestmil-legacy-blocks.php が描画する。記事末尾の「あわせて読みたい」と同じ見た目 */
.bm-body .bm-kanren{display:flex;flex-direction:column;gap:8px;margin:18px 0;}
.bm-body .bm-kanren__card{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  text-decoration:none;font-size:var(--bm-fs-md);font-weight:700;color:var(--bm-blue);
}
.bm-body .bm-kanren__card .ti{flex-shrink:0;color:var(--bm-text-sub);}

/* ---- アコーディオン（2箇所）----
   開閉の仕組み（チェックボックス）はSANGOが後から差し込んでいたため本文に無い。
   開いたままになるので、見出しだけ囲みボックスの見出しと揃えて中身は全部見せる */
.bm-body .wp-block-sgb-accordion{border:1px solid var(--bm-border);margin:18px 0;}
.bm-body .sgb-acc__title{
  display:block;background:var(--bm-navy)!important;color:#fff!important;
  font-size:var(--bm-fs-md);font-weight:700;padding:9px 14px;
}
.bm-body .sgb-acc__content{padding:14px;background:#fff;}

/* ---- 外部サイトへのリンクカード（sgb/sanko 1箇所）----
   何も当てないと画像が原寸（600px）で出る。画像を小さく左に置いた横長カードにする */
.bm-body .sgb-e-link{
  display:flex;gap:12px;align-items:center;margin:18px 0;padding:12px;
  background:#fff;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);
  text-decoration:none;color:var(--bm-text);
}
.bm-body .sgb-e-link__image{flex:0 0 30%;max-width:160px;}
.bm-body .sgb-e-link__img{display:block;width:100%;height:auto;border-radius:4px;}
.bm-body .sgb-e-link__text{min-width:0;}
.bm-body .sgb-e-link__catchy{display:none;}
.bm-body .sgb-e-link__title{font-size:var(--bm-fs-md);font-weight:700;color:var(--bm-blue);line-height:1.5;}
.bm-body .sgb-e-link__sitename{margin-top:4px;font-size:var(--bm-fs-xs);color:var(--bm-text-sub);}

/* ---- アプリ紹介（AppReach 4箇所）（T-002）----
   旧サイトは追加CSSで整えていたため、テーマを替えるとアイコンが原寸（512px）で出る。
   本文のHTMLは2種類ある：ボタンが .appreach__links の中にあるものと、
   figure で並べて .appreach__links が空のもの。どちらも同じカードに見えるようにする */
.bm-body .appreach{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:18px 0;padding:12px;
  background:#fff;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);
}
.bm-body .appreach__icon{flex:0 0 56px;width:56px;height:56px;margin:0;border-radius:12px;object-fit:cover;}
.bm-body .appreach__detail{flex:1 1 calc(100% - 68px);min-width:0;}
.bm-body .appreach__name{margin:0;font-size:var(--bm-fs-md);font-weight:700;line-height:1.4;color:var(--bm-text);}
.bm-body .appreach__info{margin:2px 0 0;font-size:var(--bm-fs-xs);color:var(--bm-text-sub);}
.bm-body .appreach__info > span + span::before{content:"・";}
.bm-body .appreach__posted a{color:inherit;}
.bm-body .appreach__links{display:flex;flex-wrap:wrap;gap:8px;}
.bm-body .appreach__links:empty{display:none;}
.bm-body .appreach > figure{margin:0;}
.bm-body .appreach__aslink,.bm-body .appreach__gplink{display:inline-block;line-height:0;}
.bm-body .appreach__aslink img,.bm-body .appreach__gplink img{height:40px;width:auto;margin:0;}

/* =========================================================
   旧本文の部品の見た目（D-007。D-006 でmkが選んだ案）
   ========================================================= */
.bm-body .small{color:var(--bm-text-sub);}

/* SANGOの中央の飾り見出し：紺の太字＋下に短い線。記事で color:gray（淡い地で3.7）を指定したものは紺にする（ほかの色の指定はそのまま） */
.bm-body .sgb-heading__inner--center{padding:6px 0 12px;background:none;border:0;position:relative;}
.bm-body .sgb-heading__inner--center .sgb-heading__text{font-size:1.08em;}
.bm-body .sgb-heading__text[style*="color:gray"]{color:var(--bm-navy) !important;}
.bm-body .sgb-heading__inner--center::after{content:"";position:absolute;left:50%;bottom:0;width:36px;height:3px;margin-left:-18px;border-radius:2px;background:var(--bm-navy);}

/* 表：白地・角丸の外枠、縦の罫線なし、1行おきに淡い地（縞）。紺の見出し行は今のまま。見出し行の無い表は1列目を項目名に */
.bm-body .wp-block-table{margin:1.2em 0 1.5em;}
.bm-body .wp-block-table table{border-collapse:separate;border-spacing:0;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);overflow:hidden;line-height:1.6;}
.bm-body .wp-block-table th,
.bm-body .wp-block-table td{border:0;padding:10px 12px;vertical-align:middle;}
.bm-body .wp-block-table thead th{padding:10px 12px;font-size:var(--bm-fs-xs);letter-spacing:.02em;}
.bm-body .wp-block-table tbody tr:nth-child(even) > *{background-color:#F7F9FC;}
.bm-body .wp-block-table table:not(:has(thead)) tr > :first-child{background:var(--bm-bg);color:var(--bm-navy);font-weight:700;width:34%;}
.bm-body .wp-block-table table:not(:has(thead)) tbody tr:nth-child(even) > :first-child{background:#EEF3F9;}
.bm-body .wp-block-table figcaption{margin-top:6px;color:var(--bm-text-sub);font-size:var(--bm-fs-xs);text-align:left;}

/* SANGOのリスト：枠つき（list-simple）は淡い地の枠に。印の色をテーマにそろえる */
.bm-body .is-style-sango-list-simple{padding:14px 16px 6px;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);background:var(--bm-bg);}
.bm-body .is-style-sango-list-simple li::before{background:var(--bm-blue);}
.bm-body .is-style-sango-list-check li::before{border-color:var(--bm-green-text);}
.bm-body .is-style-sango-list-circle li::before{border-color:var(--bm-blue);}

/* 枠つきの画像 */
.bm-body figure.is-style-sango-with-border img{border:1px solid var(--bm-border);border-radius:var(--bm-radius-sm);}

/* メモ・ひらめきの段落：新しい構成の「補足の枠」と同じ系統 */
.bm-body .is-style-sango-paragraph-memo-alt{padding:13px 16px;border:1px solid var(--bm-border);border-left:4px solid var(--bm-blue);border-radius:var(--bm-radius-btn);background:var(--bm-bg);font-size:var(--bm-fs-md);line-height:1.8;}
.bm-body .is-style-sango-paragraph-idea-alt{padding:13px 16px;border:1px solid var(--bm-green-border);border-left:4px solid var(--bm-green);border-radius:var(--bm-radius-btn);background:var(--bm-green-bg);line-height:1.8;}

/* SANGOのボタン：白文字×緑（3.01）を「大きい文字」（19px太字）にして基準を満たす。テーマのボタン（D-002）と同じ。小さいボタンは濃い緑 */
.wp-block-sgb-btn a,.wp-block-sgb-btn a.btn,.wp-block-sgb-btn a.normal,.wp-block-sgb-btn a.big{font-size:19px;}
.wp-block-sgb-btn a.small{font-size:var(--bm-fs-sm);background:var(--bm-green-btn-sm);}

/* ---- AppReach のアプリアイコン・ストアの画像を出さない（D-013・絶対ルール6：ロゴはASP配布の素材だけ）----
   旧本文に残る AppReach（4か所）の、アプリのアイコン（App Store の画像）と、App Store／Google Play のバッジ画像を隠す。
   本文は変えない。リンクは残し、画像の代わりに文字のボタン（09-18 PM回答：バッジはテキストのボタン）で出す */
.bm-body .appreach__icon{display:none !important;}
.bm-body .appreach__detail{flex-basis:100%;}
.bm-body .appreach__aslink img,.bm-body .appreach__gplink img{display:none !important;}
.bm-body .appreach__aslink,.bm-body .appreach__gplink{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1.5px solid var(--bm-blue);border-radius:var(--bm-radius-btn);color:var(--bm-blue);background:#fff;font-size:var(--bm-fs-sm);font-weight:700;line-height:1.3;text-decoration:none;}
.bm-body .appreach__aslink::after{content:"App Storeで見る";}
.bm-body .appreach__gplink::after{content:"Google Playで見る";}
.bm-body .appreach > figure{display:inline-block;}