/* ==========================================================================
   プライバシーポリシー（規約系ページ共通）
   - SP ファーストで記述し、840px 以上を PC レイアウトとしています。
   - 利用規約・特定商取引法に基づく表記など、同じ体裁のページにも流用できます。
   ========================================================================== */

.p-legal {
	--legal-cream: #fdf6ee;   /* 基本方針ボックスの背景 */
	--legal-inset: 0px;       /* 本文の左右インデント（PCで有効） */
	padding: 40px 0 64px;
	background-color: var(--color-bg);
}

.p-legal__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--header-pad-sp);
}

/* --------------------------------------------------------------------------
   タイトル・リード文
   -------------------------------------------------------------------------- */
.p-legal__head {
	text-align: center;
}

.p-legal__title {
	margin: 0;
	font-family: var(--font-mincho);
	font-size: 28px;
	/* 明朝体は太字にしない */
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .08em;
	text-wrap: balance;
}

.p-legal__lead {
	margin: 18px 0 0;
	font-size: 13px;
	line-height: 2;
	color: var(--color-text-body);
}

/* SP では改行位置をブラウザに任せる */
.p-legal__lead br {
	display: none;
}

/* --------------------------------------------------------------------------
   基本方針（クリーム色のボックス）
   -------------------------------------------------------------------------- */
.p-legal__highlight {
	margin-top: 32px;
	padding: 24px 20px;
	border-radius: 8px;
	background-color: var(--legal-cream);
}

.p-legal__highlight-title {
	margin: 0;
	font-family: var(--font-mincho);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .04em;
	text-align: center;
}

.p-legal__highlight-text {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 2;
}

/* --------------------------------------------------------------------------
   各条項
   見出しの連番は counter で自動採番する（管理画面では番号を書かない）。
   -------------------------------------------------------------------------- */
.p-legal__body {
	margin-top: 40px;
	counter-reset: legal-section;
	/* 本文中の長い URL（リンクでない文字の URL を含む）がスマホ幅ではみ出さないよう、途中で折り返す */
	overflow-wrap: break-word;
}

.p-legal__body > h2 {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	padding-inline: var(--legal-inset);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .02em;
}

/*
 * 見出しは flex で「オレンジの四角 → 連番 → 見出しテキスト」の順に並べる。
 * 疑似要素は既定で before → テキスト → after の順になるため、order で入れ替える。
 */
.p-legal__body > h2::before {
	content: "";
	order: -2;
	flex: 0 0 auto;
	/* 見出しが 2 行になっても四角は 1 行目の高さに置く（行の高さ 1.6em の中央） */
	align-self: flex-start;
	margin-top: calc((1.6em - 16px) / 2);
	width: 16px;
	height: 16px;
	background-color: var(--color-primary);
}

/* 連番（1. 2. 3. …）を自動採番する */
.p-legal__body > h2::after {
	counter-increment: legal-section;
	content: counter(legal-section) ".";
	order: -1;
	flex: 0 0 auto;
	margin-right: -6px;
}

.p-legal__body > h2 + p,
.p-legal__body > h2 + ul,
.p-legal__body > h2 + ol {
	margin-top: 14px;
}

.p-legal__body > p {
	margin: 0 0 4px;
	padding-inline: var(--legal-inset);
	font-size: 13px;
	line-height: 2;
	color: var(--color-text);
}

.p-legal__body > h2:not(:first-child) {
	margin-top: 44px;
}

.p-legal__body > ul,
.p-legal__body > ol {
	margin: 0 0 4px;
	padding-left: calc(var(--legal-inset) + 1.4em);
	padding-right: var(--legal-inset);
	font-size: 13px;
	line-height: 2;
}

/*
 * プライバシーポリシーは本文の各項目に「・」「①」などの記号が既に書かれているため、
 * 箇条書きの黒丸を付けない（「• ・入会前の…」と記号が二重になるのを防ぐ）。
 * body の privacy-policy クラスは WordPress がプライバシーポリシーのページに付けるもの。
 */
