/* =============================================================================
 * md2025 テーマ追加スタイル（common.css を補完）
 * ブログ single / archive 用の要素（投稿メタ・前後ナビ・ページャ・サイドバー）。
 * 配色はリニューアル共通の緑系（#749b00 / #e9fad4 / 文字 #333）に合わせる。
 * ========================================================================== */

/* --- 記事タイトル（ブログ詳細：白いコンテンツ内・日付の上の h1）。本文の小見出し(36px)より小さくしない --- */
.main_content .post_title {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.5;
	/* 上下だけ指定する。左右は共通 h2 の値（左 -1ex で文字頭を本文にそろえ、右 1.8em に鉛筆の飾り）を使う。
	   margin: 0 0 0.9em と書くと右が 0 になり、2 行に折り返したとき鉛筆が白い枠の外へ出る */
	margin-top: 0;
	margin-bottom: 0.9em;
	color: #333;
}
@media only screen and (max-width: 767px) {
	.main_content .post_title { font-size: 1.5rem; }
}

/* --- 投稿メタ（日付・カテゴリ） --- */
.main_content .post_meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 0 0 1.6em;
	font-size: 0.9rem;
}
.main_content .post_meta .wp-block-post-date,
.main_content .post_meta time {
	color: #888;
	font-weight: 500;
}
.main_content .post_meta .wp-block-post-terms { margin: 0; }
.main_content .post_meta .wp-block-post-terms a {
	display: inline-block;
	padding: 2px 12px;
	background: #e9fad4;
	color: #4f6b00;
	border-radius: 999px;
	font-size: 0.85em;
	text-decoration: none;
	transition: 0.2s background;
}
.main_content .post_meta .wp-block-post-terms a:hover { background: #d8f3b6; }

/* --- アイキャッチ --- */
.main_content .wp-block-post-featured-image { margin: 0 0 1.6em; }
.main_content .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* --- 本文中の画像 ---
 * 古い記事の画像は width/height 属性やインライン style の height を持ったまま max-width で幅だけ縮み、
 * 縦横に引き伸ばされて表示されていた（Lighthouse「不適切なアスペクト比の画像」）。
 * インライン style より優先させるため !important で高さを幅に追従させる。 */
.main_content .wp-block-post-content img {
	max-width: 100%;
	height: auto !important;
}

/* --- 前後記事ナビ --- */
.main_content .post_nav {
	display: flex;
	gap: 12px;
	margin-top: 2.6em;
	padding-top: 1.6em;
	border-top: 1px solid #eee;
}
.main_content .post_nav .wp-block-post-navigation-link { flex: 1 1 0; min-width: 0; }
.main_content .post_nav a {
	display: block;
	padding: 12px 16px;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	text-decoration: none;
	color: #333;
	transition: 0.2s all;
}
.main_content .post_nav a:hover { border-color: #749b00; color: #749b00; }
.main_content .post_nav .post-navigation-link-next { text-align: right; }

/* --- ページネーション（[md_topics_list] の .pager） --- */
.pager { margin: 2.6em 0 0; }
.pager .page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 0;
	margin: 0;
}
.pager .page-numbers li { margin: 0; padding: 0; }
.pager .page-numbers a,
.pager .page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	text-decoration: none;
	color: #333;
	box-sizing: border-box;
	transition: 0.2s all;
}
.pager .page-numbers a:hover { border-color: #749b00; color: #749b00; }
.pager .page-numbers .current {
	background: #749b00;
	border-color: #749b00;
	color: #fff;
	font-weight: 700;
}

/* --- ブログサイドバーの見た目は common.css の「ブログのサイドバー」（一覧 /blog/ と共通） --- */

/* --- サイドバーと本文(.main_content)の間隔（ブログ詳細などの下層） --- */
/* aside 既定の右マージン10pxだけでは詰まるため flex gap で間隔を確保（左端の位置は common.css の .main_body_column） */
.main_body_column { gap: 40px; }
.main_body_column > aside { margin-right: 0; }
@media only screen and (min-width: 960px) and (max-width: 1279px) {
	.main_body_column { gap: 28px; }
}

/* サイドバー追従（position:sticky）は common.css の「ブログのサイドバー」にある */

/* ===== 公開前チェックの修正（ブログ・お知らせの記事ページ） ===== */
/* サイドバーと本文の幅を記事の内容に左右されないようにする。本文が短くてもサイドバーの高さまで伸ばさない */
@media only screen and (min-width: 960px) {
	.main_body_column > aside {
		flex: 0 0 293px;
		min-width: 0;
	}
	.main_body_column > .main_content {
		flex: 1 1 0;
		min-width: 0;
		align-self: flex-start;
	}
}
/* サイドバー「新しい記事」の日付：緑地の上でも読める濃さにする */
.main_body_column > aside ul.recent_list li .r_date { color: #333; }

/* 本文の画像：古い記事のインライン max-width（500px など）で本文の幅を超えないようにする */
.main_content .wp-block-post-content img { max-width: 100% !important; }
.main_content .wp-block-post-content img.aligncenter {
	display: block;
	margin-inline: auto;
}
/* 本文の最終行が1〜2字だけにならないように */
.entry-content p { text-wrap: pretty; }
/* 中身のない段落（PHP 側 md2025_filter_post_content_layout で消せないものの保険） */
.entry-content p:empty { display: none; }
/* 旧記事の見出しに残ったインライン装飾（赤い縦線・灰色・22px）を新しい見出しの装飾に合わせる */
.entry-content :is(h2, h3, h4, h5, h6) span[style] {
	color: inherit !important;
	font-size: inherit !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}
.entry-content :is(h2, h3, h4, h5, h6) br:last-child { display: none; }
/* 表：セルが1文字単位まで潰れて数字や英単語が途中で割れないようにする。金額の列は折らない */
.entry-content :is(td, th) { overflow-wrap: break-word; }
.entry-content td.has-text-align-right { white-space: nowrap; }

@media only screen and (max-width: 959px) {
	/* カードの下端が次のお問い合わせ写真に密着しないように */
	main > .main_body_column { padding-bottom: 60px; }
}
@media only screen and (max-width: 767px) {
	/* 小見出しを少し小さくして、鉛筆の飾り分で細切れに折れないようにする（タイトル 24px より小さく） */
	.main_content :is(h3, h4, h5, h6).is-style-h2,
	.entry-content h2 { font-size: 20px; }
	/* カテゴリのピル：押せる高さを取る */
	.main_content .post_meta .wp-block-post-terms a { padding: 10px 14px; line-height: 1.2; }
}