/* lplus Q&A Block — フロント＆エディタ共通デザイン */
.mqb{
  --mqb-accent:#333333;
  --mqb-line:#e5e5e5;
  --mqb-body:#555555;         /* 回答本文（cvt-text-2 と同一） */
  --mqb-link:#1976D2;         /* 文中リンク・次の行動リンク（サイト共通の青） */
  --mqb-arw-bg:#333333;       /* 「→」丸ボタンの塗り。リンク色とは独立（青にするなら #1976D2） */
  --mqb-arw-fg:#FFFFFF;       /* 「→」の文字 */
  --mqb-q-fg:#333333;         /* 質問（Q）・結論（A）の文字色 */
  /* 表：外枠・罫線（cv-table の「罫線は行 > 列」に合わせ、縦は横より淡く） */
  --mqb-table-frame:#E5E5E5;    /* 外枠（cvt-frame-line） */
  --mqb-table-line:#ECECEC;     /* 行の罫線（cvt-row-line） */
  --mqb-table-col-line:#F5F5F5; /* 列の罫線（cvt-col-line・行より淡く） */
  /* 表：列見出し行（1行目のth）。区切り行(#F7F7F7)より一段濃くして階層を作る＋下2px罫線 */
  --mqb-table-head-bg:#EFEFEF;
  --mqb-table-head-fg:#333333;
  --mqb-table-head-rule:#333333;
  /* 列見出しどうしの縦罫線。既定は白＝グレー塗りの上では細い抜き線、
     白地に戻した場合は自動的に消える。濃い塗りにする場合もそのまま使える */
  --mqb-table-head-line:#FFFFFF;
  /* 表：区切り行（colspanで横断するth。「料金」「脱毛機」などの見出し帯） */
  --mqb-table-band-bg:#F7F7F7;
  --mqb-table-band-fg:#333333;
  /* 表：項目列（1列目をthに変換した場合の行見出し） */
  --mqb-table-col1-bg:#FCFCFC;
  --mqb-table-col1-fg:#333333;
  --mqb-table-td-fg:#333333;    /* データセルの文字 */
  --mqb-pad-card-y:40px;
  --mqb-pad-card-x:40px;
  --mqb-pad-item:32px;
  --mqb-gap-mark:18px;
  --mqb-gap-qa:18px;
  --mqb-gap-lead:22px;
  --mqb-gap-block:28px;
  /* 段落と段落の間隔。本文の行送り(1.9)と同値にすると「空行1つぶん」ちょうどになる。
     詰めたい場合は 1.2em など、この1行だけ変更すればよい。 */
  --mqb-gap-para:1.9em;
  --mqb-gap-links:28px;
  --mqb-base:16px;
  --mqb-mk-size:calc(var(--mqb-base) * 2.875);
  /* 本文1行ぶんの高さ（質問・結論 1.06em × 行間1.65） */
  --mqb-line-h:calc(var(--mqb-base) * 1.749);
  /* 丸を1行の中央に置くためのずらし量（負の値） */
  --mqb-mk-offset:calc((var(--mqb-line-h) - var(--mqb-mk-size)) / 2);
}
.mqb{font-size:var(--mqb-base);}
.mqb *{box-sizing:border-box;}
.mqb__card{
  background:#fff;border-radius:14px;box-shadow:0 3px 14px rgba(31,60,90,.06);
  padding:var(--mqb-pad-card-y) var(--mqb-pad-card-x);
}

.mqb__item{padding:var(--mqb-pad-item) 0;border-bottom:1px solid var(--mqb-line);}
.mqb__item:first-child{padding-top:0;}
.mqb__item:last-child{border-bottom:0;padding-bottom:0;}

.mqb__qrow{display:flex;gap:var(--mqb-gap-mark);align-items:flex-start;
  padding-bottom:var(--mqb-gap-qa);border-bottom:1px dashed var(--mqb-line);}
.mqb .mqb__qtx{flex:1 1 auto;min-width:0;font-size:1.06em;font-weight:800;line-height:1.65;}
/* 質問を見出しタグ（h2〜h5）で出力した場合の打ち消し。
   SWELL等のテーマは h2/h3 に罫線・背景・連番などを ::before / ::after で付けるため、
   そのままだとカードのデザインが崩れる。見た目は div のときと完全に同じにする。 */
.mqb.mqb .mqb__qrow > .mqb__qtx{
  margin:0!important;padding:0!important;border:0!important;
  background:none!important;background-color:transparent!important;
  box-shadow:none!important;border-radius:0!important;
  font-family:inherit!important;font-size:1.06em!important;font-weight:800!important;
  line-height:1.65!important;letter-spacing:normal!important;text-align:left!important;
  color:var(--mqb-q-fg)!important;counter-increment:none!important;}
