@charset "utf-8";

/* ==================================================
   LEGALページ専用 (Legal)
================================================== */

.low_legal-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 各項目の区切り線 */
.low_legal-list li {
	border-bottom: var(--border-width) solid var(--color-gray-light);
}

/* 一番上の線だけ少し太く・黒くして引き締める（COMPANYの表と同じテクニック！） */
.low_legal-list li:first-child {
	border-top: 2px solid var(--color-black);
}

/* リンクエリアを広く取り、クリックしやすくする */
.low_legal-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-lg) var(--space-sm);
	text-decoration: none;
	color: var(--color-black);
	transition: background-color var(--transition-speed) ease;
}

/* common.css の共通ホバー（下から黒いのが伸びるやつ）を無効化 */
.low_legal-list a::before {
	display: none;
}

/* ホバー時に背景をうっすらグレーにする */
.low_legal-list a:hover {
	background-color: #f9f9f9;
	color: var(--color-black);
}

.low_legal-list-title {
	font-size: var(--font-size-md);
	font-weight: 700;
}

/* 矢印アイコンのスタイル */
.low_legal-list svg {
	width: 20px;
	height: 20px;
	color: var(--color-black);
	transition: transform var(--transition-speed) ease;
}

/* ホバー時に矢印が右にスッと動くアニメーション */
.low_legal-list a:hover svg {
	transform: translateX(5px);
}

/* ------------------------------
   ▼ SPサイズ（767px以下）の上書き ▼
------------------------------ */
@media (max-width: 767px) {
	.low_legal-list a {
		padding: var(--space-md) 0; /* スマホでは左右の余白をなくす */
	}

	.low_legal-list-title {
		font-size: var(--font-size-sm); /* スマホ用に少し小さく */
	}
}

/* ==================================================
   ポリシー本文エリア共通 (Legal Content)
================================================== */
.low_legal-content {
	/* ベースの文字サイズと、長文が読みやすい行間(1.8)を設定 */
	font-size: var(--font-size-md);
	line-height: 1.8;
	color: var(--color-text-main);
}

/* --- 段落 (p) --- */
.low_legal-content p {
	margin-bottom: var(--space-md);
}
/* 最後の段落の余計な下余白を消す */
.low_legal-content p:last-child {
	margin-bottom: 0;
}

/* --- 見出し (h3) --- */
.low_legal-content h2 {
	/* ▼ COMPANYページの .cm_heading-line と同じ「下線スタイル」！ */
	font-size: var(--font-size-xl);
	font-weight: 700;
	border-bottom: 2px solid var(--color-black); /* ピシッとした黒い下線 */
	padding-bottom: var(--space-xs);

	/* 法務ページ用に、上の余白を広めにとって条項を美しく区切る */
	margin-top: calc(var(--space-xl) * 1.5);
	margin-bottom: var(--space-md);
	line-height: 1.4;
}

/* 一番最初の h2 だけは上の余白を詰める */
.low_legal-content h2:first-child {
	margin-top: 0;
}

/* --- 右寄せの運用情報エリア --- */
.low_legal-info {
	text-align: right;
	margin-top: var(--space-lg);
	margin-bottom: var(--space-xl);
	font-size: var(--font-size-sm);
}

/* --- リスト (ul, ol) --- */
.low_legal-content ul,
.low_legal-content ol {
	margin-bottom: var(--space-md);
	padding-left: 0;
	list-style-position: inside;
}
.low_legal-content li {
	margin-bottom: var(--space-xs);
	word-break: break-all; /* URLなどがはみ出さないようにする */
}
/* aタグのリンク色を少し際立たせる */
.low_legal-content a {
	text-decoration: underline;
	color: #333333;
}
.low_legal-content a:hover {
	color: var(--color-black);
	text-decoration: none;
}

/* --- 区切り線 (hr) --- */
.low_legal-content hr {
	border: none;
	border-top: var(--border-width) solid var(--color-gray-light);
	margin: var(--space-xl) 0;
}

