/* =========================
   ARTICLE
========================= */

.article-container {
	max-width: 900px;
	margin: 80px auto;
	padding: 0 24px;
}

.article-container h1 {
	font-size: 42px;
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 16px;
	color: #111827;
}

.article-date {
	font-size: 14px;
	color: #6B7280;
	margin-bottom: 40px;
}

/* =========================
   TOC（目次）
   <nav class="toc"> はSEOのため残し、
   共通レイアウト側の nav メニュー用スタイルを
   ここで完全に打ち消して通常の縦リストに戻す。
========================= */

/* コンテナ：絶対配置やfloatをリセットして箱の中に収める */
.article-container nav.toc {
	display: block !important;
	position: static !important;
	float: none !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;

	background: #F8FAFC;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 48px;
}

/* 見出し「目次」 */
.article-container nav.toc h2 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
	padding: 0;
	border: none !important;
	color: #111827;
}
.article-container nav.toc h2::before,
.article-container nav.toc h2::after {
	content: none !important;
	display: none !important;
}

/* リスト本体：横並び・絶対配置を解除して縦の箇条書きに */
.article-container nav.toc ul {
	display: block !important;
	position: static !important;
	float: none !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;

	list-style: disc !important;
	margin: 0 !important;
	padding-left: 24px !important;
}

/* 各項目 */
.article-container nav.toc li {
	display: list-item !important;
	position: static !important;
	float: none !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;

	list-style: disc !important;
	margin: 0 0 10px !important;
	line-height: 1.8;
}

/* リンク */
.article-container nav.toc a {
	display: inline !important;
	position: static !important;
	float: none !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;

	color: #2563EB;
	text-decoration: none;
	font-weight: 500;
}
.article-container nav.toc a:hover {
	text-decoration: underline;
}

/* =========================
   CONTENT
========================= */

.article-container section {
	margin-bottom: 56px;
}

.article-container h2 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid #E5E7EB;
	color: #111827;
}

.article-container h3 {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
	margin-top: 32px;
	margin-bottom: 16px;
	color: #1F2937;
}

.article-container p {
	font-size: 16px;
	line-height: 2;
	color: #4B5563;
	margin-bottom: 20px;
}

.article-container ul,
.article-container ol {
	margin: 20px 0 24px 24px;
}

.article-container li {
	font-size: 16px;
	line-height: 2;
	color: #374151;
	margin-bottom: 8px;
}

/* =========================
   IMAGE SAMPLE
========================= */

.sample-images {
	display: flex;
	gap: 24px;
	margin-top: 32px;
	flex-wrap: wrap;
	justify-content: center;
}

.sample-image {
	flex: 1;
	min-width: 280px;
	max-width: 400px;
	text-align: center;
}

.sample-image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid #E5E7EB;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.sample-image figcaption {
	margin-top: 12px;
	font-size: 14px;
	color: #6B7280;
}

/* =========================
   LINK
========================= */

.article-container a {
	color: #2563EB;
	text-decoration: none;
}

.article-container a:hover {
	text-decoration: underline;
}

/* =========================
   TABLE
========================= */

.article-container table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
}

.article-container th,
.article-container td {
	border: 1px solid #E5E7EB;
	padding: 12px;
	text-align: left;
}

.article-container th {
	background: #F8FAFC;
	font-weight: 600;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

	.article-container {
		margin: 48px auto;
		padding: 0 20px;
	}

	.article-container h1 {
		font-size: 30px;
	}

	.article-container h2 {
		font-size: 24px;
	}

	.article-container h3 {
		font-size: 20px;
	}

	.article-container p,
	.article-container li {
		font-size: 15px;
	}

	.sample-images {
		flex-direction: column;
		align-items: center;
	}

	.sample-image {
		max-width: 100%;
	}

	.article-container nav.toc {
		padding: 20px;
	}
}