/* ============================================================
   記事本文のスタイル（表示側と、投稿の編集画面の両方で使う）

   なぜ別ファイルなのか
     親テーマには、記事本文用のCSSがほぼ無い。
     `.gutenberg` の定義は `h2 { margin-bottom:20px; line-height:1.4 }` の1つだけで、
     p・ul・ol・見出し・表・画像には何も当たっていない。
     ブロックエディタで作る前提で、ブロック側のCSSに任せる作りになっているため。

     そのままだと、旧サイトから移した素のHTMLは
     「段落の間隔ゼロ・行間が詰まる・箇条書きの印が出ない」状態で出る。
     原稿の記事詳細ページを実測した値を、ここで当てている。

         原稿          テーマ既定
         本文 14px      14px      … 一致
         行送り 24px    21px      … 詰まっている（1.5 → 1.75 に）
         段落の下 24px   0px       … 段落が繋がって見える
         本文幅 630px    640px     … ほぼ一致

   なぜセレクタを2つ書くのか
     同じ見た目を「表示側」と「投稿の編集画面」の両方に効かせるため。
     入れ物のクラスが違うので、両方を並べている。

         .news_text_block .gutenberg  … 表示側（テーマの single.php）
         .editor-styles-wrapper       … 投稿の編集画面（WordPressが付ける）

     こう書いておけば、編集中の見た目と公開後の見た目がそろう。
     読み込みは mu-plugins/toa-genkou.php の enqueue_block_assets から。

   ここを直すと、表示側と編集画面の両方が同時に変わる。
   ============================================================ */

/* ---- 本文の土台 ---- */
.news_text_block .gutenberg,
.editor-styles-wrapper {
	font-size: 14px;
	line-height: 1.75;
}

/* ---- 段落 ---- */
.news_text_block .gutenberg p,
.editor-styles-wrapper p {
	margin: 0 0 1.7em;          /* 原稿の段落間 = 1行分（約24px） */
	line-height: 1.75;
}
.news_text_block .gutenberg p:last-child,
.editor-styles-wrapper p:last-child { margin-bottom: 0; }

/* ---- 見出し（旧記事に出てくる） ---- */
.news_text_block .gutenberg h3,
.news_text_block .gutenberg h4,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	margin: 2.2em 0 .8em;
}
.news_text_block .gutenberg h3:first-child,
.news_text_block .gutenberg h4:first-child,
.editor-styles-wrapper h3:first-child,
.editor-styles-wrapper h4:first-child { margin-top: 0; }

/* ---- 箇条書き ----
   テーマのリセットが li に list-style:none を当てているので、
   親（ul/ol）ではなく li に直接指定しないと印が出ない。 */
.news_text_block .gutenberg ul,
.news_text_block .gutenberg ol,
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
	margin: 0 0 1.7em;
	padding-left: 1.6em;
}
.news_text_block .gutenberg ul > li,
.editor-styles-wrapper ul > li { list-style: disc outside; }
.news_text_block .gutenberg ol > li,
.editor-styles-wrapper ol > li { list-style: decimal outside; }
.news_text_block .gutenberg li,
.editor-styles-wrapper li { margin-bottom: .4em; line-height: 1.75; }

/* ---- 画像 ----
   旧記事は width 属性で原寸を決め打ちしていたものが多い。
   移設時に属性は外しているが、念のため本文幅に収める。 */
.news_text_block .gutenberg img,
.editor-styles-wrapper img {
	max-width: 100%;
	height: auto;
}
.news_text_block .gutenberg figure,
.editor-styles-wrapper figure { margin: 0 0 1.7em; }
.news_text_block .gutenberg .wp-caption,
.editor-styles-wrapper .wp-caption { max-width: 100%; }
.news_text_block .gutenberg .wp-caption-text,
.editor-styles-wrapper .wp-caption-text {
	font-size: 12px;
	color: #666;
	margin-top: .5em;
	line-height: 1.6;
}

/* ---- 本文中のリンク ---- */
.news_text_block .gutenberg a,
.editor-styles-wrapper a {
	color: var(--site-main-color, #3F7AB1);
	text-decoration: underline;
}
.news_text_block .gutenberg a:hover,
.editor-styles-wrapper a:hover { opacity: .7; }

/* ---- 表 ----
   移設スクリプトが <table> を .toa-tblwrap で包む。
   中身の都合で本文幅を超えることがあるので、横スクロールさせる
   （スマホで画面からはみ出さないように）。 */
.toa-tblwrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1.7em;
}
.toa-tblwrap table {
	border-collapse: collapse;
	min-width: 100%;
}
.toa-tblwrap th,
.toa-tblwrap td {
	border: 1px solid #ddd;
	padding: .6em .9em;
	vertical-align: top;
}
.toa-tblwrap th { background: #f5f7fa; font-weight: bold; }

/* 包まれていない表（編集画面で新しく作ったものなど）も同じ見た目に */
.news_text_block .gutenberg > table,
.editor-styles-wrapper > table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 1.7em;
}
.news_text_block .gutenberg > table th,
.news_text_block .gutenberg > table td,
.editor-styles-wrapper > table th,
.editor-styles-wrapper > table td {
	border: 1px solid #ddd;
	padding: .6em .9em;
	vertical-align: top;
}