/*
 * 記事本文の画像の配置スタイル。
 *
 * テーマ側に次の指定があり、本文中のすべての画像が強制的に幅100%になる。
 *   #article-detail .main .inner .article-detail .wrap .contents .content img { width: 100%; }
 * 幅100%の画像の横にはテキストが入らないため、回り込みが成立しない。
 * さらに WordPress の配置クラスがテーマに一切定義されていない。
 *
 * 対象は配置クラスの付いた画像のみ。
 * 配置を指定していない画像は従来どおり幅100%のままなので、既存記事は変わらない。
 *
 * 【幅の指定に !important を使わない理由】
 * !important はインラインスタイルより強い。幅に付けてしまうと
 *   ・エディタ内では、TinyMCE がドラッグ中に設定する style="width:..." を打ち消し、
 *     画像のサイズ変更ができなくなる
 *   ・フロント側では、保存されたサイズ指定を打ち消し、元の大きさで表示される
 * そのため幅だけはテーマと同等の詳細度（ID を含むセレクタ）で上書きし、
 * 作者が指定したサイズが最終的に勝つようにしている。
 *
 * 一方 float や margin はサイズ変更に関与しないため !important で問題ない。
 * これらのセレクタは ID を含まないため、エディタ内でも有効になる。
 */

/* ============================================================
 * 1. 回り込み（フロント・エディタ共通）
 *    テーマに float の定義が無いので、ここで初めて指定する。
 * ============================================================ */

/* --- 左寄せ（テキストは右側に回り込む） --- */
img.alignleft,
.wp-caption.alignleft {
  float: left !important;
  margin: 0.5em 1.6em 1em 0 !important;
  clear: left;
}

/* --- 右寄せ（テキストは左側に回り込む） --- */
img.alignright,
.wp-caption.alignright {
  float: right !important;
  margin: 0.5em 0 1em 1.6em !important;
  clear: right;
}

/* --- 中央揃え（回り込みなし） --- */
img.aligncenter,
.wp-caption.aligncenter {
  display: block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

img.alignnone {
  float: none !important;
}

/* ============================================================
 * 2. 幅の解除（フロント側のみ・!important なし）
 *    ID を含むセレクタなので、エディタ内では一致せず
 *    TinyMCE のサイズ変更を妨げない。
 * ============================================================ */

#article-detail .main .inner .article-detail .wrap .contents .content img.alignleft,
#article-detail .main .inner .article-detail .wrap .contents .content img.alignright,
#article-detail .main .inner .article-detail .wrap .contents .content img.aligncenter,
#article-detail .main .inner .article-detail .wrap .contents .content img.alignnone,
#article-detail .main .inner .article-detail .wrap .contents .content .wp-caption.alignleft img,
#article-detail .main .inner .article-detail .wrap .contents .content .wp-caption.alignright img,
#article-detail .main .inner .article-detail .wrap .contents .content .wp-caption.aligncenter img,
#member .main .inner .article-detail .wrap .contents .content img.alignleft,
#member .main .inner .article-detail .wrap .contents .content img.alignright,
#member .main .inner .article-detail .wrap .contents .content img.aligncenter,
#member .main .inner .article-detail .wrap .contents .content img.alignnone,
#member .main .inner .article-detail .wrap .contents .content .wp-caption.alignleft img,
#member .main .inner .article-detail .wrap .contents .content .wp-caption.alignright img,
#member .main .inner .article-detail .wrap .contents .content .wp-caption.aligncenter img,
#profile .main .inner .article-detail .wrap .contents .content img.alignleft,
#profile .main .inner .article-detail .wrap .contents .content img.alignright,
#profile .main .inner .article-detail .wrap .contents .content img.aligncenter,
#profile .main .inner .article-detail .wrap .contents .content img.alignnone,
#profile .main .inner .article-detail .wrap .contents .content .wp-caption.alignleft img,
#profile .main .inner .article-detail .wrap .contents .content .wp-caption.alignright img,
#profile .main .inner .article-detail .wrap .contents .content .wp-caption.aligncenter img,
#project .main .inner .article-detail .wrap .contents .content img.alignleft,
#project .main .inner .article-detail .wrap .contents .content img.alignright,
#project .main .inner .article-detail .wrap .contents .content img.aligncenter,
#project .main .inner .article-detail .wrap .contents .content img.alignnone,
#project .main .inner .article-detail .wrap .contents .content .wp-caption.alignleft img,
#project .main .inner .article-detail .wrap .contents .content .wp-caption.alignright img,
#project .main .inner .article-detail .wrap .contents .content .wp-caption.aligncenter img,
#applicant .main .inner .article-detail .wrap .contents .content img.alignleft,
#applicant .main .inner .article-detail .wrap .contents .content img.alignright,
#applicant .main .inner .article-detail .wrap .contents .content img.aligncenter,
#applicant .main .inner .article-detail .wrap .contents .content img.alignnone,
#applicant .main .inner .article-detail .wrap .contents .content .wp-caption.alignleft img,
#applicant .main .inner .article-detail .wrap .contents .content .wp-caption.alignright img,
#applicant .main .inner .article-detail .wrap .contents .content .wp-caption.aligncenter img,
#result .main .inner .article-detail .wrap .contents .content img.alignleft,
#result .main .inner .article-detail .wrap .contents .content img.alignright,
#result .main .inner .article-detail .wrap .contents .content img.aligncenter,
#result .main .inner .article-detail .wrap .contents .content img.alignnone,
#result .main .inner .article-detail .wrap .contents .content .wp-caption.alignleft img,
#result .main .inner .article-detail .wrap .contents .content .wp-caption.alignright img,
#result .main .inner .article-detail .wrap .contents .content .wp-caption.aligncenter img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* ============================================================
 * 3. キャプション付き画像
 * ============================================================ */

.wp-caption {
  max-width: 100%;
}

.wp-caption img {
  display: block;
}

.wp-caption .wp-caption-text {
  margin: 0.6em 0 0;
  font-size: 1.3rem;
  line-height: 1.6;
  color: #767676;
  text-align: center;
}

/* --- 回り込みが後続の要素へはみ出さないようにする --- */
.content::after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================================
 * 4. 画面が狭いときは回り込みを解除して全幅にする
 * ============================================================ */

@media screen and (max-width: 767px) {
  img.alignleft,
  img.alignright,
  .wp-caption.alignleft,
  .wp-caption.alignright {
    float: none !important;
    margin: 1.6em 0 !important;
  }
}