/*
Theme Name: ベストミル
Theme URI: https://bb-9.net/
Author: mk
Description: 動画・視聴サービス乗り換えナビ「ベストミル」のテーマ。3色ルール（紺=信頼／緑=成約／コーラル=寄り添い）を採用。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: bestmil
*/

/* =========================================================
   デザイントークン
   ========================================================= */
:root{
  --bm-navy:#123A63;
  --bm-blue:#2E78C7;
  --bm-green:#3DA776;
  --bm-green-bg:#E6F4EC;
  --bm-green-text:#276738;
  --bm-green-border:#C9E7D6;
  --bm-coral:#FF7A59;
  --bm-coral-bg:#FFF1EC;
  --bm-coral-border:#FFD9CC;
  --bm-coral-text:#C7502F;
  --bm-coral-btn:#F06744;      /* 19pxのボタンの地（白文字で3.12） */
  --bm-coral-btn-sm:#C7502F;   /* 小さいボタンの地（白文字で4.55） */
  --bm-green-btn-sm:#31855E;   /* 小さいボタンの地（白文字で4.52） */
  --bm-bg:#F5F8FC;
  --bm-card:#FFFFFF;
  --bm-border:#E8EEF5;
  --bm-text:#1E2A36;
  --bm-text-sub:#5F6E7D; /* 淡い地で4.91・白で5.23（AA）。旧 #7A8A9A は3.3で不足（D-002） */
  --bm-radius-card:14px;
  --bm-radius-btn:12px;
  --bm-radius-pill:999px;
  --bm-radius-sm:8px;
  --bm-shadow-green:0 4px 12px rgba(61,167,118,.25);
  --bm-shadow-coral:0 4px 12px rgba(240,103,68,.28);
  --bm-shadow-card:0 1px 3px rgba(18,58,99,.05);
  /* 文字サイズ（スマホ基準）。PCでは下の@mediaで一段上がる。
     px直書きをやめてここに集約したので、変えたいときはこの2箇所だけ直す */
  --bm-fs-micro:11px;
  --bm-fs-xs:12px;
  --bm-fs-sm:13px;
  --bm-fs-md:14px;
  --bm-fs-base:15px;
  --bm-fs-lg:16px;
  --bm-fs-xl:17px;
  --bm-fs-2xl:20px;
  --bm-fs-logo:22px;
  --bm-font:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif;
}

/* PCは視距離が遠く1カラムの横幅も広いため、一段大きくする */
@media (min-width:768px){
  :root{
    --bm-fs-micro:12px;
    --bm-fs-xs:13px;
    --bm-fs-sm:14px;
    --bm-fs-md:15px;
    --bm-fs-base:17px;
    --bm-fs-lg:18px;
    --bm-fs-xl:19px;
    --bm-fs-2xl:22px;
    --bm-fs-logo:25px;   /* サイトロゴも本文に合わせて一段大きく */
  }
}

/* =========================================================
   base
   ========================================================= */
*{box-sizing:border-box;}
body{margin:0;font-family:var(--bm-font);background:var(--bm-bg);color:var(--bm-text);line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:var(--bm-blue);text-decoration:none;}
img{max-width:100%;height:auto;}
:focus-visible{outline:2px solid var(--bm-blue);outline-offset:2px;border-radius:3px;}
/* 画面には出さず、スクリーンリーダーにだけ読ませるラベル（WP標準クラス） */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;margin:0;clip:auto;white-space:normal;}

/* =========================================================
   layout
   ========================================================= */
.bm-container{max-width:888px;margin:0 auto;padding:0 16px;}
/* セクションの間隔。18pxだと区切りが弱く、どこまでが一続きか読み取りにくい */
.bm-section{margin:26px 0;}
/* 記事本文と「記事のあと」（解約後の選択肢・乗り換え先・関連記事）の境目は
   ページの性格が変わるところなので、はっきり空ける */
.bm-body{margin-bottom:48px;}
/* 関連記事は「記事の続き」ではなく「別の行き先」。
   直前が全幅の緑CTAで面が重いため、26pxでは近すぎて一続きに見える。 */
