/*
 * Page: 固定ページのデフォルトテンプレート（page.php）
 * エディタ本文（旧テーマ由来の HTML を含む）を、要素セレクタだけで整える。
 */

.p-page {
	padding-top: var(--page-top-pad);
}

.p-page > .c-cta {
	margin-top: var(--section-pad);
}

/* 英字見出しが無いときのタイトル */
.p-page__title {
	margin: 0;
	font-size: var(--fs-2xl);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
	color: var(--color-primary);
	text-align: center;
}

/* 本文 */
.p-page__content {
	margin-top: var(--content-gap);
	font-size: var(--fs-base);
	line-height: var(--line-height-body);
}

.p-page__content h2,
.p-page__content h3,
.p-page__content h4 {
	margin: 48px 0 0;
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
}

.p-page__content h2 {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--fs-lg);
}

.p-page__content h3 {
	font-size: var(--fs-md);
}

.p-page__content h4 {
	font-size: var(--fs-base);
}

.p-page__content p,
.p-page__content ul,
.p-page__content ol,
.p-page__content table,
.p-page__content img {
	margin: 16px 0 0;
}

.p-page__content :is(h2, h3, h4, p, ul, ol, table, img):first-child {
	margin-top: 0;
}

/* 旧テーマの本文は「・」を文字として書いているため、マーカーは出さない */
.p-page__content ul,
.p-page__content ol {
	padding-left: 0;
	list-style: none;
}

.p-page__content li + li {
	margin-top: 8px;
}

.p-page__content a {
	color: var(--color-primary);
	text-decoration: underline;
}

.p-page__content a:hover {
	color: var(--color-primary-hover);
}

.p-page__content table {
	width: 100%;
	border-collapse: collapse;
}

.p-page__content th,
.p-page__content td {
	display: block;
	padding: 12px 16px;
	border: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.p-page__content th {
	background: var(--color-bg-muted);
	font-weight: var(--font-weight-medium);
}

.p-page__content th + td,
.p-page__content td + td {
	border-top: 0;
}

@media (min-width: 768px) {
	.p-page__content h2,
	.p-page__content h3,
	.p-page__content h4 {
		margin-top: 64px;
	}

	.p-page__content p,
	.p-page__content ul,
	.p-page__content ol,
	.p-page__content table,
	.p-page__content img {
		margin-top: 24px;
	}

	.p-page__content th,
	.p-page__content td {
		display: table-cell;
	}

	.p-page__content th {
		width: 30%;
	}

	.p-page__content th + td,
	.p-page__content td + td {
		border-top: 1px solid var(--color-border);
	}
}