.mqb.mqb .mqb__qrow > .mqb__qtx::before{content:none!important;display:none!important;}
/* ::after はエディタのプレースホルダに使われるため、そこだけ残す */
.mqb.mqb .mqb__qrow > .mqb__qtx:not([data-rich-text-placeholder])::after{
  content:none!important;display:none!important;}

.mqb__arow{padding-top:var(--mqb-gap-qa);}
.mqb__ahead{display:flex;gap:var(--mqb-gap-mark);align-items:flex-start;}
.mqb .mqb__concl{flex:1 1 auto;min-width:0;margin:0;font-size:1.06em;font-weight:800;line-height:1.65;
  color:var(--mqb-q-fg);overflow-wrap:break-word;word-break:break-word;}
.mqb__abody{margin-top:var(--mqb-gap-lead);padding-left:calc(var(--mqb-mk-size) / 2);}
.mqb__abody > *:first-child{margin-top:0;}
.mqb__abody > *:last-child{margin-bottom:0;}
/* 段落の上下余白は必ずここで決める。
   テーマ（SWELL等）は `.post_content > *` のような直下セレクタで行送りを当てるため、
   入れ子になったこのカードの中では段落マージンが一切効かず、行が詰まってしまう。 */
.mqb__abody p{font-size:.97em;color:var(--mqb-body);line-height:1.9;
  margin-top:0;margin-bottom:var(--mqb-gap-para);
  overflow-wrap:break-word;word-break:break-word;}
.mqb__abody p:last-child{margin-bottom:0;}

/* マーク
   ・レイアウト上の箱は「本文1行ぶんの高さ」だけにする（行の詰まり方を本文に合わせる）
   ・丸と文字は絶対配置で、その箱の中央にくるよう top でずらす
   ・margin を使わないので、テーマの margin リセットに影響されない */
.mqb-mk{position:relative;flex:0 0 auto;margin:0;overflow:visible;
  width:var(--mqb-mk-size);height:var(--mqb-line-h);
  color:#fff;font-weight:800;line-height:1;}
.mqb-mk__shape{position:absolute;left:0;top:var(--mqb-mk-offset);
  width:var(--mqb-mk-size);height:var(--mqb-mk-size);overflow:visible;}
.mqb-mk__txt{position:absolute;left:0;top:var(--mqb-mk-offset);
  width:var(--mqb-mk-size);height:var(--mqb-mk-size);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--mqb-base) * 1.18);line-height:1;}