.privacy-policy .p-legal__body > ul {
	padding-left: var(--legal-inset);
	list-style: none;
}

.p-legal__body > ul li + li,
.p-legal__body > ol li + li {
	margin-top: 4px;
}

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

.p-legal__body a:hover {
	text-decoration: none;
}

/*
 * 表（問い合わせ先など）。
 * ブロックエディタは <figure class="wp-block-table"> で包むため、両方に対応する。
 * 幅の狭い画面でははみ出さないよう横スクロールさせる。
 */
.p-legal__body > figure,
.p-legal__body > .wp-block-table {
	margin: 16px var(--legal-inset);
	overflow-x: auto;
}

.p-legal__body > table {
	width: calc(100% - var(--legal-inset) * 2);
	margin: 16px var(--legal-inset);
}

.p-legal__body table {
	border-collapse: collapse;
	font-size: 13px;
	line-height: 1.9;
}

.p-legal__body table th,
.p-legal__body table td {
	padding: 10px 12px;
	border: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.p-legal__body table th {
	width: 30%;
	background-color: var(--legal-cream);
	font-weight: 500;
}

/* 見出し直後の表も他の要素と同じ間隔にそろえる */
.p-legal__body > h2 + table,
.p-legal__body > h2 + figure {
	margin-top: 14px;
}

/* --------------------------------------------------------------------------
   PC（840px 以上）
   -------------------------------------------------------------------------- */
@media (min-width: 840px) {

	.p-legal {
		/* デザインどおり、本文をボックスの内側の文字位置に揃える */
		--legal-inset: 76px;
		padding: 24px 0 120px;
	}

	.p-legal__inner {
		padding-inline: var(--header-pad-pc);
	}

	.p-legal__title {
		font-size: 37px;
		letter-spacing: .1em;
	}

	.p-legal__lead {
		margin-top: 28px;
		font-size: 15px;
	}

	.p-legal__lead br {
		display: inline;
	}

	.p-legal__highlight {
		margin-top: 56px;
		padding: 36px 76px 40px;
	}

	.p-legal__highlight-title {
		font-size: 20px;
	}

	.p-legal__highlight-text {
		margin-top: 20px;
		font-size: 15px;
	}

	.p-legal__body {
		margin-top: 64px;
	}

	.p-legal__body > h2 {
		gap: 14px;
		font-size: 17px;
	}

	.p-legal__body > h2::before {
		margin-top: calc((1.6em - 18px) / 2);
		width: 18px;
		height: 18px;
	}

	.p-legal__body > h2:not(:first-child) {
		margin-top: 60px;
	}

	.p-legal__body > h2 + p,
	.p-legal__body > h2 + ul,
	.p-legal__body > h2 + ol {
		margin-top: 18px;
	}

	.p-legal__body > p,
	.p-legal__body > ul,
	.p-legal__body > ol {
		font-size: 15px;
	}
}


/* 特定商取引法 */
.p-commercial-law__table {
	width: 800px;
	max-width: 100%;
	margin: 60px auto 0;
	border-top: 1px solid #6C635F;
	border-bottom: 1px solid #6C635F;
	font-size: 18px;
}

.p-commercial-law__row {
	display: flex;
	border-bottom: 1px solid #6C635F;
	padding: 20px 0;
}

.p-commercial-law__row:last-child {
	border-bottom: none;
}

.p-commercial-law__label {
	flex: 0 0 200px;
	font-weight: 700;
}

.p-commercial-law__text {
	flex: 1;
}

@media (max-width: 839px) {
	.p-commercial-law__table {
		margin: 40px auto 60px;
		font-size: 15px;
	}
	
	.p-commercial-law__row {
		padding: 15px 0;
	}
	
	.p-commercial-law__label {
		flex: 0 0 150px;
	}
}