/* インフォグラフィックブロック cs/infographic(2026-07-19)
 * 記事内=通常表示。クリックでオーバーレイ拡大、再クリック/Escで閉じる。
 * スマホ縦持ちの拡大時は90度回転して横向き表示(横長の図の字を読ませる)。
 * 対象はこのブロックのみ。通常の画像ブロックには影響しない。 */

.cs-infographic {
  margin: 2.5em auto;
  text-align: center;
}
.cs-ig-trigger {
  display: inline-block;
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
  max-width: 100%;
}
.cs-ig-trigger .cs-ig-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 拡大オーバーレイ(view側JSが生成) */
.cs-ig-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(10, 10, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.cs-ig-overlay img {
  max-width: 94vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* スマホ縦持ち: 拡大画像を90度回転し、画面の長辺(縦)を画像の横幅に使う。
 * 回転前の box は width≤94vh(回転後の横方向=画面縦)・height≤94vw(回転後の縦方向=画面横) */
@media (orientation: portrait) and (max-width: 820px) {
  .cs-ig-overlay img {
    transform: rotate(90deg);
    max-width: 94vh;
    max-height: 94vw;
  }
}