/* ===== 記事画像の拡大ボタン 20261024 ===== */
/* 承認（2026-10-24）：P1＝画像の上・左寄せ・画像に被せない。S4＝白地・丸い端・影・虫めがね＋・文字「拡大」。
   2回目の調整（同日「もう少し小さく」「上下余白がありすぎ」）→ 高さ18px・文字10px・アイコン11px・画像との間4px、
   ボタンは上の余白の中に置く（margin-top:-22px＝高さ18＋間4）ので、画像の位置と前後の間隔は変更前と同じ。
   押せる範囲は見た目 18px のまま ::before で上下左右 9px 広げる（36px）。覆いの色は記事ポップアップ（#meg-popup-overlay）と同じ紺。
   見出しの型（③-9 太い線の角を丸めない・③-10 片側の太い色線）には当たらない＝線は使わない。 */
.post-content .mg-zoom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
/* ボタンを出すときだけ、高さ18＋間4＝22px を上の余白に食い込ませる（画像の位置は変更前と同じ）。出さないとき（旧 850px 図解の PC/TB）に食い込ませると画像が 22px 上がる＝検証で検出 */
.post-content .mg-zoom.is-on { margin-top: -22px; }
.post-content .mg-zoom > img,
.post-content .mg-zoom > img.aligncenter {
  display: block;
  margin: 0;
}
.post-content .mg-zoom.is-on > img { cursor: zoom-in; }
.post-content .mg-zoom-btn {
  display: none;
  position: relative;
  align-items: center;
  height: 18px;
  margin: 0 0 4px;
  padding: 0 6px 0 4px;
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  font-family: inherit;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.post-content .mg-zoom.is-on .mg-zoom-btn { display: inline-flex; }
.post-content .mg-zoom-btn svg { width: 11px; height: 11px; display: block; margin-right: 3px; }
.post-content .mg-zoom-btn::after { content: "拡大"; }
.post-content .mg-zoom-btn::before { content: ""; position: absolute; left: -9px; right: -9px; top: -9px; bottom: -9px; }
.post-content .mg-zoom-btn:hover { background: #f2f2f2; }
.post-content .mg-zoom-btn:focus-visible { outline: 2px solid #d35352; outline-offset: 2px; }
.pswp { --pswp-bg: #141f34; }