@charset "UTF-8";
/**
 * お知らせ詳細ページ (single-info.php) のレイアウト調整パッチ。
 *
 * style.css は assets/_sass/ から生成されるため、直接編集しても次のビルドで
 * 消える。このファイルは SCSS のビルド対象外の素の CSS で、style.css より後に
 * 読み込まれる。お知らせ詳細まわりの調整はここに足していく。
 *
 * 読み込み: functions/theme-setup.php の enqueue_info_detail_style()
 *           is_singular('info') のときだけ出力する。
 * 適用範囲: single-info.php の <div class="entry entry--info">
 *
 * 旧サイトから移行した本文は WordPress のブロックを使わない生の HTML で、
 * 幅指定の無い <img> や URL をそのまま書いたリンクが入っている。テーマ本体の
 * .entry には img / a のスタイルが無いため、ここで補う。
 */

/* --- 画像（共通） -------------------------------------------------------
 * 旧サイトの本文には 2 種類の画像が混ざっている。
 *
 *   1. 記事の写真        例: <p><img src="…/3453.jpeg" width="100%"></p>
 *   2. 文中に挟まる絵文字 例: …ご契約となりました<img src="…/emoji/2728.png" width="18">
 *
 * 絵文字は文字の一部として行の中を流れる必要があるので、ここでは
 * はみ出し防止と縦位置合わせだけを掛ける。max-width は 18px の絵文字には
 * 効かないので、共通で置いて問題ない。
 */
.entry--info img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* --- 画像（記事の写真） -------------------------------------------------
 * 写真は段落に 1 枚だけで置かれる（wpautop が <p><img></p> に整形する）。
 * この形のときだけブロック化して中央に置き、大きさに上限を掛ける。
 *
 * :only-child だけでは絵文字を除外できない。CSS の :only-child は
 * テキストノードを数えないため、「テキスト + 絵文字1個」の段落では
 * その絵文字が :only-child に当たってしまう（実際に独立行へ飛んだ）。
 * そこで移行スクリプトが絵文字に付ける .legacy-emoji で明示的に外す。
 *
 * 幅は本文幅いっぱいまで許し、高さだけを 400px で抑える。移行元の写真は
 * 原寸のまま入っており（例: 750x1000 の縦長）、高さの上限が無いと縦長画像が
 * 画面を占有する。height:auto なので縦横比は保たれ、縦長画像は 400px の高さに
 * 収まるところまで幅も縮む。
 *
 * 大きさを変えたいときは、この 400px を触ればよい。
 */
.entry--info p > img:only-child:not(.legacy-emoji) {
  display: block;
  max-width: 100%;
  max-height: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/* --- リンク -------------------------------------------------------------
 * 下線が無いと本文に埋もれて、リンクだと気づけない。
 */
.entry--info a {
  color: #50A4A1;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  /* 移行データには URL をそのまま書いたリンクが多い。折り返せないと
     スマートフォンで横スクロールが出る。anywhere なので、はみ出す
     ときだけ折り返す（日本語のリンク文字列は不自然に切れない）。 */
  overflow-wrap: anywhere;
}

.entry--info a:hover {
  text-decoration: none;
}

/* --- 番号付きリスト ---------------------------------------------------
 * テーマ本体は .entry ol li::before に counter() を当てて番号を振るが、
 * 移行元の本文は <li>1.家事の時短化</li> のように番号を直接書いている。
 * そのまま出すと「1. 1.家事の時短化」と二重になる。
 *
 * 移行分 547 件のうち <ol> を使っているのは 1 件だけで、そこも番号は
 * 本文側に入っている。お知らせでは採番しない方が原状に合う。
 * 本文を書き換えないのは「そのまま運ぶ」原則のため。
 */
.entry--info ol {
  counter-reset: none;
  list-style: none;
}

.entry--info ol li {
  counter-increment: none;
  padding-left: 0;
}

.entry--info ol li::before {
  content: none;
}