/* 下層ページ専用CSS。トップ共通のナビ・フッターは style.css に残す。 */
.subpage {
	background: #fff;
}

.subpage-main {
	padding: 164px var(--page-gutter) 56px;
}

.article-wrap {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}

.article-hero {
	margin-bottom: 28px;
}

.article-hero h1 {
	position: relative;
	margin: 14px 0 1.2em;
	padding-bottom: 22px;
	font-size: clamp(28px, 6vw, 42px);
	font-weight: 700;
	line-height: 1.22;
	/* text-wrap: balance; */
}

.article-hero h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 96px;
	height: 8px;
	border-radius: 999px;
	background: var(--orange);
}

.article-lead {
	max-width: 760px;
	margin: 0;
	color: var(--muted);
	font-size: clamp(16px, 2.5vw, 19px);
	font-weight: 500;
}

.article-image {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin: 34px auto;
	text-align: center;
}

.article-image img {
	display: block;
	width: min(100%, 560px);
	height: auto;
	border-radius: 28px;
}

.article-image figcaption {
	color: var(--muted);
	font-size: 12px;
}

.article-section {
	margin: 44px 0;
}

.article-section h1 {
	position: relative;
	margin: 56px 0 32px;
	padding-bottom: 22px;
	font-size: clamp(32px, 5vw, 42px);
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

.article-section h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 82px;
	height: 7px;
	border-radius: 999px;
	background: var(--orange);
}

.article-section h2 {
	position: relative;
	margin: 54px 0 30px;
	padding-left: 18px;
	color: var(--text);
	font-size: clamp(22px, 4vw, 36px);
	font-weight: 700;
	line-height: 1.35;
}

.article-section h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 8px;
	height: 1.35em;
	border-radius: 999px;
	background: var(--green-dark);
}

.article-section h3 {
	display: inline;
	margin: 46px 0 20px;
	background: linear-gradient(transparent 58%, var(--cream) 58%);
	color: var(--green-dark);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.45;
}

.article-section h3 + p {
	margin-top: 18px;
}

.article-section h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 42px 0 18px;
	color: var(--text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
}

.article-section h4::before {
	content: "●";
	color: var(--orange);
	font-size: 13px;
	line-height: 1;
}

.article-section h5 {
	margin: 36px 0 16px;
	border-radius: 999px;
	background: var(--surface-soft);
	color: var(--green-dark);
	display: inline-flex;
	padding: 5px 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.article-section p {
	margin: 0 0 32px;
	color: var(--text);
	font-size: 16px;
}

.article-section p:last-child {
	margin-bottom: 0;
}

.article-wrap a:not(.detail-page-link) {
	color: var(--green-dark);
	text-decoration: none;
}

.article-wrap a:not(.detail-page-link):hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-note {
	margin: 28px 0;
	/* border-radius: 26px; */
	background: var(--surface-soft);
	padding: 22px 24px;
	color: var(--text);
}

.article-note strong {
	display: block;
	margin-bottom: 8px;
	color: var(--green-dark);
	font-size: 18px;
	font-weight: 700;
}

.article-note p {
	margin: 0;
}

.affiliate-disclosure p {
	font-size: 11px;
	line-height: 1.5;
}

.article-note-red {
	background: #fff4f1;
}

.article-note-red strong {
	color: var(--red);
	font-size: 14px;
}
.article-note-red p{
	font-size: 12px;
}

.affiliate-slot {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin: 34px auto;
	text-align: center;
}

.affiliate-slot-inline {
	margin: 42px auto;
}

.affiliate-slot-product {
	margin: -8px auto 28px;
}

.affiliate-placeholder {
	display: grid;
	place-items: center;
	gap: 6px;
	/* width: min(100%, 620px); */
	/* width: max-content; */
	min-height: 170px;
	background: var(--cream);
	color: var(--text);
	padding: 24px;
}

.affiliate-placeholder span {
	font-size: 18px;
	font-weight: 700;
}

.affiliate-placeholder small,
.affiliate-slot p {
	color: var(--muted);
	font-size: 11px;
}

.affiliate-slot p {
	margin: 0;
}

.table-scroll {
	overflow-x: auto;
	margin: 18px 0 0;
	border-radius: 26px;
	background: var(--section-soft);
}

.scroll-hint {
	display: none;
}

.comparison-table {
	width: 100%;
	min-width: 760px;
	border-collapse: separate;
	border-spacing: 0;
}

.comparison-table th,
.comparison-table td {
	border: 0;
	padding: 18px;
	text-align: left;
	vertical-align: top;
	font-size: 14px;
	line-height: 1.5;
}

.comparison-table thead th {
	background: var(--green-dark);
	color: #fff;
	font-weight: 700;
}

.comparison-table tbody th {
	width: 18%;
	color: var(--green-dark);
	font-weight: 700;
}

.comparison-table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.58);
}

.article-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.article-card {
	border-radius: 24px;
	background: var(--section-soft);
	padding: 22px;
}

.article-card h3 {
	display: block;
	background: none;
	margin: 0 0 8px;
	color: var(--green-dark);
	font-size: 18px;
}

.article-card p {
	margin: 0;
	color: var(--muted);
}

.source-section ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding-left: 22px;
}

.source-section a {
	color: var(--green-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.related-link-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 16px;
}

@media (max-width: 640px) {
	.scroll-hint {
			display: block;
			margin: 0 0 10px;
			color: var(--muted);
			font-size: 12px;
		}

	.subpage-main {
			padding-top: 100px;
		}

	.article-card-grid {
			grid-template-columns: 1fr;
		}

	.related-link-grid {
		grid-template-columns: 1fr;
	}

	.article-note,
		.article-card {
			padding: 18px;
		}
}