@charset "UTF-8";
/* ============================================================
   SEFU — Legal / Policy pages (page-legal.php)
   privacy / customer-code-of-conduct / social-media-guidelines /
   copyright / safety-and-security 共通。
   ティザー privacy.css を SEFU のダーク配色・トークンに移植。
   見出し（英・日）は hero-title 側で出力。
   ============================================================ */

.legal {
	width: 88rem;                /* 880px 固定 */
	max-width: calc(100% - 2 * var(--s-page-x)); /* SPで画面端に付かないように */
	margin: 0 auto;
	padding-top: 7rem;           /* タイトル(Hero)と本文の間をたっぷり（ティザー準拠の余白感） */
	padding-bottom: 12rem;       /* 横paddingは持たせない（880pxを食わない） */
	color: var(--c-ink-mute);
	letter-spacing: 0.1em;       /* ティザー本文に合わせる */
	font-size: 1.4rem;           /* 14px（ティザー本文＝SEFU body と同寸） */
	line-height: 2;
}

.legal p { line-height: 2; }

/* 導入文 */
.legal-intro { margin-bottom: 6rem; }

/* ----- 本文（dl/dt/dd） ----- */
/* 見出しの上下にたっぷり余白：区切り間隔(上)5rem ＋ 見出し下1.4rem */
.legal dl:not(:last-of-type) { margin-bottom: 5rem; }

.legal dl dt {
	color: var(--c-ink);
	font-weight: 600;
	margin-bottom: 1.4rem;
}

.legal dl dd { margin: 0; padding: 0; }

/* 小見出し（利用目的内の（1）（2）（3）／＊注記など） */
.legal-subhead {
	color: var(--c-ink);
	font-weight: 600;
	margin: 2.6rem 0 1rem;
}
.legal dd .legal-subhead:first-child { margin-top: 0; }

/* リンク */
/* v3.205: .legal-next__btn（GDPRボタン）を除外。本文リンクのみ下線＋muteを適用 */
.legal a:not(.legal-next__btn) {
	color: var(--c-ink-mute);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: opacity 0.3s ease;
}
.legal a:not(.legal-next__btn):hover { opacity: 0.6; }

/* ----- リスト（手動採番・手動「・」のため list-style なし） ----- */
.legal dd ol,
.legal dd ul {
	list-style: none;
	padding-left: 1em;
	margin: 0;
}
.legal dd ol li {
	line-height: 2;
	text-indent: -1.4em;
	padding-left: 1.4em;
}
.legal dd ul li {
	line-height: 2;
	text-indent: -1em;
	padding-left: 1em;
}
.legal dd ol li:last-child { margin-bottom: 0.3rem; }
.legal li.no-indent { text-indent: 0; padding-left: 0; }

/* ----- 連絡先 / 日付 ----- */
.legal-contact { margin: 5.5rem 0; }
.legal-contact h4 {
	color: var(--c-ink);
	font-weight: 600;
	margin-bottom: 1rem;
}
.legal-date { margin-top: 4rem; }

/* ----- 大区切り見出し（同一ページ内の別通知＝GDPR等） ----- */
.legal-section-head {
	text-align: center;
	margin-top: 9rem;
	padding-top: 8rem;
	margin-bottom: 6rem;
	border-top: 1px solid var(--c-rule);
}
.legal-section-en {
	font-family: var(--f-en);
	font-weight: 300;
	font-size: 3.6rem;        /* 36px */
	line-height: 1.1;
	letter-spacing: 0.1em;
	color: var(--c-ink);
	margin-bottom: 1.2rem;
}
.legal-section-ja {
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	color: var(--c-ink-mute);
}

/* 締めの一文 */
.legal-closing { margin-top: 3rem; }

/* 素材待ちプレースホルダ */
.legal-placeholder {
	text-align: center;
	color: var(--c-ink-mute);
	letter-spacing: 0.1em;
	padding: 8rem 0;
}

/* 次ページ誘導（privacy → gdpr） */
.legal-next {
	margin-top: 6rem;
	padding-top: 4rem;
	border-top: 1px solid var(--c-rule);
	text-align: center;
}
.legal-next__lead {
	margin: 0 0 2.8rem;
	font-size: 1.4rem;
	color: var(--c-ink-mute);
	letter-spacing: 0.04em;
}
.legal-next__btn {
	display: inline-block;
	width: 180px;
	height: 40px;
	line-height: 38px;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid currentColor;
	color: var(--c-ink);
	text-decoration: none;
	text-align: center;
	font-family: var(--f-en);
	font-size: 1.4rem;
	letter-spacing: 0.12em;
	position: relative;
	overflow: hidden;
	z-index: 0;
	transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.legal-next__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-ink);
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}
.legal-next__btn:hover,
.legal-next__btn:focus-visible {
	color: var(--c-bg);
	border-color: var(--c-ink);
}
.legal-next__btn:hover::before,
.legal-next__btn:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.legal-next__btn,
	.legal-next__btn::before { transition: none; }
}

/* ----- SP ----- */
@media (max-width: 768px) {
	.legal { padding-top: 3.5rem; padding-bottom: 8rem; }
	.legal-intro { margin-bottom: 4rem; }
	.legal dl:not(:last-of-type) { margin-bottom: 4rem; }
	.legal dl dt { margin-bottom: 1.2rem; }
	.legal-contact { margin: 4rem 0; }
	.legal-section-head {
		margin-top: 6rem;
		padding-top: 5rem;
		margin-bottom: 4rem;
	}
	.legal-section-en { font-size: 2.8rem; }
	.legal-next { margin-top: 4.5rem; padding-top: 3.5rem; }
}

/* ============================================================
   タイトル（Hero = hero-title）上の余白：ティザー privacy 準拠でゆとりを持たせる
   legal.css は page-legal.php 限定 enqueue ＝ リーガル系（privacy / gdpr /
   safety-and-security 等）のみに適用。各種約款(page-terms.php)は対象外。
   ・タイトル上: PC 240px / SP 150px（ヘッダー高さ込み。ティザー .container padding-top と同値）
   ・左右(--s-page-x)・下(4rem)は style.css の指定を維持（padding-top のみ上書き）
   ・タイトル下は hero--title 下4rem + .legal 上7rem = 110px ≒ ティザー hgroup 113px のため据え置き
   ============================================================ */
.hero--title {
	padding-top: calc(var(--h-header) + 11.8rem); /* PC: 92 + 118 = 210px */
}

@media (max-width: 767px) {
	.hero--title {
		padding-top: calc(var(--h-header) + 9rem); /* SP: 60 + 90 = 150px */
	}
}

/* 英タイトルが長いページ（CUSTOMER CODE OF CONDUCT 等）の折り返しを
   上下均等な綺麗な行に整える。1行で収まる幅では1行のまま。
   legal.css 限定 enqueue ＝ リーガル系のみに適用。 */
.hero__title-en {
	text-wrap: balance;
}