/* ============================================================
   記事本文の画像スタイル
   公開ページ(.box-post-01)と管理画面エディタ(.editor-area)で共有し、
   入力画面がそのまま実際の配置プレビューになるようにする
   ============================================================ */

/* 連続した英数字などの折り返せない長文でも枠内で折り返す */
.box-post-01,
.editor-area {
  overflow-wrap: break-word;
  word-break: break-word;
}

.box-post-01 img,
.editor-area img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
  margin: 1.2em auto;
  /* テーマが img { pointer-events: none } を全体指定しているため、クリック可能に戻す */
  pointer-events: auto;
}

/* サイズ(大=全幅はデフォルト) */
.box-post-01 img.img-s,
.editor-area img.img-s { width: 33%; }
.box-post-01 img.img-m,
.editor-area img.img-m { width: 50%; }

/* 表示位置(縦長画像などで枠に映す部分を選ぶ) */
.box-post-01 img.img-pos-t,
.editor-area img.img-pos-t { object-position: 50% 0%; }
.box-post-01 img.img-pos-b,
.editor-area img.img-pos-b { object-position: 50% 100%; }

/* 配置 */
.box-post-01 img.img-left,
.editor-area img.img-left { float: left; margin: 0.4em 1.6em 1em 0; }
.box-post-01 img.img-right,
.editor-area img.img-right { float: right; margin: 0.4em 0 1em 1.6em; }
.box-post-01 img.img-center,
.editor-area img.img-center { float: none; margin-left: auto; margin-right: auto; }

/* 回り込み解除 */
.box-post-01::after,
.editor-area::after { content: ""; display: block; clear: both; }

/* スマホでは回り込みをやめて全幅表示 */
@media screen and (max-width: 599px) {
  .box-post-01 img,
  .editor-area img {
    width: 100% !important;
    float: none !important;
    margin: 1em 0;
  }
}