/**
 * 規約・ポリシー系ページ汎用 CSS
 *
 *   対応：
 *     ・page-privacy.php  個人情報の取り扱い
 *     ・将来：利用規約 / 特商法表記 / 会社概要 など
 *
 *   構成：
 *     ・パンくず（lg-crumb）
 *     ・ページヘッダー（lg-head）
 *     ・本文（lg-body）：番号付き見出し + 段落 + リスト + コールアウト + 情報ボックス
 *     ・メタ情報（制定日・改定日・運営会社）
 *
 *   クラス命名：legal-page / lg-XXX
 *
 * @package mitsukarukun
 */

/* ============================================================
 *  ルートガード
 * ============================================================ */
.legal-page {
	overflow-x: clip;
	max-width: 100vw;
	width: 100%;
}

/* ============================================================
 *  パンくず + ページヘッダー
 * ============================================================ */
.lg-crumb {
	max-width: 1080px;
	margin: 0 auto;
	padding: 14px 28px 0;
	font-family: "Yusei Magic", sans-serif;
	font-size: 12px;
	color: var(--ink2);
}
.lg-crumb a { color: var(--ink2); text-decoration: none; }
.lg-crumb__sep { margin: 0 8px; color: var(--ink3); }
.lg-crumb__cur { color: var(--ink); }

.lg-head {
	max-width: 1080px;
	margin: 0 auto;
	padding: 30px 28px 28px;
	text-align: center;
}
.lg-head__title {
	font-family: "Yusei Magic", sans-serif;
	font-size: 34px;
	line-height: 1.3;
	position: relative;
	padding-top: 16px;
	color: var(--ink);
}
.lg-head__title::before {
	content: "";
	display: block;
	width: 80px;
	height: 5px;
	background: var(--ink);
	margin: 0 auto 14px;
	border-radius: 3px;
}
.lg-head__en {
	display: block;
	font-family: "Yusei Magic", sans-serif;
	font-size: 14px;
	color: var(--accent);
	margin-bottom: 6px;
	letter-spacing: .15em;
}
.lg-head__lead {
	font-family: "Yusei Magic", sans-serif;
	font-size: 14px;
	color: var(--ink2);
	margin-top: 14px;
	line-height: 1.85;
	max-width: 720px;
	margin-inline: auto;
}

/* ============================================================
 *  本文
 * ============================================================ */
.lg-body {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 28px 60px;
}

.lg-section {
	margin-bottom: 34px;
}
.lg-section__h {
	font-family: "Yusei Magic", sans-serif;
	font-size: 22px;
	line-height: 1.5;
	color: var(--ink);
	padding: 12px 16px 12px 20px;
	background: var(--paper2);
	border-left: 6px solid var(--accent);
	border-radius: 0 8px 8px 0;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.lg-section__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--accent);
	color: #fff;
	border: 2px solid var(--ink);
	border-radius: 50%;
	font-family: "Yusei Magic", sans-serif;
	font-size: 16px;
	font-weight: bold;
	box-shadow: 2px 2px 0 var(--ink);
	flex-shrink: 0;
}

.lg-body p {
	font-size: 14px;
	line-height: 1.95;
	color: var(--ink);
	margin: 0 0 14px;
}
.lg-body p:last-child { margin-bottom: 0; }

.lg-list {
	padding-left: 0;
	margin: 8px 0 14px;
	list-style: none;
}
.lg-list li {
	position: relative;
	padding: 6px 0 6px 24px;
	font-size: 14px;
	line-height: 1.85;
	color: var(--ink);
	border-bottom: 1px dashed var(--ink3);
}
.lg-list li:last-child { border-bottom: none; }
.lg-list li::before {
	content: "✓";
	position: absolute;
	left: 4px;
	top: 6px;
	color: var(--accent);
	font-weight: bold;
}

/* コールアウト（安全管理措置など強調枠） */
.lg-callout {
	background: #FFF6CC;
	border: 2px solid var(--ink);
	border-radius: 10px;
	padding: 18px 20px;
	margin: 16px 0;
	font-family: "Yusei Magic", sans-serif;
	box-shadow: 3px 3px 0 var(--ink);
}
.lg-callout b {
	display: block;
	font-size: 15px;
	color: var(--ink);
	margin-bottom: 8px;
}
.lg-callout .lg-list li { border-bottom-color: rgba(38, 36, 31, .15); }

/* 情報ボックス（運営会社情報など） */
.lg-info-box {
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: 10px;
	padding: 20px 24px;
	margin: 14px 0 0;
	font-family: "Yusei Magic", sans-serif;
	box-shadow: 3px 3px 0 var(--ink);
}
.lg-info-row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--ink3);
	font-size: 13px;
}
.lg-info-row:last-child { border-bottom: none; }
.lg-info-row__lb {
	font-weight: bold;
	color: var(--ink2);
}
.lg-info-row a { color: var(--accent2); text-decoration: underline; }

/* メタ情報（制定日・改定日） */
.lg-meta {
	margin-top: 40px;
	padding-top: 22px;
	border-top: 2px solid var(--ink2);
	text-align: right;
	font-family: "Yusei Magic", sans-serif;
	font-size: 13px;
	color: var(--ink2);
	line-height: 1.8;
}

/* ============================================================
 *  レスポンシブ
 * ============================================================ */

@media (max-width: 768px) {
	.lg-crumb { padding: 12px 14px 0; font-size: 11px; }
	.lg-head { padding: 22px 14px 22px; }
	.lg-head__title { font-size: 22px; }
	.lg-head__en { font-size: 12px; }
	.lg-head__lead { font-size: 13px; line-height: 1.8; }

	.lg-body { padding: 0 14px 40px; }

	.lg-section { margin-bottom: 26px; }
	.lg-section__h {
		font-size: 17px;
		padding: 10px 12px 10px 14px;
		gap: 10px;
		border-left-width: 5px;
	}
	.lg-section__num { width: 30px; height: 30px; font-size: 14px; }

	.lg-body p { font-size: 13px; line-height: 1.85; }
	.lg-list li { font-size: 13px; padding-left: 22px; }

	.lg-callout { padding: 14px 16px; }
	.lg-callout b { font-size: 14px; }

	.lg-info-box { padding: 14px 16px; }
	.lg-info-row { grid-template-columns: 80px 1fr; gap: 8px; font-size: 12px; padding: 8px 0; }

	.lg-meta { font-size: 12px; text-align: left; }
}

/* ============================================================
 *  本文系フォント上書き（読み物部分はシステムフォントで可読性アップ）
 * ============================================================ */
.lg-body p,
.lg-list li,
.lg-callout p,
.lg-info-row,
.lg-head__lead {
	font-family: apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, 'Yu Gothic', Verdana, Meiryo, sans-serif !important;
}