@charset "UTF-8";

/* --- 全体コンテナ：横並び設定 --- */
.seigo-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
	margin-bottom: 50px;
	box-sizing: border-box;
	align-items: stretch;
}

/* --- カード1枚 --- */
.seigo-item {
	display: flex;
	flex-direction: column;
	flex: 0 1 calc(33.333% - 14px);
	min-width: 280px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	box-sizing: border-box;
}

/* --- 画像エリア --- */
.seigo-item__img {
	width: 100%;
	text-align: center;
	margin-bottom: 15px;
}

.seigo-item__img img {
	max-width: 140px;
	width: auto;
	height: auto !important;
	margin: 0 auto !important;
	/* trial_newの余白打ち消し */
	border: 1px solid #eee;
}

/* --- 情報エリア --- */
.seigo-item__info {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.seigo-item__info h4 {
	font-size: 0.95rem;
	color: #333;
	margin: 0 0 15px 0;
	line-height: 1.5;
	font-weight: 700;
	text-align: left;
	min-height: 4.5em;
}

/* --- ボタンエリア --- */
.seigo-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 子要素（wrap）を中央に寄せる */
	gap: 15px;
	width: 100%;
}

/* --- 【重要】ボタンと日付のセット：ここを固定幅にします --- */
.seigo-btn-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	/* ボタンの最小幅と同じ値を設定することで、日付が突き抜けるのを防ぎます */
	width: 180px;
}

/* ボタン自体の調整：中身を左右に広げる設定を追加 */
/* ベースのボタンスタイル（共通） */
.seigo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px;
	color: #fff !important;
	border-radius: 4px;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 0.9rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 正誤表ボタン：更新情報のタグ色（#e54d42）に合わせる */
.seigo-btn--red {
	background-color: #e54d42;
}

/* 補足資料ボタン：既存のオレンジ（#f39800） */
.seigo-btn--orange {
	background-color: var(--ta-orange, #f39800);
}

/* テキスト部分 */
.seigo-btn__text {
	flex-grow: 1;
	text-align: center;
	/* 中央に寄せる */
	margin-left: 20px;
	/* アイコンの幅分、左にマージンを作ると完全な中央に見えます */
}

/* アイコン（PDF）部分をバッジ風にする */
.seigo-btn__icon {
	background-color: rgba(255, 255, 255, 0.2);
	/* 白の透過背景 */
	font-size: 0.65rem;
	padding: 2px 4px;
	border-radius: 2px;
	border: 1px solid #fff;
	line-height: 1;
	margin-left: auto;
	/* 右端に寄せる */
	font-family: Arial, sans-serif;
}

/* --- 掲載日時：wrapの右端に揃える --- */
.seigo-btn__date {
	font-size: 0.72rem;
	color: #888;
	display: block;
	width: 100%;
	/* wrap（180px）の中で100% */
	text-align: right;
	/* その中で右寄せ */
	margin-top: 2px;
	white-space: nowrap;
	/* 日付の改行を防ぐ */
}

/* --- レスポンシブ --- */
@media (max-width: 640px) {
	.seigo-item {
		flex: 0 1 100%;
		min-width: 0;
	}

	/* スマホではwrapを広げて、ボタンを押しやすくする */
	.seigo-btn-wrap {
		width: 100%;
		max-width: 300px;
	}
}

/* --- 共通コンテナ（目次・更新情報） --- */
.seigo-navigation {
	display: flex;
	flex-direction: row;
	/* PCでは横並び */
	gap: 30px;
	margin: 40px 0 60px;
	padding: 25px;
	background-color: #f9fbf9;
	border: 1px solid #e0eadd;
	border-radius: 10px;
}

/* 各エリアのタイトル */
.seigo-toc__title,
.seigo-news__title {
	font-weight: bold;
	color: var(--ta-green, #008238);
	margin-bottom: 15px;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
}

.seigo-toc__title::before,
.seigo-news__title::before {
	content: "";
	width: 4px;
	height: 1.2em;
	background: var(--ta-green, #008238);
	margin-right: 10px;
	border-radius: 2px;
}

/* シリーズ目次エリア */
.seigo-toc {
	flex: 0 0 240px;
	/* 目次の幅を固定 */
}

.seigo-toc__list {
	list-style: none;
	padding: 0;
}

/* --- シリーズ目次のリスト調整 --- */
.seigo-toc__list li {
	margin-bottom: 10px;
}

.seigo-toc__list a {
	display: flex;
	/* アイコンとテキストを分離 */
	align-items: flex-start;
	/* 上揃え */
	color: #444;
	font-size: 0.95rem;
	text-decoration: none;
	line-height: 1.5;
	transition: color 0.2s;
}

/* 2行目以降の冒頭位置を揃えるための「▶」アイコン */
.seigo-toc__list a::before {
	content: "\25b6";
	/* ユニコードで▶を指定 */
	font-size: 0.65rem;
	/* テキストより少し小さく */
	color: var(--ta-green, #008238);
	flex: 0 0 1.2em;
	/* 横幅を固定して、2行目の回り込みを防ぐ */
	margin-top: 0.3em;
	/* テキストの1行目と中心が合うよう微調整 */
	display: inline-block;
}

.seigo-toc__list a:hover {
	color: var(--ta-green, #008238);
}

/* 更新情報エリア */
.seigo-news {
	flex: 1;
	/* 残りの幅をすべて使う */
}

.seigo-news__list {
	list-style: none;
	padding: 0;
}

.seigo-news__list li {
	display: flex;
	/* 横に並べて2行目以降の回り込みを防ぐ */
	gap: 15px;
	padding: 12px 0;
	border-bottom: 1px dashed #d0dcd0;
	align-items: flex-start;
}

/* 日付 */
.news-date {
	flex: 0 0 90px;
	color: #888;
	font-size: 0.85rem;
	font-family: Arial, sans-serif;
}

/* タグ：CSSで文字を自動挿入 */
.news-tag {
	flex: 0 0 54px;
}

.news-tag::before {
	display: block;
	padding: 2px 0;
	font-size: 0.75rem;
	color: #fff;
	border-radius: 3px;
	text-align: center;
	font-weight: bold;
}

.news-tag.seigo::before {
	content: "正誤";
	background: #e54d42;
}

.news-tag.hosoku::before {
	content: "補足";
	background: var(--ta-orange, #f39800);
}

/* 本文：折り返しが綺麗に揃う */
.news-text {
	flex: 1;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	text-align: left;
}

/* --- 【重要】スマホレスポンシブ --- */
@media (max-width: 820px) {
	.seigo-navigation {
		flex-direction: column;
		/* スマホでは縦並びに切り替え */
		gap: 40px;
	}

	.seigo-toc {
		flex: 1 1 auto;
		padding-bottom: 20px;
		border-bottom: 1px solid #e0eadd;
	}

	.seigo-news__list li {
		/* スマホでも「日付・タグ」の横並びを維持しつつ、本文を下に逃がす */
		flex-wrap: wrap;
		gap: 10px;
	}

	.news-text {
		flex: 0 0 100%;
		/* 文章は改行して全幅表示 */
		padding-top: 4px;
	}
}