@charset "utf-8";
/*
 * コラム（お役立ち情報）の一覧・記事
 *
 * 現行の /column/ は配布テーマ（liquid-light）で作られているので、そのCSSは使えない。
 * ここは自前で持つ（ゆうなぎのお知らせと同じ考え方）。
 * 色はサイトに合わせる: 見出しの緑 #599602 ／ サイトカラーの赤 #E83828
 * 本文の中の配置クラス（aligncenter 等）は base.css で定義してある（共通の教訓21）
 */

.af-column { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; }

/* パンくず */
.af-crumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; font-size: 14px; }
.af-crumb li + li::before { content: "＞"; margin-right: 6px; color: #999; }
.af-crumb a { color: #555; text-decoration: underline; width: auto; }

/* 見出し */
.af-column__head { margin: 0 0 24px; }
.af-column__h1 { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.4; margin: 0 0 8px; padding: 0 0 8px 12px; border-left: 6px solid #599602; border-bottom: 1px solid #ddd; }
.af-column__lead { margin: 0; color: #555; font-size: 15px; line-height: 1.8; }

/* カテゴリの絞り込みと検索 */
.af-colnav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin: 0 0 28px; }
.af-colnav__cats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.af-colnav__cats a { display: inline-block; padding: 7px 16px; border: 1px solid #cfcfcf; border-radius: 999px; font-size: 15px; color: #333; text-decoration: none; width: auto; background: #fff; }
.af-colnav__cats a:hover { border-color: #599602; color: #599602; }
.af-colnav__cats .is-current a { background: #599602; border-color: #599602; color: #fff; }
.af-colnav__cats span { font-size: 11px; opacity: .8; color: inherit; }	/* 件数の色はボタンの文字色に合わせる（reset.css が span に直接 #555 を当てているため。2026-09-26 v0.12.3） */
.af-colnav__search { display: flex; gap: 6px; }
.af-colnav__search input { padding: 8px 12px; border: 1px solid #cfcfcf; border-radius: 4px; font-size: 15px; min-width: 200px; }
.af-colnav__search button { padding: 8px 18px; border: 0; border-radius: 4px; background: #599602; color: #fff; font-size: 15px; cursor: pointer; width: auto; height: auto; }

/* カード */
.af-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; }
.af-cards::before, .af-cards::after { display: none; content: none; }	/* 共通の教訓29・33 */
.af-card { background: #fff; }
.af-card__link { display: block; text-decoration: none; color: inherit; width: auto; }
.af-card__img { aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; background: #f2f2f2; border-radius: 6px; }
.af-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-card__body { padding: 10px 2px 0; }
.af-card__date { margin: 0 0 4px; font-size: 13px; color: #888; }
.af-card__title { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 600; }
.af-card__link:hover .af-card__title { color: #599602; }
.af-card__cats { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.af-card__cats a { font-size: 11px; color: #599602; border: 1px solid #cde3b2; border-radius: 3px; padding: 2px 8px; text-decoration: none; width: auto; }

@media screen and (max-width: 1100px) { .af-cards { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 780px)  { .af-cards { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } }
@media screen and (max-width: 420px)  { .af-cards { grid-template-columns: 1fr; } }

/* ページ送り */
.af-pager { display: flex; justify-content: center; gap: 6px; margin: 40px 0 0; }
.af-pager .page-numbers { display: inline-block; min-width: 38px; padding: 8px 10px; text-align: center; border: 1px solid #cfcfcf; border-radius: 4px; text-decoration: none; color: #333; font-size: 16px; width: auto; }
.af-pager .page-numbers.current { background: #599602; border-color: #599602; color: #fff; }
.af-empty { margin: 32px 0; font-size: 17px; }

/* ------------------------------------------------------------------
 * 記事
 * ------------------------------------------------------------------ */
.af-article { max-width: 760px; margin: 0 auto; }
.af-article__date { margin: 0 0 6px; font-size: 14px; color: #888; }
.af-article__cats { margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.af-article__cats a { font-size: 13px; color: #599602; border: 1px solid #cde3b2; border-radius: 3px; padding: 3px 10px; text-decoration: none; width: auto; }
.af-article__thumb { margin: 0 0 28px; }
.af-article__thumb img { width: 100%; height: auto; border-radius: 6px; display: block; }

/* ★★PCの本文を 16px → 18px にした（2026-09-12 門田さん「PCの文字が小さくて読みづらい。
   年配の方がターゲット」）。1行あたり 48文字 → 42文字 になり、日本語として読みやすい幅に入る。
   ★下の p / li / td の行はこの箱の指定だけでは効かない。
     現行から引き継いだ reset.css が **p などに直接** color:#555 / line-height:1.8 を当てており、
     継承より直接の指定が勝つため（2026-09-12 にブラウザで実測して分かった）。
     だから同じ値をここで名指しし直している。 */
.af-article__body { font-size: 18px; line-height: 1.9; color: #333; }
.af-article__body p, .af-article__body li, .af-article__body dt, .af-article__body dd,
.af-article__body th, .af-article__body td { line-height: 1.9; color: #333; }
.af-article__body p { margin: 0 0 1.6em; }
.af-article__body h2 { font-size: 24px; line-height: 1.5; margin: 2.4em 0 .9em; padding: 8px 0 8px 14px; border-left: 6px solid #599602; background: #f7faf2; }
.af-article__body h3 { font-size: 21px; line-height: 1.5; margin: 2em 0 .8em; padding-bottom: 6px; border-bottom: 2px solid #cde3b2; }
.af-article__body h4 { font-size: 18px; margin: 1.8em 0 .6em; }
.af-article__body ul, .af-article__body ol { margin: 0 0 1.6em; padding-left: 1.6em; }
.af-article__body ul { list-style: disc; }
.af-article__body ol { list-style: decimal; }
.af-article__body li { margin: 0 0 .5em; }
.af-article__body a { color: #1a6fb5; text-decoration: underline; width: auto; }
.af-article__body img { max-width: 100%; height: auto; border-radius: 4px; }
.af-article__body strong { font-weight: 700; }
.af-article__body blockquote { margin: 0 0 1.6em; padding: 14px 18px; background: #f6f6f6; border-left: 4px solid #ccc; }
.af-article__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: 17px; }
.af-article__body th, .af-article__body td { border: 1px solid #ddd; padding: 8px 10px; }
.af-article__body th { background: #f4f7ee; }

/* 前後の記事 */
.af-prevnext { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; max-width: 760px; margin: 48px auto 0; }
.af-prevnext a { flex: 1 1 45%; min-width: 240px; padding: 14px 16px; border: 1px solid #e0e0e0; border-radius: 6px; text-decoration: none; color: #333; font-size: 16px; line-height: 1.6; width: auto; }
.af-prevnext a:hover { border-color: #599602; color: #599602; }
.af-prevnext span { display: block; font-size: 13px; color: #888; margin-bottom: 4px; }
.af-prevnext__next { text-align: right; }

.af-backlist { max-width: 760px; margin: 28px auto 0; text-align: center; }
.af-backlist a { display: inline-block; padding: 12px 32px; background: #599602; color: #fff; border-radius: 999px; text-decoration: none; font-size: 17px; width: auto; }

.af-relhead { max-width: 1100px; margin: 64px auto 20px; font-size: 22px; padding: 0 0 8px 12px; border-left: 6px solid #E83828; border-bottom: 1px solid #ddd; }

/* ★★スマホは今までどおりの大きさに保つ（2026-09-12 門田さん「スマホ画面は良いが、PCが小さい」）。
   上で大きくしたぶんを、ここで元の値に戻している。触ったのはPC幅だけ。
   ただし本文の色（#555→#333）と行間だけは、幅に関係なく読みやすい側にそろえた。 */
@media screen and (max-width: 780px) {
	.af-article__body { font-size: 15px; }
	.af-article__body h2 { font-size: 19px; }
	.af-article__body h3 { font-size: 17px; }
	.af-article__body h4 { font-size: 17px; }
	.af-article__body table { font-size: 15px; }
	.af-article__date { font-size: 13px; }
	.af-article__cats a { font-size: 12px; }
	.af-column__lead { font-size: 14px; }
	.af-crumb ol { font-size: 13px; }
	.af-colnav__cats a { font-size: 13px; padding: 6px 14px; }
	.af-colnav__search input { font-size: 14px; padding: 7px 12px; }
	.af-colnav__search button { font-size: 14px; padding: 7px 16px; }
	.af-card__title { font-size: 15px; }
	.af-card__date { font-size: 12px; }
	.af-pager .page-numbers { font-size: 14px; }
	.af-prevnext a { font-size: 14px; }
	.af-prevnext span { font-size: 12px; }
	.af-backlist a { font-size: 15px; }
	.af-relhead { font-size: 20px; }
	.af-empty { font-size: 15px; }
	.af-prevnext__next { text-align: left; }
}