/*
 * 記事本文の装飾（このテーマで書いたもの。10/9）
 *
 * 今の記事は LeadGrid の編集画面（Froala という編集ソフト）で書かれていて、本文に fr- で始まる印が付いている。
 * 今のサイトは Froala の CSS を読んで見え方を決めていたが、LeadGrid 側の部品なので新サイトでは使わず、
 * 本文が実際に使っている分（2026-10-09 に記事81本で確認：表の線と見出しの背景、太字、画像の並べ方）だけを同じ見え方で書いた。
 * 読む順番は今と同じ（template.css より前）。template.css の指定が優先される所も今と同じになる
 */

/* 本文全体：長い英数字も枠の中で折り返す */
.fr-view { overflow-wrap: break-word; }
.fr-view strong { font-weight: 700; }

/* 表：線は薄いグレー、見出しのセルは薄いグレーの背景。fr-thick は線を太く */
.fr-view table { border: none; border-collapse: collapse; empty-cells: show; max-width: 100%; }
.fr-view table td { min-width: 5px; }
.fr-view table td,
.fr-view table th { border: 1px solid #ddd; }
.fr-view table td.fr-thick,
.fr-view table th.fr-thick { border-width: 2px; }
.fr-view table th { background: #ececec; }

.fr-view pre { white-space: pre-wrap; overflow-wrap: break-word; overflow: visible; }

/*
 * 画像。本文の中の画像（.fr-view img）と、画像そのものに fr-view が付いている場合（img.fr-view）の両方
 * fr-dib … 1行に1枚（上下に少し余白、左右中央）／ fr-dii … 文と同じ行に並べる ／ fr-fil … 左寄せ
 */
.fr-view img { position: relative; max-width: 100%; }
.fr-view img.fr-dib { display: block; float: none; vertical-align: top; margin: 5px auto; }
.fr-view img.fr-dib.fr-fil { margin-left: 0; text-align: left; }
.fr-view img.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px; max-width: calc(100% - 10px); }
.fr-view img.fr-dii.fr-fil { float: left; margin: 5px 5px 5px 0; max-width: calc(100% - 5px); }

img.fr-view { position: relative; max-width: 100%; }
img.fr-view.fr-dib { display: block; float: none; vertical-align: top; margin: 5px auto; }
img.fr-view.fr-dib.fr-fil { margin-left: 0; text-align: left; }
img.fr-view.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px; max-width: calc(100% - 10px); }
img.fr-view.fr-dii.fr-fil { float: left; margin: 5px 5px 5px 0; max-width: calc(100% - 5px); }