.bm-section--tail{margin-top:48px;}
.bm-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.bm-filter{display:flex;flex-wrap:wrap;gap:8px;}
.bm-chip{font-size:var(--bm-fs-sm);font-weight:700;padding:6px 14px;border-radius:var(--bm-radius-pill);border:1px solid var(--bm-border);color:var(--bm-text-sub);background:#fff;text-decoration:none;}
.bm-chip.is-active{background:var(--bm-navy);color:#fff;border-color:var(--bm-navy);}

/* =========================================================
   typography
   ========================================================= */
.bm-h1{font-size:clamp(24px,5.6vw,30px);font-weight:800;color:var(--bm-navy);line-height:1.4;margin:0 0 .4em;}
/* 広告表記（h1の直下）。目立たせすぎず、読めば分かる大きさ */
.bm-ad-notice{margin:6px 0 0;font-size:var(--bm-fs-xs);color:var(--bm-text-sub);line-height:1.5;}
.bm-h1 + .bm-ad-notice{margin-top:-.2em;}
.dx-wrap > .bm-ad-notice{margin:16px 0 8px;}
.bm-h2{font-size:clamp(19px,4.4vw,22px);font-weight:800;color:var(--bm-navy);line-height:1.45;margin:0 0 .5em;}
.bm-h3{font-size:var(--bm-fs-lg);font-weight:700;color:var(--bm-navy);margin:0 0 .6em;}
.bm-body{font-size:var(--bm-fs-base);color:var(--bm-text);}
.bm-body p{margin:0 0 1em;}

/* 記事本文の見出し（D-017。D-016 で mk が選んだ：h2＝3色のドットの線、h3＝黄色い丸、h4＝空色の丸）。
   トップ・一覧などの .bm-h2 は変えない。囲み要素（.sgb-box-simple など）の中の見出しは外側の装飾を引き継がない（下の規則）。
   色はオリジナルアイコンの紺・空色・黄。文字の大きさ（h2 1.42em／h3 1.15em）は変えていない。 */
.bm-body h2{
  position:relative;
  font-size:1.42em;font-weight:800;color:var(--bm-navy);line-height:1.45;
  margin:2.2em 0 .9em;padding-bottom:1em;
  text-wrap:balance;
}
.bm-body h2::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:12px;
  background:
    radial-gradient(circle at 6px 6px,var(--bm-navy) 0 5.4px,transparent 6px) 0 0/12px 12px no-repeat,
    radial-gradient(circle at 6px 6px,#68B8F0 0 5.4px,transparent 6px) 22px 0/12px 12px no-repeat,
    radial-gradient(circle at 6px 6px,#F8C830 0 5.4px,transparent 6px) 44px 0/12px 12px no-repeat,
    repeating-linear-gradient(90deg,#CFE0F3 0 3px,transparent 3px 10px) 74px 5px/calc(100% - 74px) 2px no-repeat;
}
.bm-body h3{
  position:relative;
  font-size:1.15em;font-weight:800;color:var(--bm-navy);line-height:1.5;
  margin:1.9em 0 .7em;padding-left:1.25em;
}
.bm-body h3::before{
  content:"";position:absolute;left:0;top:.4em;width:.78em;height:.78em;border-radius:50%;
  background:#F8C830;box-shadow:0 0 0 2.5px var(--bm-navy);
}
.bm-body h4{font-size:1.02em;font-weight:800;color:var(--bm-text);margin:1.6em 0 .6em;}
/* 記事の先頭が見出しでも上が空きすぎないように */
.bm-body > h2:first-child,.bm-body > h3:first-child{margin-top:0;}

/* 構造化した記事本文の部品（最初はマイシアタープラス記事で作った。土台整理 工程7で記事名から部品名へ）：比較案で確認した文字・余白と冒頭のまとまりを記事全体へ適用。 */
.bm-body .bm-article-doc{line-height:1.82;}
.bm-body .bm-article-doc > h2{margin-top:2.35em;margin-bottom:1em;}
.bm-body .bm-intro-lead{margin-bottom:14px;font-size:18px;line-height:1.85;}
.bm-body .bm-intro-label{margin:20px 0 9px;color:var(--bm-navy);font-weight:800;}
.bm-body .bm-summary-list{margin:0 0 20px;padding:17px 20px 17px 42px;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);background:#fff;}
.bm-body .bm-summary-list li + li{margin-top:8px;}
.bm-body .bm-official-target{margin-top:19px;padding:13px 16px;border:1px solid var(--bm-green-border);border-radius:var(--bm-radius-btn);color:var(--bm-green);background:var(--bm-green-bg);font-weight:700;text-align:center;}
.bm-body .bm-check-list{padding-left:1.5em;}
.bm-body .bm-check-list li + li{margin-top:.35em;}
.bm-body .bm-warning-note{display:block;margin:14px 0 0;padding:14px 16px;border:1px solid var(--bm-coral-border);border-left:4px solid var(--bm-coral);border-radius:var(--bm-radius-btn);background:var(--bm-coral-bg);line-height:1.65;}
.bm-body .bm-faq-list{display:grid;gap:8px;margin:0 0 1.5em;}
.bm-body .bm-faq-list__item{border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);background:#fff;overflow:hidden;}
.bm-body .bm-faq-list__item > summary{display:flex;align-items:center;gap:11px;position:relative;min-height:60px;padding:12px 46px 12px 14px;list-style:none;cursor:pointer;}
.bm-body .bm-faq-list__item > summary::-webkit-details-marker{display:none;}
.bm-body .bm-faq-list__item > summary::after{content:"＋";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--bm-blue);font-size:20px;font-weight:500;}
.bm-body .bm-faq-list__item[open] > summary::after{content:"−";}
.bm-body .bm-faq-list__item > summary > span{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--bm-navy);color:#fff;font-size:var(--bm-fs-sm);font-weight:800;}
.bm-body .bm-faq-list__item h3{margin:0;padding:0;border:0;color:var(--bm-navy);font-size:var(--bm-fs-md);line-height:1.55;}
.bm-body .bm-faq-list__item > div{padding:14px 18px 15px 55px;border-top:1px solid var(--bm-border);background:var(--bm-bg);}
.bm-body .bm-faq-list__item p{margin:0;line-height:1.75;}
.bm-body .bm-completion-check{margin:0 0 1.5em;padding:18px 20px;border:1px solid var(--bm-green-border);border-left:4px solid var(--bm-green);border-radius:var(--bm-radius-card);background:var(--bm-green-bg);}
.bm-body .bm-completion-check > strong{display:block;margin-bottom:10px;color:var(--bm-navy);font-size:var(--bm-fs-md);}
.bm-body .bm-completion-check ul{margin:0;padding:0;list-style:none;}
.bm-body .bm-completion-check li{position:relative;padding:8px 0 8px 30px;border-top:1px solid var(--bm-green-border);line-height:1.65;}
.bm-body .bm-completion-check li::before{content:"✓";position:absolute;left:2px;top:9px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bm-green);color:#fff;font-size:12px;font-weight:800;}
.bm-body .bm-completion-check p{margin:10px 0 0;color:var(--bm-text-sub);font-size:var(--bm-fs-sm);}
.bm-body .bm-trouble-check{margin:0 0 1.5em;border-top:1px solid var(--bm-border);}
.bm-body .bm-trouble-check section{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,1.5fr);gap:22px;padding:18px 4px;border-bottom:1px solid var(--bm-border);}
.bm-body .bm-trouble-check h3{margin:0;padding:0 0 0 12px;border:0;border-left:3px solid var(--bm-blue);font-size:var(--bm-fs-md);line-height:1.55;}
.bm-body .bm-trouble-check p{margin:0;line-height:1.75;}
.postid-30968 .bm-h1,.postid-23852 .bm-h1{line-height:1.36;letter-spacing:.005em;margin-bottom:11px;}
.postid-30968 .bm-author,.postid-23852 .bm-author{padding-bottom:8px;}
@media(max-width:767px){
  .bm-body .bm-article-doc{line-height:1.84;}
  .bm-body .bm-intro-lead{font-size:16px;}
  .bm-body .bm-summary-list{padding:15px 14px 15px 34px;}
  .postid-30968 .bm-h1,.postid-23852 .bm-h1{font-size:25px;line-height:1.38;}
  .bm-body .bm-faq-list__item > div{padding:13px 14px;}
  .bm-body .bm-completion-check{padding:16px 14px;}
  .bm-body .bm-trouble-check section{grid-template-columns:1fr;gap:8px;padding:16px 2px;}
}

/* 解約手順：要約は常時表示し、実画面付き詳細だけをネイティブdetailsで開閉する。
   本文と画像は初期HTMLに置くため、操作しないクローラーや支援技術にも内容が残る。 */
.bm-body .bm-cancel-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px;padding:0;list-style:none;counter-reset:cancel-overview;}
.bm-body .bm-cancel-overview li{counter-increment:cancel-overview;position:relative;min-width:0;margin:0;padding:13px 12px 13px 42px;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);background:#fff;}
.bm-body .bm-cancel-overview li::before{content:counter(cancel-overview);position:absolute;left:12px;top:13px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bm-navy);color:#fff;font-size:var(--bm-fs-xs);font-weight:800;}
.bm-body .bm-cancel-overview strong{display:block;color:var(--bm-navy);font-size:var(--bm-fs-sm);line-height:1.45;}
.bm-body .bm-cancel-overview span{display:block;margin-top:4px;color:var(--bm-text-sub);font-size:var(--bm-fs-xs);line-height:1.5;}
.bm-body .bm-cancel-flow{display:grid;gap:8px;margin:0 0 14px;}
.bm-body .bm-cancel-phase{border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);background:#fff;overflow:hidden;}
.bm-body .bm-cancel-phase > summary{display:flex;align-items:center;gap:11px;min-height:64px;padding:11px 46px 11px 14px;position:relative;list-style:none;cursor:pointer;color:var(--bm-navy);}
.bm-body .bm-cancel-phase > summary::-webkit-details-marker{display:none;}
.bm-body .bm-cancel-phase > summary::after{content:"＋";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--bm-blue);font-size:20px;font-weight:500;}
.bm-body .bm-cancel-phase[open] > summary::after{content:"−";}
.bm-body .bm-cancel-phase__number{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--bm-navy);color:#fff;font-size:var(--bm-fs-sm);font-weight:800;}
.bm-body .bm-cancel-phase summary strong{display:block;font-size:var(--bm-fs-md);line-height:1.45;}
.bm-body .bm-cancel-phase summary small{display:block;margin-top:3px;color:var(--bm-text-sub);font-size:var(--bm-fs-xs);line-height:1.45;}
.bm-body .bm-cancel-phase__body{padding:4px 14px 16px;border-top:1px solid var(--bm-border);}
.bm-body .bm-cancel-steps{margin:0;padding:0;list-style:none;counter-reset:cancel-step calc(var(--bm-step-start,1) - 1);}
.bm-body .bm-cancel-steps[start="3"]{--bm-step-start:3;}
.bm-body .bm-cancel-steps[start="4"]{--bm-step-start:4;}
.bm-body .bm-cancel-steps[start="5"]{--bm-step-start:5;}
.bm-body .bm-cancel-steps[start="6"]{--bm-step-start:6;}
.bm-body .bm-cancel-steps li{counter-increment:cancel-step;position:relative;margin:0;padding:16px 0 18px 38px;border-bottom:1px solid var(--bm-border);}
.bm-body .bm-cancel-steps li:last-child{padding-bottom:2px;border-bottom:0;}
.bm-body .bm-cancel-steps li::before{content:counter(cancel-step);position:absolute;left:0;top:15px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--bm-bg);border:1px solid var(--bm-border);color:var(--bm-navy);font-size:var(--bm-fs-xs);font-weight:800;}
.bm-body .bm-cancel-steps li > strong{display:block;color:var(--bm-text);font-size:var(--bm-fs-md);line-height:1.65;}
.bm-body .bm-cancel-steps img{display:block;width:auto;max-width:min(100%,340px);height:auto;margin:14px auto 0;border:1px solid var(--bm-border);border-radius:var(--bm-radius-sm);background:#fff;}
.bm-body .bm-cancel-steps img + img{margin-top:9px;}
.bm-body .bm-cancel-note{margin:14px 0 0;padding:14px 16px;border-radius:var(--bm-radius-btn);}
.bm-body .bm-cancel-note strong{display:block;color:var(--bm-navy);font-size:var(--bm-fs-md);}
.bm-body .bm-cancel-note p{margin:4px 0 0;font-size:var(--bm-fs-sm);line-height:1.65;}
.bm-body .bm-cancel-note--warning{border:1px solid var(--bm-coral-border);border-left:4px solid var(--bm-coral);background:var(--bm-coral-bg);}
.bm-body .bm-cancel-note--complete{border:1px solid var(--bm-green-border);border-left:4px solid var(--bm-green);background:var(--bm-green-bg);}
@media(max-width:767px){
  .bm-body .bm-cancel-overview{grid-template-columns:1fr;gap:6px;}
  .bm-body .bm-cancel-overview li{padding:11px 11px 11px 40px;}
  .bm-body .bm-cancel-overview li::before{top:11px;}
  .bm-body .bm-cancel-phase > summary{min-height:60px;padding-left:12px;}
  .bm-body .bm-cancel-phase__body{padding:2px 12px 14px;}
  .bm-body .bm-cancel-steps li{padding-left:34px;}
  .bm-body .bm-cancel-steps img{max-width:min(100%,280px);}
}
/* 囲み要素の中の見出しは、外側の装飾を引き継がない */
.bm-body .sgb-box-simple h2,.bm-body .sgb-box-simple h3,
.bm-body .sgb-tl-item h3{
  border-left:none;padding-left:0;margin:0 0 .5em;
}
/* FAQの質問はQ/Aラベルを絶対配置で載せており、左の余白がラベルの居場所になっている。
   ここで padding をリセットするとQが本文に重なるので、線だけ消して余白は触らない。 */
.bm-body .sgb-faq h3{border-left:none;}
.bm-body .sgb-box-simple h2::after,.bm-body .sgb-faq h3::after,
.bm-body :is(.sgb-box-simple,.sgb-tl-item,.sgb-faq,.bm-faq-list__item,.bm-trouble-check) :is(h2,h3)::before{display:none;}
.bm-body :is(.sgb-box-simple,.sgb-tl-item,.sgb-faq,.bm-faq-list__item,.bm-trouble-check) h2{padding-bottom:0;}
.bm-caption{font-size:var(--bm-fs-sm);color:var(--bm-text-sub);}
.bm-lead{font-size:var(--bm-fs-base);color:var(--bm-text-sub);line-height:1.7;}

/* =========================================================
   logo
   ========================================================= */
.bm-logo{font-size:var(--bm-fs-logo);font-weight:800;color:var(--bm-navy);letter-spacing:.01em;line-height:1;display:inline-block;text-decoration:none;}
.bm-logo .dot{color:var(--bm-coral);}
.bm-logo--onDark{color:#fff;}

/* =========================================================
   button
   ========================================================= */
.bm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:var(--bm-fs-base);font-weight:800;padding:13px 18px;border:none;border-radius:var(--bm-radius-btn);cursor:pointer;text-align:center;line-height:1.2;text-decoration:none;transition:transform .12s ease,filter .12s ease;}
.bm-btn:hover{filter:brightness(1.04);}
.bm-btn:active{transform:translateY(1px);}
.bm-btn--block{width:100%;}
.bm-btn--cv{background:var(--bm-green);color:#fff;box-shadow:var(--bm-shadow-green);}
.bm-btn--diagnose{background:var(--bm-coral-btn);color:#fff;box-shadow:var(--bm-shadow-coral);}
.bm-btn--outline{background:#fff;color:var(--bm-blue);border:1.5px solid var(--bm-blue);}
.bm-btn--sm{font-size:var(--bm-fs-sm);padding:11px 8px;} /* カード内に2つ並べる用。長いCTA文言でも折り返さない */
.bm-btn--coral-pill{background:var(--bm-coral-btn);color:#fff;border-radius:var(--bm-radius-pill);padding:9px 18px;}
/* 白文字のボタンのコントラスト（D-002）。
   太字18.66px以上は「大きい文字」で基準が3.0になるので、色はほぼ今のまま文字を19pxにする
   （緑 #3DA776＝3.01、コーラル #F06744＝3.12）。
   大きくできない小さいボタン（カード内の2つ並び）は、普通の文字の基準4.5を満たす濃い色にする */
.bm-btn--cv,.bm-btn--diagnose,.bm-btn--coral-pill{font-size:19px;}
.bm-btn--cv.bm-btn--sm{font-size:var(--bm-fs-sm);background:var(--bm-green-btn-sm);}
.bm-btn--diagnose.bm-btn--sm,.bm-btn--coral-pill.bm-btn--sm{font-size:var(--bm-fs-sm);background:var(--bm-coral-btn-sm);}

/* =========================================================
   card
   ========================================================= */
.bm-card{background:var(--bm-card);border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);padding:14px;box-shadow:var(--bm-shadow-card);}
.bm-card--featured{border:2px solid var(--bm-green);box-shadow:none;}
.bm-card--navy{background:var(--bm-navy);color:#fff;border:none;}
.bm-card--navy .bm-h3{color:#fff;}

/* =========================================================
   badge
   ========================================================= */
.bm-badge{display:inline-block;font-size:var(--bm-fs-micro);font-weight:700;padding:3px 9px;border-radius:var(--bm-radius-pill);}
.bm-badge--score{background:var(--bm-green-bg);color:var(--bm-green-text);}
.bm-badge--info{background:#EAF0F7;color:var(--bm-blue);}

/* =========================================================
   author（E-E-A-T）
   ========================================================= */
.bm-author{display:flex;align-items:center;gap:10px;}
.bm-author__avatar{width:34px;height:34px;border-radius:50%;background:#EAF0F7;flex-shrink:0;}
.bm-author__name{font-size:var(--bm-fs-sm);font-weight:700;color:var(--bm-text);}
.bm-author__verified{font-size:var(--bm-fs-micro);color:var(--bm-green);margin-top:2px;}

/* サービス親「目的から読む」のカード。記事がまだ無い項目は薄くせず「準備中」（D-002） */
.bm-purpose-card{display:block;text-align:center;text-decoration:none;}
.bm-purpose-card .ti{font-size:var(--bm-fs-2xl);color:var(--bm-blue);}
.bm-purpose-card__label{font-size:var(--bm-fs-sm);font-weight:700;color:var(--bm-text);margin-top:4px;}
.bm-card--pending{background:var(--bm-bg);border:1px dashed #C8D3DF;box-shadow:none;}
.bm-card--pending .ti,.bm-card--pending .bm-purpose-card__label{color:var(--bm-text-sub);}
.bm-purpose-card__status{display:inline-block;margin-top:6px;padding:1px 8px;border-radius:var(--bm-radius-pill);background:#fff;border:1px solid var(--bm-border);color:var(--bm-text-sub);font-size:var(--bm-fs-micro);font-weight:700;line-height:1.6;}

/* =========================================================
   spec / table
   ========================================================= */
.bm-spec{background:#fff;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);overflow:hidden;}
.bm-spec__head{background:var(--bm-navy);color:#fff;font-size:var(--bm-fs-sm);font-weight:700;padding:8px 12px;}
.bm-spec__row{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;font-size:var(--bm-fs-md);border-bottom:1px solid #F0F4F8;}
.bm-spec__row:last-child{border-bottom:none;}
/* 項目名は折り返さない。値が長いときは値の側だけを折り返す（スマホで「対応デバイ／ス」と割れるのを防ぐ） */
.bm-spec__row span:first-child{color:var(--bm-text-sub);white-space:nowrap;flex-shrink:0;}
/* 長い値は2行を均等に割り、語の途中で改行しない（「…無料）」の「料）」だけが落ちるのを防ぐ。auto-phrase は Chrome 系のみ） */
.bm-spec__row span:last-child{min-width:0;text-align:right;text-wrap:balance;word-break:auto-phrase;}

.bm-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-table thead th{background:var(--bm-navy);color:#fff;font-weight:700;padding:10px 6px;text-align:center;}
.bm-table thead th:first-child{text-align:left;padding-left:10px;}
.bm-table td{padding:10px 6px;text-align:center;border-bottom:1px solid #F0F4F8;color:var(--bm-text);}
.bm-table td:first-child{text-align:left;font-weight:600;padding-left:10px;}
/* 数値・短い値の列は折り返させない。折り返してよいのはサービス名だけ */
.bm-table td:not(:first-child),.bm-table th:not(:first-child){white-space:nowrap;}
.bm-table tbody tr:last-child td{border-bottom:none;}
.bm-table tr.is-top td{background:#F0FAF4;}

/* =========================================================
   hint（寄り添い）
   ========================================================= */
.bm-hint{background:var(--bm-coral-bg);border:1px solid var(--bm-coral-border);border-radius:var(--bm-radius-card);padding:14px;}
.bm-hint__title{font-size:var(--bm-fs-md);font-weight:700;color:var(--bm-coral-text);margin:0 0 6px;}
.bm-hint__text{font-size:var(--bm-fs-sm);color:#A56A57;margin:0;line-height:1.6;}

/* =========================================================
   site header / footer
   ========================================================= */
/* ヘッダーは追従させる。記事が長いので、読んでいる途中でも
   検索・診断・一覧へ移れるようにする。 */
/* パンくずの区切り。文字ではなくアイコンなので、大きさと位置を揃えられる */
.bm-crumb-sep{font-size:.85em;color:var(--bm-text-sub);vertical-align:-.08em;margin:0 1px;}

.bm-site-header{background:#fff;border-bottom:1px solid var(--bm-border);
  position:sticky;top:0;z-index:50;}
/* 管理バーが出ているときは、その下に貼り付ける */
.admin-bar .bm-site-header{top:32px;}
@media (max-width:782px){.admin-bar .bm-site-header{top:46px;}}

.bm-site-header__inner{max-width:888px;margin:0 auto;padding:14px 16px;
  display:flex;align-items:center;gap:12px;position:relative;}
.bm-site-header__nav{display:none;margin-left:auto;}
.bm-site-header__nav a{font-size:var(--bm-fs-md);color:var(--bm-navy);margin-left:16px;white-space:nowrap;}
.bm-site-header__tools{display:flex;align-items:center;gap:8px;margin-left:auto;}
@media (min-width:768px){
  .bm-site-header__nav{display:block;}
  .bm-site-header__tools{margin-left:16px;}
}

/* 検索：details/summary で開閉する（JavaScript不要）
   パネルの基準はヘッダー内側なので、ここでは position を指定しない。
   指定すると38pxのアイコンが基準になり、パネルが極端に細くなる。 */
.bm-hsearch{}
.bm-hsearch > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--bm-radius-btn);
  color:var(--bm-navy);font-size:20px;
}
.bm-hsearch > summary::-webkit-details-marker{display:none;}
.bm-hsearch > summary:hover{background:var(--bm-bg);}
.bm-hsearch[open] > summary{background:var(--bm-bg);}
/* パネルの基準はヘッダーの内側。検索アイコン(38px)を基準にすると
   画面の外へはみ出すため、ヘッダー幅いっぱいに置く */
.bm-hsearch__panel{
  position:absolute;left:16px;right:16px;top:calc(100% + 10px);z-index:60;
  background:#fff;border:1px solid var(--bm-border);
  border-radius:var(--bm-radius-card);box-shadow:0 8px 24px rgba(18,58,99,.12);padding:10px;
}
@media (min-width:768px){
  .bm-hsearch__panel{left:auto;width:360px;}
}
.bm-hsearch__panel form{display:flex;gap:8px;}
.bm-hsearch__panel input[type="search"]{
  flex:1;min-width:0;font-family:inherit;font-size:var(--bm-fs-sm);padding:10px 12px;
  border:1px solid var(--bm-border);border-radius:var(--bm-radius-btn);background:#fff;color:var(--bm-text);
}
.bm-hsearch__panel .bm-btn{padding:10px 14px;font-size:var(--bm-fs-sm);flex-shrink:0;}

/* ヘッダーの診断ボタン。看板機能なのに導線が無かった */
.bm-hcta{padding:9px 14px;font-size:var(--bm-fs-sm);gap:5px;box-shadow:none;background:var(--bm-coral-btn);} /* 大きい診断ボタンと同じ色（14pxなのでAAをわずかに下回る。mk了承済み・D-003） */
.bm-hcta .ti{font-size:16px;}

/* 読み物の幅
   コンテナは888pxだが、本文をそのまま流すとPCで1行50文字になり、
   日本語の適正（35〜45文字）を超えて目が横に走る。
   本文ブロックごと740pxに抑え、表・画像も含めて左右の端を揃える。
   記事（投稿）とサービス親は、パンくず・タイトル・著者欄・本文後の欄も同じ740pxの列にそろえ、左端を1本にする（D-002・D-003）。 */
@media (min-width:768px){
  .bm-body{max-width:740px;margin-left:auto;margin-right:auto;}
  body.single-post main.bm-container > .bm-section,
  body.single-service main.bm-container > .bm-section{max-width:740px;margin-left:auto;margin-right:auto;}
  body.single-post .bm-h1,body.single-service .bm-h1{word-break:auto-phrase;} /* 幅が狭まるので、語の途中で改行しない */
}

/* 追従ヘッダーの下に見出しが潜り込まないようにする（目次リンクの着地点）
   ヘッダーの高さ（約67px）＋余白。ヘッダーの padding を変えたら合わせて見直すこと。 */
.bm-body h2,.bm-body h3,[id^="toc-"]{scroll-margin-top:84px;}

.bm-site-footer__nav{margin-top:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px;}
.bm-site-footer__nav a{font-weight:700;color:#fff;margin:0;}
/* 本文が終わってすぐ紺のフッターが始まると窮屈に見えるため、
   上の余白と内側の余白を広げて、読み終わりの区切りを作る。 */
.bm-site-footer{background:var(--bm-navy);color:#9FB4CC;margin-top:56px;}
.bm-site-footer__inner{max-width:888px;margin:0 auto;padding:34px 16px 30px;text-align:center;font-size:var(--bm-fs-sm);}
@media (min-width:768px){
  .bm-site-footer{margin-top:72px;}
  .bm-site-footer__inner{padding:40px 16px 34px;}
}
/* 文字の大きさは変えず、上下に余白を足してタップしやすくする
   （22px高だとスマホで隣のリンクを押しやすい） */
.bm-site-footer__inner a{color:#B7C9DD;margin:0 2px;display:inline-block;padding:9px 6px;}

/* =========================================================
   hero（front page）
   ========================================================= */
.bm-hero{background:linear-gradient(160deg,#E9F1FB 0%,var(--bm-bg) 70%);padding:26px 16px 24px;text-align:center;border-radius:var(--bm-radius-card);}
.bm-hero__title{font-size:clamp(19px,5vw,24px);font-weight:800;color:var(--bm-navy);line-height:1.45;margin:0 0 8px;}
.bm-hero__lead{font-size:var(--bm-fs-md);color:var(--bm-text-sub);line-height:1.7;margin:0 0 16px;}

/* =========================================================
   icon helper
   ========================================================= */
.bm-ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:currentColor;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ===== 目次 ===== */
.bm-toc {
  background: var(--bm-bg);
  border: 1px solid var(--bm-border);
  border-left: 3px solid var(--bm-blue);
  border-radius: var(--bm-radius-sm);
  padding: 14px 16px 16px;
  margin: 0 0 24px;
}
.bm-toc__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--bm-navy);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.bm-toc__list {
  margin: 0;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bm-toc__list li {
  font-size: 12px;
  line-height: 1.5;
}
.bm-toc__list a {
  color: var(--bm-blue);
  text-decoration: none;
}
.bm-toc__list a:hover {
  text-decoration: underline;
}
.bm-toc--compact .bm-toc__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px;}
.bm-toc__toggle,.bm-toc__more-label{display:none;}
/* PCは「最初の5件」と「残り」の2つのリストを1つの流れにし、左の列→右の列の順に読ませる。
   リストごとに2列にすると、5件目が1行を占めて右が空き、6件目以降と重なって見えていた（D-002）。
   番号は2つのリストをまたいで続くよう、自前のカウンターで描く */
@media(min-width:768px){
  .bm-toc--compact{columns:2;column-gap:28px;counter-reset:bmtoc;}
  .bm-toc--compact .bm-toc__title{column-span:all;}
  .bm-toc--compact .bm-toc__list{display:contents;}
  .bm-toc--compact .bm-toc__list li{display:block;position:relative;padding-left:1.7em;margin:0 0 6px;break-inside:avoid;counter-increment:bmtoc;}
  .bm-toc--compact .bm-toc__list li::before{content:counter(bmtoc) ".";position:absolute;left:0;top:0;min-width:1.3em;text-align:right;color:var(--bm-text);}
}
@media(max-width:767px){
  .bm-toc--compact .bm-toc__list{grid-template-columns:1fr;}
  .bm-toc--compact .bm-toc__list--more{display:none;margin-top:6px;}
  .bm-toc--compact .bm-toc__toggle:checked + .bm-toc__list--more{display:grid;}
  .bm-toc--compact .bm-toc__more-label{display:block;width:max-content;margin:12px 0 0 auto;color:var(--bm-blue);font-size:12px;font-weight:700;cursor:pointer;}
  .bm-toc--compact .bm-toc__more-close{display:none;}
  .bm-toc--compact .bm-toc__toggle:checked ~ .bm-toc__more-label .bm-toc__more-open{display:none;}
  .bm-toc--compact .bm-toc__toggle:checked ~ .bm-toc__more-label .bm-toc__more-close{display:inline;}
}


/* =========================================================
   アイコン
   Tabler IconsのCDN(webfont)をやめ、使っている12種だけをCSSマスクで持つ。
   外部ドメインへのリクエストが1本減り、レンダリングブロックも解消する。
   クラス名は従来どおり .ti .ti-xxx なのでテンプレート側の変更は不要。
   ========================================================= */
.ti{display:inline-block;width:1em;height:1em;vertical-align:-.125em;
    -webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;flex-shrink:0;}
/* .ti 自体には background-color を置かない（既定の transparent のまま）。
   ここでまとめて色を指定すると、マスクを用意していないアイコンが
   塗りつぶしの四角として出てしまう。色はマスクのある .ti-xxx にだけ持たせる。 */
.ti-player-play{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204v16l13%20-8z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204v16l13%20-8z%22%2F%3E%3C%2Fsvg%3E");}
.ti-player-play-filled{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204v16l13%20-8z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204v16l13%20-8z%22%2F%3E%3C%2Fsvg%3E");}
.ti-wand{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.8%204.2l4.2%201.8l-4.2%201.8l-1.8%204.2l-1.8%20-4.2l-4.2%20-1.8l4.2%20-1.8z%20M5%2019l4%20-4%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.8%204.2l4.2%201.8l-4.2%201.8l-1.8%204.2l-1.8%20-4.2l-4.2%20-1.8l4.2%20-1.8z%20M5%2019l4%20-4%22%2F%3E%3C%2Fsvg%3E");}
.ti-bulb{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%201%203%2011v2h-6v-2a6%206%200%200%201%203%20-11z%20M9.5%2019h5%20M10.5%2021.5h3%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%201%203%2011v2h-6v-2a6%206%200%200%201%203%20-11z%20M9.5%2019h5%20M10.5%2021.5h3%22%2F%3E%3C%2Fsvg%3E");}
.ti-arrow-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012h15%20M13%206l6%206l-6%206%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012h15%20M13%206l6%206l-6%206%22%2F%3E%3C%2Fsvg%3E");}
.ti-arrow-right-circle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18z%20M8%2012h8%20M13%209l3%203l-3%203%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18z%20M8%2012h8%20M13%209l3%203l-3%203%22%2F%3E%3C%2Fsvg%3E");}
.ti-circle-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18z%20M8.5%2012.5l2.5%202.5l4.5%20-5%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18z%20M8.5%2012.5l2.5%202.5l4.5%20-5%22%2F%3E%3C%2Fsvg%3E");}
.ti-chevron-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206l-6%206%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206l-6%206%22%2F%3E%3C%2Fsvg%3E");}
.ti-scale{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v16%20M7%2020h10%20M5%208h14%20M5%208l-3%206h6z%20M19%208l3%206h-6z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v16%20M7%2020h10%20M5%208h14%20M5%208l-3%206h6z%20M19%208l3%206h-6z%22%2F%3E%3C%2Fsvg%3E");}
.ti-refresh{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%201%200%20-2.3%206.3%20M20%204v7h-7%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%201%200%20-2.3%206.3%20M20%204v7h-7%22%2F%3E%3C%2Fsvg%3E");}
.ti-list{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206h11%20M9%2012h11%20M9%2018h11%20M4.5%206h.01%20M4.5%2012h.01%20M4.5%2018h.01%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206h11%20M9%2012h11%20M9%2018h11%20M4.5%206h.01%20M4.5%2012h.01%20M4.5%2018h.01%22%2F%3E%3C%2Fsvg%3E");}
.ti-list-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206h9%20M11%2012h9%20M11%2018h9%20M4%206l1.4%201.4l2.6%20-2.6%20M4%2012l1.4%201.4l2.6%20-2.6%20M4%2018l1.4%201.4l2.6%20-2.6%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206h9%20M11%2012h9%20M11%2018h9%20M4%206l1.4%201.4l2.6%20-2.6%20M4%2012l1.4%201.4l2.6%20-2.6%20M4%2018l1.4%201.4l2.6%20-2.6%22%2F%3E%3C%2Fsvg%3E");}
.ti-user-plus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2011a4%204%200%201%200%200%20-8a4%204%200%200%200%200%208z%20M4%2021v-2a4%204%200%200%201%204%20-4h4%20M16%2019h6%20M19%2016v6%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2011a4%204%200%201%200%200%20-8a4%204%200%200%200%200%208z%20M4%2021v-2a4%204%200%200%201%204%20-4h4%20M16%2019h6%20M19%2016v6%22%2F%3E%3C%2Fsvg%3E");}
.ti-star{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.5l2.6%205.3l5.9%20.9l-4.3%204.1l1%205.8l-5.2%20-2.7l-5.2%202.7l1%20-5.8l-4.3%20-4.1l5.9%20-.9z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.5l2.6%205.3l5.9%20.9l-4.3%204.1l1%205.8l-5.2%20-2.7l-5.2%202.7l1%20-5.8l-4.3%20-4.1l5.9%20-.9z%22%2F%3E%3C%2Fsvg%3E");}
.ti-logout{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%208V6a2%202%200%200%200%20-2%20-2H6a2%202%200%200%200%20-2%202v12a2%202%200%200%200%202%202h6a2%202%200%200%200%202%20-2v-2%20M9%2012h12%20M18%209l3%203l-3%203%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%208V6a2%202%200%200%200%20-2%20-2H6a2%202%200%200%200%20-2%202v12a2%202%200%200%200%202%202h6a2%202%200%200%200%202%20-2v-2%20M9%2012h12%20M18%209l3%203l-3%203%22%2F%3E%3C%2Fsvg%3E");}
.ti-circle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18z%22%2F%3E%3C%2Fsvg%3E");}
.ti-circle-check-filled{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18z%20M8.5%2012.5l2.5%202.5l4.5%20-5%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18z%20M8.5%2012.5l2.5%202.5l4.5%20-5%22%2F%3E%3C%2Fsvg%3E");}

.ti-search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204a6%206%200%201%200%200%2012a6%206%200%200%200%200%20-12z%20M20%2020l-5.2%20-5.2%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204a6%206%200%201%200%200%2012a6%206%200%200%200%200%20-12z%20M20%2020l-5.2%20-5.2%22%2F%3E%3C%2Fsvg%3E");}
.ti-menu-2{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%20M4%2012h16%20M4%2018h16%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%20M4%2012h16%20M4%2018h16%22%2F%3E%3C%2Fsvg%3E");}

/* マスクを用意したアイコンだけ色を持つ */
.ti-arrow-right,.ti-arrow-right-circle,.ti-bulb,.ti-chevron-right,.ti-circle,.ti-circle-check,.ti-circle-check-filled,.ti-list,.ti-list-check,.ti-logout,.ti-menu-2,.ti-player-play,.ti-player-play-filled,.ti-refresh,.ti-scale,.ti-search,.ti-star,.ti-user-plus,.ti-wand{background-color:currentColor;}

/* =========================================================
   新しい構成（型A＝Primeチャンネル・型D＝スカパー）の部品（D-005。D-004 でmkが選んだ案）
   class はプラグインの描画（channel-editor/layout.php・sky-editor/layout-d.php）が出す（T-027）
   ========================================================= */

/* ===== 共通：状況別の入口（型A・型D） =====
   箇条書き → 押しやすい2列（PCは3列）のボタン。色は情報の紺・青のまま */
.bm-body .bm-a-intro,
.bm-body .bm-d-intro,
.bm-body .bm-m-intro{margin:0 0 30px;}
.bm-body .bm-a-intro__target,
.bm-body .bm-m-intro__target{margin:0 0 14px;padding:14px 16px;border-radius:var(--bm-radius-card);background:#fff;border:1px solid var(--bm-border);border-left:4px solid var(--bm-navy);font-weight:700;color:var(--bm-navy);line-height:1.7;}
.bm-body .bm-a-intro__links,
.bm-body .bm-d-intro__links,
.bm-body .bm-m-intro__links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.bm-body .bm-a-intro__links li,
.bm-body .bm-d-intro__links li,
.bm-body .bm-m-intro__links li{margin:0;padding:0;}
.bm-body .bm-a-intro__links li::before,
.bm-body .bm-d-intro__links li::before,
.bm-body .bm-m-intro__links li::before{display:none;}
.bm-body .bm-a-intro__links a,
.bm-body .bm-d-intro__links a,
.bm-body .bm-m-intro__links a{position:relative;display:flex;align-items:center;min-height:52px;height:100%;padding:10px 26px 10px 12px;border:1px solid var(--bm-border);border-radius:var(--bm-radius-btn);background:#fff;box-shadow:var(--bm-shadow-card);color:var(--bm-blue);font-size:var(--bm-fs-sm);font-weight:700;line-height:1.45;text-decoration:none;}
.bm-body .bm-a-intro__links a::after,
.bm-body .bm-d-intro__links a::after,
.bm-body .bm-m-intro__links a::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.7;}
.bm-body .bm-a-intro__links a:hover,
.bm-body .bm-d-intro__links a:hover,
.bm-body .bm-m-intro__links a:hover{border-color:var(--bm-blue);}
@media (min-width:768px){
  .bm-body .bm-a-intro__links,
  .bm-body .bm-d-intro__links,
.bm-body .bm-m-intro__links{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
}

/* ===== 共通：表の土台（紺の見出し行・白地・角丸。比較の早見表と同じ系統） ===== */
.bm-body .bm-dx-table{width:100%;border-collapse:separate;border-spacing:0;margin:0;background:#fff;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);overflow:hidden;font-size:var(--bm-fs-sm);line-height:1.55;}
.bm-body .bm-dx-table caption{caption-side:top;text-align:left;padding:0 2px 8px;color:var(--bm-text-sub);font-size:var(--bm-fs-xs);font-weight:700;}
.bm-body .bm-dx-table thead th{background:var(--bm-navy);color:#fff;font-weight:700;padding:9px 8px;text-align:center;font-size:var(--bm-fs-xs);line-height:1.35;border:0;}
.bm-body .bm-dx-table thead th:first-child{text-align:left;padding-left:12px;}
.bm-body .bm-dx-table tbody th,
.bm-body .bm-dx-table tbody td{padding:10px 8px;border:0;border-top:1px solid #EEF2F7;vertical-align:middle;}
.bm-body .bm-dx-table tbody tr:first-child th,
.bm-body .bm-dx-table tbody tr:first-child td{border-top:0;}
.bm-body .bm-dx-table tbody th{text-align:left;padding-left:12px;font-weight:700;color:var(--bm-text);}
.bm-body .bm-dx-table tbody td{text-align:center;}
.bm-body .bm-dx-wrap{overflow-x:auto;margin:0 0 14px;}

/* 印：○＝見られる（緑）、△＝一部（コーラルの文字色）、×＝見られない（補足の灰） */
.bm-body .bm-mark{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 4px;border-radius:var(--bm-radius-pill);font-weight:800;font-size:var(--bm-fs-md);line-height:1;}
.bm-body .bm-mark--ok{background:var(--bm-green-bg);color:var(--bm-green-text);}
.bm-body .bm-mark--part{background:var(--bm-coral-bg);color:var(--bm-coral-text);}
.bm-body .bm-mark--no{background:#F0F3F7;color:var(--bm-text-sub);}
.bm-body .bm-mark--word{min-width:0;height:auto;padding:3px 9px;font-size:var(--bm-fs-xs);}
.bm-body .bm-dx-date{white-space:nowrap;color:var(--bm-text-sub);font-size:var(--bm-fs-xs);}

/* ===== 型D：看板番組の早見表 ===== */
.bm-body .bm-d-programs tbody th{min-width:6.5em;}
.bm-body .bm-d-programs thead th:not(:first-child){min-width:3.4em;}

/* ===== 型D：契約先の一覧 ===== */
.bm-body .bm-d-providers tbody th{white-space:nowrap;}
.bm-body .bm-d-providers td a{white-space:nowrap;font-weight:700;}

/* ===== 型D：契約先のチェック項目 =====
   表 → 行ごとのカード。「当てはまること」を大きく、向いている契約先を太字、補足を小さく */
.bm-body .bm-d-checks{width:100%;border-collapse:separate;border-spacing:0 8px;margin:-8px 0 6px;font-size:var(--bm-fs-sm);}
.bm-body .bm-d-checks thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.bm-body .bm-d-checks tbody tr{display:grid;grid-template-columns:28px 1fr;column-gap:10px;row-gap:4px;padding:13px 14px;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);background:#fff;box-shadow:var(--bm-shadow-card);}
.bm-body .bm-d-checks td{display:block;padding:0;border:0;text-align:left;}
.bm-body .bm-d-checks td:nth-child(1){grid-column:1 / -1;display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-items:start;font-weight:700;color:var(--bm-text);font-size:var(--bm-fs-md);line-height:1.5;}
.bm-body .bm-d-checks td:nth-child(2),
.bm-body .bm-d-checks td:nth-child(3){grid-column:2;}
.bm-body .bm-d-checks td:nth-child(2){color:var(--bm-navy);font-weight:700;}
.bm-body .bm-d-checks td:nth-child(2)::before,
.bm-body .bm-d-checks td:nth-child(3)::before{content:attr(data-label);display:inline-block;margin-right:8px;padding:0 7px;border-radius:var(--bm-radius-sm);background:var(--bm-bg);color:var(--bm-text-sub);font-size:var(--bm-fs-micro);font-weight:700;line-height:1.9;vertical-align:1px;}
.bm-body .bm-d-checks td:nth-child(3){color:var(--bm-text-sub);font-size:var(--bm-fs-xs);line-height:1.6;}
.bm-body .bm-check-box{display:inline-block;width:22px;height:22px;margin-top:1px;border:2px solid #B9C6D4;border-radius:6px;background:#fff;}
@media (min-width:768px){
  .bm-body .bm-d-checks tbody tr{grid-template-columns:28px minmax(0,1.1fr) minmax(0,1fr);align-items:start;}
  .bm-body .bm-d-checks td:nth-child(1){grid-column:1 / 3;}
  .bm-body .bm-d-checks td:nth-child(2){grid-column:3;grid-row:1;}
  .bm-body .bm-d-checks td:nth-child(3){grid-column:2 / 4;}
}

/* 押せる形（D-004 案2）。行を押すと印が付き、枠が緑になる（保存しない・絞り込みもしない。切り替えはプラグインのスクリプト） */
.bm-body .bm-d-checks tbody tr{cursor:pointer;transition:border-color .12s ease,background .12s ease;}
.bm-body .bm-d-checks tbody tr:hover{border-color:#B9C6D4;}
.bm-body .bm-d-checks tbody tr[aria-checked="true"]{border-color:var(--bm-green);background:var(--bm-green-bg);}
.bm-body .bm-d-checks tbody tr[aria-checked="true"] .bm-check-box{border-color:var(--bm-green);background:var(--bm-green);position:relative;}
.bm-body .bm-d-checks tbody tr[aria-checked="true"] .bm-check-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg);}
.bm-body .bm-d-checks tbody tr:focus-visible{outline:3px solid var(--bm-blue);outline-offset:2px;}

/* ===== 型D：無料の公式リンク ===== */
.bm-body .bm-d-free-links{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;}
.bm-body .bm-d-free-links li{margin:0;padding:0;}
.bm-body .bm-d-free-links li::before{display:none;}
.bm-body .bm-d-free-links a{position:relative;display:block;padding:13px 40px 13px 14px;border:1px solid var(--bm-green-border);border-radius:var(--bm-radius-btn);background:var(--bm-green-bg);color:var(--bm-green-text);font-weight:700;font-size:var(--bm-fs-sm);line-height:1.5;text-decoration:none;}
.bm-body .bm-d-free-links a::after{content:"↗";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:16px;}

/* ===== 型A：料金・無料体験と確認日 ===== */
.bm-body .bm-a-terms{margin:28px 0 0;}
.bm-body .bm-a-terms table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);overflow:hidden;font-size:var(--bm-fs-md);}
.bm-body .bm-a-terms th,
.bm-body .bm-a-terms td{padding:11px 14px;border:0;border-top:1px solid #EEF2F7;text-align:left;vertical-align:top;}
.bm-body .bm-a-terms tr:first-child th,
.bm-body .bm-a-terms tr:first-child td{border-top:0;}
.bm-body .bm-a-terms th{width:8.5em;white-space:nowrap;color:var(--bm-text-sub);font-weight:700;font-size:var(--bm-fs-sm);background:var(--bm-bg);}
.bm-body .bm-a-terms tr:nth-child(-n+2) td{font-weight:800;color:var(--bm-navy);}
.bm-body .bm-a-terms tr:nth-child(n+3) td{color:var(--bm-text-sub);font-size:var(--bm-fs-sm);}

/* ===== 型A：記事ごとの補足（1・6〜9。補足の文があるときだけ出る） ===== */
.bm-body .bm-a-supplement{margin:14px 0 0;padding:13px 16px 13px 16px;border-radius:var(--bm-radius-btn);background:var(--bm-bg);border:1px solid var(--bm-border);border-left:4px solid var(--bm-blue);font-size:var(--bm-fs-md);line-height:1.8;}
.bm-body .bm-a-supplement__label{display:block;margin:0 0 2px;color:var(--bm-blue);font-size:var(--bm-fs-xs);font-weight:800;}
.bm-body .bm-a-supplement p{margin:0;}

/* 新しい構成の目次：閉じた状態で始める（D-005・案B）。見出しの行を押して開く。
   「開く／閉じる」は、ほかの記事の「すべて表示」と同じ青の小さな文字。開くとPCは2列（左列→右列） */
.bm-toc--fold{padding:0;}
.bm-toc--fold .bm-toc__fold > summary{list-style:none;cursor:pointer;margin:0;padding:13px 16px;min-height:48px;}
.bm-toc--fold .bm-toc__fold > summary::-webkit-details-marker{display:none;}
.bm-toc--fold .bm-toc__count{color:var(--bm-text-sub);font-weight:700;}
.bm-toc--fold .bm-toc__fold-label{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--bm-blue);font-size:12px;font-weight:700;}
.bm-toc--fold .bm-toc__fold-label::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);}
.bm-toc--fold .bm-toc__fold[open] .bm-toc__fold-label::after{margin-top:3px;transform:rotate(-135deg);}
.bm-toc--fold .bm-toc__more-close{display:none;}
.bm-toc--fold .bm-toc__fold[open] .bm-toc__more-open{display:none;}
.bm-toc--fold .bm-toc__fold[open] .bm-toc__more-close{display:inline;}
.bm-toc--fold .bm-toc__list{padding:0 16px 16px calc(16px + 1.3em);}
@media (min-width:768px){
  .bm-toc--fold .bm-toc__list{display:block;columns:2;column-gap:28px;}
  .bm-toc--fold .bm-toc__list li{break-inside:avoid;margin-bottom:6px;}
}

/* =========================================================
   本文の汎用要素（D-007。D-006 でmkが選んだ案）
   印・番号は class の無い ul/ol と wp-block-list だけ。テーマ・プラグインの部品（目次・入口・手順など class のあるもの）には効かせない
   ========================================================= */
/* 本文中のリンクに下線（色だけに頼らない）。ボタン・カード・目次・入口・無料リンクは除く */
.bm-body :is(p,li,td,th,dd,figcaption) a:not(.btn):not(.bm-card):not([class*="bm-btn"]):not(:where(.bm-toc,.bm-a-intro,.bm-d-intro,.bm-m-intro,.bm-d-free-links,.bm-kanren) a){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(46,120,199,.45);}
.bm-body :is(p,li,td,th,dd,figcaption) a:not(.btn):not(.bm-card):not([class*="bm-btn"]):not(:where(.bm-toc,.bm-a-intro,.bm-d-intro,.bm-m-intro,.bm-d-free-links,.bm-kanren) a):hover{text-decoration-color:currentColor;}

/* h4：紺の文字＋左の空色の小さな丸（D-017。もとは青い縦の印（本文と同じ見た目で見出しと分からなかった） */
.bm-body h4{position:relative;padding-left:14px;color:var(--bm-navy);font-size:1.04em;line-height:1.55;}
.bm-body h4{padding-left:1.1em;}
.bm-body h4::before{content:"";position:absolute;left:0;top:.5em;width:.58em;height:.58em;border-radius:50%;background:#68B8F0;}

/* ul：紺の小さな四角。入れ子の2段目は白抜きの小さな丸 */
.bm-body ul:is(.wp-block-list:not([class*="is-style"]):not([class*="bm-"]),:not([class])){list-style:none;padding-left:0;margin:0 0 1.2em;}
.bm-body ul:is(.wp-block-list:not([class*="is-style"]):not([class*="bm-"]),:not([class])) > li{position:relative;padding-left:1.35em;margin:0 0 .45em;}
.bm-body ul:is(.wp-block-list:not([class*="is-style"]):not([class*="bm-"]),:not([class])) > li::before{content:"";position:absolute;left:.3em;top:.74em;width:6px;height:6px;border-radius:1.5px;background:var(--bm-navy);}
.bm-body li > ul{margin:.45em 0 .2em;}
.bm-body ul:is(.wp-block-list:not([class*="is-style"]):not([class*="bm-"]),:not([class])) ul:is(.wp-block-list:not([class*="is-style"]):not([class*="bm-"]),:not([class])) > li::before{width:6px;height:6px;border-radius:50%;background:#fff;border:1.5px solid var(--bm-blue);box-sizing:border-box;}

/* ol：淡い青の角丸に青い数字 */
.bm-body ol:is(.wp-block-list:not([class*="is-style"]):not([class*="bm-"]),:not([class])){list-style:none;padding-left:0;margin:0 0 1.2em;counter-reset:bmol;}
.bm-body ol:is(.wp-block-list:not([class*="is-style"]):not([class*="bm-"]),:not([class])) > li{position:relative;padding-left:2.1em;margin:0 0 .6em;counter-increment:bmol;}
.bm-body ol:is(.wp-block-list:not([class*="is-style"]):not([class*="bm-"]),:not([class])) > li::before{content:counter(bmol);position:absolute;left:0;top:.2em;display:grid;place-items:center;width:1.45em;height:1.45em;border-radius:6px;background:#E8F1FB;color:var(--bm-blue);font-size:.86em;font-weight:800;line-height:1;}

/* 画像の説明 */
.bm-body figure figcaption{margin-top:6px;color:var(--bm-text-sub);font-size:var(--bm-fs-xs);line-height:1.6;}

/* 開閉（details）：FAQと同じ白いカード＋右の開閉の印。テーマ・プラグインの開閉（bm-）は除く */
.bm-body details:not([class*="bm-"]){margin:1em 0 1.4em;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);background:#fff;box-shadow:var(--bm-shadow-card);}
.bm-body details:not([class*="bm-"]) > summary{list-style:none;position:relative;padding:14px 44px 14px 16px;cursor:pointer;font-weight:800;color:var(--bm-navy);}
.bm-body details:not([class*="bm-"]) > summary::-webkit-details-marker{display:none;}
.bm-body details:not([class*="bm-"]) > summary::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--bm-blue);border-bottom:2px solid var(--bm-blue);transform:rotate(45deg);}
.bm-body details:not([class*="bm-"])[open] > summary::after{margin-top:-2px;transform:rotate(-135deg);}
.bm-body details:not([class*="bm-"])[open] > summary{border-bottom:1px solid var(--bm-border);}
.bm-body details:not([class*="bm-"]) > :not(summary){margin-left:16px;margin-right:16px;}
.bm-body details:not([class*="bm-"]) > :last-child{margin-bottom:16px;}

/* 区切り線 */
.bm-body hr{margin:2em auto;border:0;height:1px;background:var(--bm-border);}

/* 新しい構成（型A・型D）の本文にある素の表（class・style の無いもの）も、旧本文の表（legacy-content.css の wp-block-table）と同じ縞の表にする（D-008）。
   部品の表（早見表・契約先の一覧・チェック項目＝class あり、型Aの料金の表＝.bm-a-terms、型Dの料金の内訳＝style あり）は今のまま */
.bm-body:has(.bm-a-intro,.bm-d-intro,.bm-m-intro) table:not([class]):not([style]):not(.bm-a-terms table){width:100%;margin:1.2em 0 1.5em;border-collapse:separate;border-spacing:0;border:1px solid var(--bm-border);border-radius:var(--bm-radius-card);overflow:hidden;background:#fff;font-size:var(--bm-fs-sm);line-height:1.6;}
.bm-body:has(.bm-a-intro,.bm-d-intro,.bm-m-intro) table:not([class]):not([style]):not(.bm-a-terms table) :is(th,td){border:0;padding:10px 12px;vertical-align:middle;text-align:left;}
.bm-body:has(.bm-a-intro,.bm-d-intro,.bm-m-intro) table:not([class]):not([style]):not(.bm-a-terms table) thead th{background:var(--bm-navy);color:#fff;font-weight:700;font-size:var(--bm-fs-xs);letter-spacing:.02em;}
.bm-body:has(.bm-a-intro,.bm-d-intro,.bm-m-intro) table:not([class]):not([style]):not(.bm-a-terms table) tbody tr:nth-child(even) > *{background-color:#F7F9FC;}
.bm-body:has(.bm-a-intro,.bm-d-intro,.bm-m-intro) table:not([class]):not([style]):not(.bm-a-terms table):not(:has(thead)) tr > :first-child{background:var(--bm-bg);color:var(--bm-navy);font-weight:700;width:34%;}
.bm-body:has(.bm-a-intro,.bm-d-intro,.bm-m-intro) table:not([class]):not([style]):not(.bm-a-terms table) tr > :first-child{min-width:5.5em;} /* スマホで1列目が1〜2文字ずつに割れないように */

/* =========================================================
   トップ・サービス一覧・比較（D-012。mk が選んだ案：トップ＝D-011d「場所を分けた案」、比較＝D-011e 案1、サービス一覧＝D-011f 直した案）
   オリジナルアイコン（assets/icons/）は目印だけ・1つの欄に1つ。表示は原寸の半分以下
   ========================================================= */
.bm-ic{display:inline-block;height:auto;flex-shrink:0;vertical-align:middle;}
.bm-hub-h{display:flex;align-items:center;gap:8px;}
.bm-nb{display:inline-block;}

/* トップ：用事から探す（冒頭とは別の帯） */
.bm-home-band{padding:16px 14px 14px;border-radius:18px;background:#fff;border:1px solid var(--bm-border);}
.bm-home-band__title{margin:0 0 10px;font-size:15px;font-weight:800;color:var(--bm-navy);}
.bm-home-tasks{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;}
.bm-home-task{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:74px;padding:10px 8px;border-radius:14px;background:#fff;border:1px solid #D6E4F5;box-shadow:var(--bm-shadow-card);text-decoration:none;color:var(--bm-navy);font-weight:800;font-size:15px;line-height:1.35;text-align:center;}
.bm-home-task:hover{border-color:var(--bm-blue);}

/* トップ：サービスをのぞいてみる（スマホは横に流す棚、PCは6列） */
.bm-home-shelf{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;}
.bm-home-shelf__card{flex:0 0 42%;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;padding:16px 14px;border-radius:18px;background:#fff;border:1px solid var(--bm-border);box-shadow:var(--bm-shadow-card);text-decoration:none;}
.bm-home-shelf__card b{font-size:16px;color:var(--bm-navy);}
.bm-home-shelf__card span{font-size:14px;color:var(--bm-text-sub);}
.bm-home-shelf__card em{display:flex;align-items:center;gap:4px;font-style:normal;font-size:12px;font-weight:700;color:var(--bm-green-text);}
.bm-home-more{margin:4px 0 0;font-size:14px;font-weight:700;}
.bm-home-more a{color:var(--bm-blue);}

/* トップ：比較への導線（紺のカードの右上に目印） */
.bm-home-compare{position:relative;}
.bm-home-compare__ic{position:absolute;right:16px;top:16px;padding:6px;border-radius:12px;background:#fff;box-sizing:content-box;}
.bm-home-compare > :not(img):not(a){padding-right:84px;}

/* トップ：よく読まれている記事 */
.bm-home-posts{display:grid;gap:8px;}
.bm-home-posts a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:#fff;border:1px solid var(--bm-border);text-decoration:none;color:var(--bm-text);font-weight:700;font-size:14px;line-height:1.5;}
.bm-home-posts a:hover{border-color:var(--bm-blue);}
@media(min-width:768px){
  .bm-home-shelf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;}
  .bm-home-posts{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* 比較：順位の札（1〜3位は金・銀・銅のメダル、4位以下は灰色）。金・銀・銅はアイコンの黄色に合わせて淡く */
.bm-rank{display:inline-grid;place-items:center;grid-auto-flow:column;align-items:baseline;min-width:40px;height:30px;margin-right:6px;padding:0 8px;border-radius:999px;font-weight:800;font-size:16px;line-height:30px;background:var(--bm-bg);border:1px solid var(--bm-border);color:var(--bm-text-sub);}
.bm-rank small{font-size:11px;margin-left:1px;}
.bm-rank--medal{border:2px solid;box-shadow:inset 0 -2px 0 rgba(0,0,0,.06);}
.bm-rank--1{background:#FFF4CC;border-color:#E9B949;color:#7A5300;}
.bm-rank--2{background:#EEF2F6;border-color:#AEB9C6;color:#46515E;}
.bm-rank--3{background:#FBEADF;border-color:#D59A70;color:#7A4221;}

/* サービス一覧：無料の札（FREE券の目印） */
.bm-free-tag{display:inline-flex;align-items:center;gap:4px;}

/* サービス一覧：種類ごとの段（VOD＝淡い青／放送・スポーツ＝淡い灰／Amazonの追加チャンネル＝紺の帯） */
.bm-svc-groups{display:flex;flex-direction:column;gap:18px;}
.bm-svc-group{border-radius:20px;padding:16px 10px 12px;}
.bm-svc-group__title{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:18px;font-weight:800;color:var(--bm-navy);}
.bm-svc-group__list{display:flex;flex-direction:column;gap:10px;}
.bm-svc-group .bm-card{box-shadow:var(--bm-shadow-card);padding:14px 12px;}
.bm-svc-group .bm-btn--sm{white-space:nowrap;padding:12px 6px;}
.bm-svc-group--vod{background:#E8F1FB;}
.bm-svc-group--satellite{background:#F0F3F7;border:1px solid var(--bm-border);}
.bm-svc-group--hub{background:var(--bm-navy);color:#fff;}
.bm-svc-group--hub .bm-svc-group__title{color:#fff;}
.bm-svc-group--hub .bm-svc-group__title .bm-ic{background:#fff;border-radius:8px;padding:3px;}
.bm-svc-group--hub .bm-card{background:transparent;border:0;box-shadow:none;padding:0;}
.bm-svc-group--hub .bm-card .bm-h3 a{color:#fff;}
.bm-svc-group--hub .bm-card .bm-caption{color:#C9D7E7;}
.bm-svc-group--hub .bm-btn--outline{background:#fff;border-color:#fff;color:var(--bm-navy);}
@media(min-width:768px){
  .bm-svc-group{padding:24px 24px 20px;}
}

/* =========================================================
   記事詳細・サービス親・検索結果・404・カテゴリー・/primevideo/・/cancel-guides/（D-015。D-014 で mk が選んだ案2＋共通の変更）
   ページの見出しは面なし。アイコンは目印だけ・1つの欄に1つ。/diagnosis/ は変えない
   ========================================================= */
/* 淡い青の段（欄ごとの面） */
.bm-band{padding:18px 14px 16px;border-radius:20px;background:#E8F1FB;}
.bm-band .bm-card{box-shadow:var(--bm-shadow-card);}
.bm-band > h2{margin-top:0;}
.bm-band__title{font-size:20px;font-weight:800;color:var(--bm-navy);margin:0 0 8px;line-height:1.4;}
@media(min-width:768px){ .bm-band{padding:24px 24px 20px;} }
/* 見出しの目印を上に置く（404） */
.bm-hub-h--stack{flex-direction:column;justify-content:center;gap:6px;}

/* 著者：空の丸の代わりに目のアイコン（編集部の目印） */
.bm-author__avatar--mark{display:grid;place-items:center;background:#fff;border:1px solid var(--bm-border);}

/* 記事の一覧（検索・カテゴリー・/primevideo/ のチャンネル別）：右に ›、アイキャッチの無い記事は書類の目印 */
.bm-post-rows > .bm-card{position:relative;padding-right:36px !important;}
.bm-post-rows > .bm-card::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-4px;border-right:2px solid var(--bm-blue);border-top:2px solid var(--bm-blue);transform:rotate(45deg);}
.bm-post-rows__mark{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--bm-border);}
.bm-post-rows > .bm-card > span:last-child{font-size:var(--bm-fs-md) !important;font-weight:700 !important;line-height:1.55 !important;}

/* D-017 ページネーション（D-016 案A：丸いボタン。今のページは紺塗り＋空色の縁） */
.navigation.pagination{margin:28px 0 8px;}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;}
.page-numbers{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 6px;border-radius:999px;border:2px solid #CFE0F3;background:#fff;color:var(--bm-navy);text-decoration:none;font-size:16px;font-weight:700;line-height:1;white-space:nowrap;}
a.page-numbers:hover{border-color:#68B8F0;background:#EAF3FC;}
.page-numbers.current{background:var(--bm-navy);border-color:var(--bm-navy);color:#fff;box-shadow:0 3px 0 #68B8F0;}
.page-numbers.dots{border:0;background:none;min-width:24px;padding:0;color:var(--bm-text-sub);}
.page-numbers.prev,.page-numbers.next{padding:0 18px;gap:6px;grid-auto-flow:column;}
.page-numbers.next::after{content:"";width:7px;height:7px;border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;transform:rotate(45deg);margin-left:2px;}
.page-numbers.prev::before{content:"";width:7px;height:7px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);margin-right:2px;}