/* ------------------------------
   ▼ SPサイズ（767px以下）の上書き ▼
------------------------------ */
@media (max-width: 767px) {
	.low_legal-content {
		font-size: var(--font-size-sm); /* スマホでは全体的に文字を一段小さく */
	}
	.low_legal-content h2 {
		font-size: var(--font-size-lg);
		margin-top: var(--space-xl);
	}
}

/* ==================================================
   クッキーポリシー専用スタイル (Cookie Policy)
================================================== */

/* --- クッキーサービステーブル --- */
.low_legal-cookie-table th,
.low_legal-cookie-table td {
	/* テーブル内の文字サイズを少し小さくして情報量を調整 */
	font-size: var(--font-size-sm);
	vertical-align: middle; /* 上下中央揃え */
}

/* PC時の列幅調整 */
@media (min-width: 768px) {
	.low_legal-cookie-table th:nth-child(1),
	.low_legal-cookie-table td:nth-child(1) {
		width: 20%; /* サービス名 */
	}
	.low_legal-cookie-table th:nth-child(2),
	.low_legal-cookie-table td:nth-child(2) {
		width: 20%; /* 提供者 */
	}
	.low_legal-cookie-table th:nth-child(3),
	.low_legal-cookie-table td:nth-child(3) {
		width: 60%; /* 利用目的・詳細（広めにとる） */
	}
}

/* テーブル内の段落 */
.low_legal-cookie-table td p {
	margin-bottom: var(--space-sm);
	line-height: 1.6;
}

/* --- ボタンエリア --- */
.low_legal-cookie-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm); /* ボタン同士の間隔 */
	margin-top: var(--space-sm);
}

/* --- ボタンのスタイル（参考画像を再現！） --- */
.low_legal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background-color: #f0f0f0; /* 薄いグレーの背景 */
	color: var(--color-black);
	font-size: var(--font-size-xs);
	font-weight: 700;
	border-radius: 30px; /* 角丸 */
	text-decoration: none !important; /* 下線を強制的に消す */
	transition: background-color var(--transition-speed) ease;
}

/* ホバー時 */
.low_legal-btn:hover {
	background-color: #e0e0e0; /* 少し濃いグレーに */
	color: var(--color-black) !important;
}

/* ------------------------------
   ▼ SPサイズ（767px以下）の上書き ▼
------------------------------ */
@media (max-width: 767px) {
	/* スマホではボタンを幅いっぱいに広げて押しやすくする */
	.low_legal-btn {
		width: 100%;
		padding: 10px;
	}

	/* ▼▼▼ 今回追加する魔法のCSS ▼▼▼ */

	/* 1. PC用の横並び見出し行を非表示にする */
	.low_legal-cookie-table thead {
		display: none;
	}

	/* 2. 1つのサービス（tr）を1つのカードとして区切る */
	.low_legal-cookie-table tbody tr {
		display: block;
		padding: var(--space-md) 0;
		border-bottom: 2px solid var(--color-black); /* カードの区切りをハッキリさせる */
	}
	.low_legal-cookie-table tbody tr:first-child {
		border-top: 2px solid var(--color-black);
	}

	/* 3. common.css の不要な下線を打ち消す */
	.low_legal-cookie-table td {
		border-bottom: none;
		padding-bottom: var(--space-md);
	}
	.low_legal-cookie-table td:last-child {
		padding-bottom: 0;
	}

	/* 4. CSSの魔法！スマホの時だけ、項目の上に「見出し」を自動挿入する */
	.low_legal-cookie-table td::before {
		display: block;
		font-size: var(--font-size-xs);
		color: #999999;
		font-weight: 700;
		margin-bottom: 4px;
	}
	.low_legal-cookie-table td:nth-child(1)::before {
		content: '■ サービス名';
	}
	.low_legal-cookie-table td:nth-child(2)::before {
		content: '■ 提供者';
	}
	.low_legal-cookie-table td:nth-child(3)::before {
		content: '■ 利用目的・詳細';
	}

	/* ▲▲▲ ここまで ▲▲▲ */
}