.mqb-mk--q .mqb-mk__shape path{fill:var(--mqb-accent);stroke:none;}
.mqb-mk--a .mqb-mk__shape path{fill:#fff;stroke:var(--mqb-accent);stroke-width:2;stroke-linejoin:round;}
.mqb-mk--a{color:var(--mqb-accent);}

/* リンク（次の行動） */
.mqb__links{margin-top:var(--mqb-gap-links);display:flex;flex-wrap:wrap;justify-content:flex-end;gap:24px;}
.mqb__link{display:inline-flex;align-items:center;gap:10px;font-size:.95em;font-weight:800;
  color:var(--mqb-link);text-decoration:none;line-height:1;cursor:pointer;}
.mqb__arw{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background-color:var(--mqb-arw-bg);
  color:var(--mqb-arw-fg);display:inline-flex;align-items:center;justify-content:center;font-size:.95em;line-height:1;}
.mqb__inlink{color:var(--mqb-link);text-decoration:underline;text-underline-offset:2px;
  overflow-wrap:break-word;word-break:break-word;}
/* 次の行動リンク（URL指定時のaタグ版）: span版と見た目を揃える */
.mqb__link--url{color:var(--mqb-link);}
a.mqb__link--url:hover{opacity:.85;}
a.mqb__link--url:visited{color:var(--mqb-link);}

/* 下線は「テキスト部分だけ」に引く（v2.8.1-mitsukeru.2 で復帰）。
   下線は親要素に指定されると子（atomic inline も含む）の上にも“描画”され、
   子側の text-decoration:none では消せない。したがって
   (a) 親＝リンク/広告計測spanの下線を !important で殺し
   (b) ラベル文字だけを包む .mqb__link-tx に引き直す、の2段構えにする。
   広告スクリプトが <a> を差し込む形に変わっても効くよう a も対象に含める */
.mqb .mqb__link,
.mqb .mqb__link:hover,
.mqb .mqb__link:focus,
.mqb .mqb__link:visited,
.mqb .mqb__link > a{text-decoration:none!important;}
.mqb .mqb__link > .mqb__link-tx{
  color:var(--mqb-link);
  text-decoration:underline!important;text-decoration-thickness:1px;
  text-underline-offset:2px;}
/* 広告計測クラス（.jsl-custom-label / .custom-label / .jump）やテーマの a 指定を
   「→」だけ受けないようにする防御。ラベル文字の青と下線はそのまま維持する */
.mqb .mqb__link > .mqb__arw,
.mqb .mqb__link:hover > .mqb__arw,
.mqb .mqb__link:focus > .mqb__arw{
  background-color:var(--mqb-arw-bg)!important;color:var(--mqb-arw-fg)!important;
  border-color:var(--mqb-arw-bg)!important;text-decoration:none!important;}


/* 囲みボックス（上下線・背景なし） */
.mqb__box{margin:var(--mqb-gap-block) 0;padding:16px 0;background:none;
  border-top:2px solid var(--mqb-accent);border-bottom:2px solid var(--mqb-accent);}
.mqb__box-title{display:inline-flex;align-items:center;gap:7px;margin:0;
  color:var(--mqb-accent);font-size:.95em;font-weight:800;}
/* アイコンは常にメインカラー（テーマの文字色上書きを受けない） */
.mqb-box__ic{width:17px;height:17px;flex:0 0 auto;color:var(--mqb-accent);stroke:var(--mqb-accent);}
.mqb__box > *:last-child{margin-bottom:0;}
/* ボックス内は上下マージンをリセットし、要素と要素の間だけ空ける */
.mqb__abody .mqb__box > *{margin-top:0;margin-bottom:0;}
.mqb__abody .mqb__box > * + *{margin-top:.7em;}

/* 箇条書き（coreリストに寄せる） */
.mqb__abody ul{margin:var(--mqb-gap-block) 0;padding:0;list-style:none;}
.mqb__abody ul li{position:relative;padding-left:22px;margin-bottom:12px;font-size:.97em;line-height:1.9;}
.mqb__abody ul li:last-child{margin-bottom:0;}
.mqb__abody ul li::before{content:"";position:absolute;left:2px;top:.8em;width:7px;height:7px;
  border-radius:50%;background:var(--mqb-accent);}

/* ===== 表 =====
   th を役割で3つに分けて階層を作る。
     1) 列見出し（先頭行の th・colspanなし） … 白地＋下2px罫線
     2) 区切り行（colspan付きの th）        … 淡いグレー帯
     3) 項目列  （それ以外の th＝行見出し）  … ごく淡いグレー
   td は「データ」として一律に扱う。1列目を太字にしないのは、2プラン比較表など
   1列目がラベルでない表で、左だけ太字になり誤読を招くため（thに変換すれば項目列になる）。

   既定の塗り・文字色は「編集画面で色を指定していないセル」にだけ当てる。
   指定済みセル（.has-background / .has-text-color / style属性の色指定）や、
   表自体に背景色が付いている場合は、編集画面の指定をそのまま活かす。 */
.mqb__abody table{width:100%;border-collapse:collapse;margin:var(--mqb-gap-block) 0;
  font-size:.95em;line-height:1.7;border:1px solid var(--mqb-table-frame);}
.mqb__abody th,
.mqb__abody td{padding:16px 12px;text-align:center;vertical-align:middle;border:0;
  border-top:1px solid var(--mqb-table-line);
  border-left:1px solid var(--mqb-table-col-line);}
.mqb__abody tbody:first-child > tr:first-child > th,
.mqb__abody tbody:first-child > tr:first-child > td,
.mqb__abody thead > tr:first-child > th,
.mqb__abody thead + tbody tr:first-child > th,
.mqb__abody thead + tbody tr:first-child > td{border-top:0;}
.mqb__abody th:first-child,
.mqb__abody td:first-child{border-left:0;}
.mqb__abody th{font-weight:700;}

/* ↓ 既定の塗り・文字色（ガード付き。編集画面でセルに色を付けた場合はそちらが優先） */
/* 3) 項目列（既定のth） */
.mqb__abody table:not(.has-background):not([style*="background"])
  th:not(.has-background):not([style*="background"]){background:var(--mqb-table-col1-bg);}
.mqb__abody th:not(.has-text-color):not([style*="color"]){color:var(--mqb-table-col1-fg);}
/* 2) 区切り行（colspanで横断するth） */
.mqb__abody table:not(.has-background):not([style*="background"])
  th[colspan]:not(.has-background):not([style*="background"]){background:var(--mqb-table-band-bg);}
.mqb__abody th[colspan]:not(.has-text-color):not([style*="color"]){color:var(--mqb-table-band-fg);}
/* 1) 列見出し（thead、または先頭行のcolspanなしth） */
.mqb__abody table:not(.has-background):not([style*="background"])
  thead th:not(.has-background):not([style*="background"]),
.mqb__abody table:not(.has-background):not([style*="background"])
  tbody:first-child > tr:first-child > th:not([colspan]):not(.has-background):not([style*="background"]){
  background:var(--mqb-table-head-bg);}
.mqb__abody thead th:not(.has-text-color):not([style*="color"]),
.mqb__abody tbody:first-child > tr:first-child > th:not([colspan]):not(.has-text-color):not([style*="color"]){
  color:var(--mqb-table-head-fg);font-size:.94em;letter-spacing:.04em;}
/* 列見出しの下だけ2px罫線（記事見出しと同じ引き方） */
.mqb__abody thead th,
.mqb__abody tbody:first-child > tr:first-child > th:not([colspan]){border-bottom:2px solid var(--mqb-table-head-rule);}
.mqb__abody thead th + th,
.mqb__abody tbody:first-child > tr:first-child > th:not([colspan]) + th:not([colspan]){
  border-left-color:var(--mqb-table-head-line);}
.mqb__abody thead + tbody tr:first-child > th,
.mqb__abody thead + tbody tr:first-child > td{border-top:0;}
/* データセル */
.mqb__abody td:not(.has-text-color):not([style*="color"]){color:var(--mqb-table-td-fg);}

/* スマホ */
@media screen and (max-width:600px){
  .mqb{--mqb-pad-card-y:24px;--mqb-pad-card-x:16px;--mqb-pad-item:24px;
    --mqb-gap-mark:10px;--mqb-gap-qa:14px;--mqb-gap-lead:18px;--mqb-gap-block:22px;
    --mqb-gap-links:22px;--mqb-mk-size:calc(var(--mqb-base) * 2.125);
    --mqb-mk-offset:calc((var(--mqb-line-h) - var(--mqb-base) * 2.125) / 2);}
  .mqb__card{border-radius:12px;}
  .mqb__abody th,.mqb__abody td{padding:12px 8px;}
  .mqb__abody th{font-size:.92em;}
}

/* === 長いURLの折り返しを確実にする（テーマの word-break 等に負けないよう詳細度を上げる） === */
.mqb .mqb__concl,
.mqb .mqb__abody p,
.mqb .mqb__abody li,
.mqb .mqb__inlink{
  overflow-wrap:anywhere;
  word-break:normal;
  word-wrap:break-word;
}
/* wbr（折り返し可能点）を確実に機能させる */
.mqb wbr{display:inline;white-space:normal;}
/* テーマが keep-all を当てていても、この要素内では通常改行に戻す */
.mqb .mqb__concl,
.mqb .mqb__abody{word-break:normal !important;line-break:auto !important;}

/* 文中の広告リンク（広告計測・data-id） */
.mqb__adlink{color:var(--mqb-link);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-weight:700;}

/* === 回答本文の画像（v2.8.1） === */
/* 図版・グラフを本文と同じ左端ラインに揃え、横幅いっぱいに収める */
.mqb .mqb__abody figure.wp-block-image,
.mqb .mqb__abody .wp-block-image{
  margin:0;
  max-width:100%;
}
.mqb .mqb__abody .wp-block-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}
/* 中央寄せ・右寄せ指定を尊重しつつ、はみ出しは防ぐ */
.mqb .mqb__abody .wp-block-image.aligncenter{margin-left:auto;margin-right:auto;}
.mqb .mqb__abody .wp-block-image.alignright{margin-left:auto;}
/* 幅指定（%）が入っている場合はそれを優先 */
.mqb .mqb__abody .wp-block-image[style*="width"] img{width:100%;}
/* キャプション */
.mqb .mqb__abody .wp-block-image figcaption{
  margin:8px 0 0;
  font-size:.86em;
  line-height:1.6;
  color:#777;
  text-align:left;
}
/* 囲みボックス内の画像は少し内側に収める */
.mqb .mqb__box .wp-block-image img{border-radius:6px;}

@media screen and (max-width:600px){
  .mqb .mqb__abody .wp-block-image img{border-radius:6px;}
  .mqb .mqb__abody .wp-block-image figcaption{font-size:.84em;}
}