に、従来のニュース用の共通CSS（公式サイトの common.css・sp.css、
TOSプレビューの official-preview-common.css にある `#news_sigle_content a { color: #333; }`）が
当たっており、IDセレクタのため `.wysiwyg-body a` やボタンの白文字（.cta-button-link）より
優先されていた。同じIDを含めた指定で上書きする。記事管理（.article-page-body）はこのIDを
使っていないため元から青・白で表示されており、対象外。
KEEP IN SYNC WITH: tos・to-official-site の public/css/wysiwyg-body.css。 */
#news_sigle_content.wysiwyg-body a { color: #4f46e5; }
#news_sigle_content.wysiwyg-body a.cta-button-link { color: #fff; }
.wysiwyg-body h2.heading-highlight,
.wysiwyg-body h3.heading-highlight { background-color: #00cbbc; padding: 0.1em 0.3em; display: inline-block; }
/* 要望NO.34（記事管理）と同じハイライト色パレット。ニュースでも同じ色を選べるようにするため、
tos の resources/css/app.css（編集画面）・tos の本ファイル（TOSのプレビュー）・
to-official-site の本ファイル（公開ページ）の3箇所に同じクラスを置く。
色を増やしたら tos の resources/js/editor/highlightColors.js を含めた全箇所に入れること。
既定色は記事と揃えて #00cbbc にした（従来は #fef08a）。 */
.wysiwyg-body h2.heading-highlight-yellow,
.wysiwyg-body h3.heading-highlight-yellow { background-color: #fef08a; }
.wysiwyg-body h2.heading-highlight-pink,
.wysiwyg-body h3.heading-highlight-pink { background-color: #fbcfe8; }
.wysiwyg-body h2.heading-highlight-blue,
.wysiwyg-body h3.heading-highlight-blue { background-color: #bfdbfe; }
.wysiwyg-body h2.heading-highlight-gray,
.wysiwyg-body h3.heading-highlight-gray { background-color: #e5e7eb; }
.wysiwyg-body p.annotation { color: #767676; font-size: 0.8125em; }
.wysiwyg-body div.box { border: 1px solid #d1d5db; border-radius: 6px; padding: 0.75em; margin: 0 0 0.9em; }
/* #36 囲みの上下余白が均等ではないという報告への対応。paddingは子要素との
margin collapseをブロックするため、最後の子自身の下マージンがbox自体の
padding-bottomにそのまま積み増しされ、下側だけ上側のおよそ2倍の余白に
なっていた。最後の子のmargin-bottomを打ち消し、paddingだけで上下均等に
なるようにする。tos側の.tiptap-editor-contentと揃えること。 */
.wysiwyg-body div.box > *:last-child { margin-bottom: 0; }
/* 要望NO.23 画像の横並び（imageRow.js）。
KEEP IN SYNC WITH: tos resources/css/app.css、tos/to-official-site の
public/css/article-page-body.css、to-official-site の
public/css/wysiwyg-body.css。 */
.wysiwyg-body div.img-row {
display: flex;
flex-wrap: wrap;
gap: 0.75em;
align-items: flex-start;
margin: 0 0 0.9em;
}
.wysiwyg-body div.img-row img { flex-grow: 0; flex-shrink: 1; min-width: 180px; width: auto; margin: 0; }
/* 客先追加報告（要望NO.23の続報）: 折り返して余った1枚だけflex-growで
画面いっぱいに伸びてしまう問題への対応。行の想定枚数ごとに固定の割合
（gapの分を差し引いた均等割り）を明示し、折り返して1枚だけになっても
その画像自身は伸びずに同じ幅のまま表示されるようにする。 */
.wysiwyg-body div.img-row.img-row-2 img { flex-basis: calc(50% - 0.375em); }
.wysiwyg-body div.img-row.img-row-3 img { flex-basis: calc(33.333% - 0.5em); }
.wysiwyg-body div.img-row.img-row-4 img { flex-basis: calc(25% - 0.5625em); }
/* 客先追加報告（スマホ2列表示）: スマホ幅では枚数(2〜4枚)に関わらず常に2枚ずつ
並べてほしいという要望。公式サイトTOPのニュースは参考にならない（あちらは
Slickの横スクロールで、行の折り返しではない）ため、ここは単純に幅を固定で
50%にする独自対応。奇数枚の最後の1枚はflex-grow:0のおかげで伸びずに
半分の幅のまま次の行に単独で表示される。
KEEP IN SYNC WITH: tos resources/css/app.css・public/css/article-page-body.css、
to-official-site の public/css/wysiwyg-body.css・public/css/article-page-body.css。 */
@media (max-width: 600px) {
.wysiwyg-body div.img-row.img-row-2 img,
.wysiwyg-body div.img-row.img-row-3 img,
.wysiwyg-body div.img-row.img-row-4 img {
min-width: 0;
flex-basis: calc(50% - 0.375em);
}
}
.wysiwyg-body div.img-caption { width: 60%; margin: 0 auto 0.9em; }
.wysiwyg-body div.img-caption img { display: block; width: 100%; margin: 0; }
.wysiwyg-body div.img-caption p.img-caption-text { text-align: center; font-size: 0.875em; color: #6b7280; margin: 0.5em 0 0; }
.wysiwyg-body p.cta-button { text-align: center; margin: 1.5em 0; }
/* #37 本文・見出し・囲み・ボタンの左寄せ・中央寄せ・右寄せ対応。
p.cta-button.align-* のように対象タグ+既存クラスと組み合わせているのは、
.cta-button自体が持つ既定のtext-align: centerに対し、詳細度で確実に
勝つようにするため。tos側の.tiptap-editor-contentと揃えること。 */
.wysiwyg-body p.align-left,
.wysiwyg-body h2.align-left,
.wysiwyg-body h3.align-left,
.wysiwyg-body div.box.align-left,
.wysiwyg-body p.cta-button.align-left { text-align: left; }
.wysiwyg-body p.align-center,
.wysiwyg-body h2.align-center,
.wysiwyg-body h3.align-center,
.wysiwyg-body div.box.align-center,
.wysiwyg-body p.cta-button.align-center { text-align: center; }
.wysiwyg-body p.align-right,
.wysiwyg-body h2.align-right,
.wysiwyg-body h3.align-right,
.wysiwyg-body div.box.align-right,
.wysiwyg-body p.cta-button.align-right { text-align: right; }
.wysiwyg-body .cta-button-link {
display: inline-block;
padding: 0.6em 2em;
background: #4f46e5;
color: #fff;
text-decoration: none;
border-radius: 9999px;
font-weight: 600;
}
/* 保存済みHTMLに .tableWrapper は存在しない（TipTapのNodeView専用の産物で、
editor.getHTML() の出力には含まれない）。display:block にすると表のレイアウト
アルゴリズムが shrink-to-fit になり width:100% が効かなくなるため、素の
のままにしてエディタ側の描画と揃える。 */
/* #20 列幅が内容量で決まってしまい、強調不要な列が目立つという要望対応。
table-layout: fixed により、列幅を明示していない表は自動的に均等幅になる
（内容の量に左右されない）。ドラッグでの個別列幅指定（colgroup/col）は
table-layout: fixed でも引き続き有効。tos側の.tiptap-editor-contentと
揃えること。 */
.wysiwyg-body table { border-collapse: collapse; width: 100%; table-layout: fixed; margin-bottom: 0.9em; }
.wysiwyg-body td, .wysiwyg-body th {
border: 1px solid #d1d5db;
padding: 0.5em 0.75em;
text-align: left;
vertical-align: top;
/* #37のPRレビューで指摘: table-layout: fixedの下では、URLや英単語の
ように途中にスペースの無い長いトークンは折り返されずセルからはみ
出す。tos側の.tiptap-editor-contentと揃えること。 */
overflow-wrap: break-word;
}
.wysiwyg-body th { background: #f3f4f6; font-weight: 600; }
/* #20 セル内文字が常に左寄せになるという要望対応。tos側table.jsのalign属性
（setCellAttribute経由）が出力するclass。 */
.wysiwyg-body td.text-center, .wysiwyg-body th.text-center { text-align: center; }
.wysiwyg-body td.text-right, .wysiwyg-body th.text-right { text-align: right; }