@charset "utf-8";

/* ==================================================
   SITEMAPページ専用スタイル（2カラムリスト形式・完成版）
================================================== */

.low_sitemap-wrap {
	margin-bottom: calc(var(--space-xl) * 2);
	border-bottom: 1px solid var(--color-gray-light); /* 一番下にも線を引いて閉じる */
}

/* 1行の枠組み */
.low_sitemap-row {
	display: flex;
	border-top: 1px solid var(--color-gray-light);
}
.low_sitemap-row:first-child {
	border-top: 2px solid var(--color-black); /* 一番上だけ太く引き締める */
}

/* --- 左カラム（大カテゴリ） --- */
.low_sitemap-title {
	flex: 0 0 35%;
	margin: 0;
	/* paddingはaタグ側で設定するため、ここではゼロにする */
	padding: 0;
	/* 右カラムと高さを合わせるための設定 */
	display: flex;
	align-items: stretch;
}

/* リンク要素 */
.low_sitemap-title a {
	display: flex;
	align-items: center; /* 上下中央揃え */
	width: 100%;
	/* ★ 背景が黒くなった時に美しく見えるよう、余白を再設定 */
	padding: 32px 24px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--color-black);
	text-decoration: none;
	/* ★ 背景色と文字色の変化を滑らかにするアニメーション */
	transition:
		background-color var(--transition-speed) ease,
		color var(--transition-speed) ease;
}

/* ★ ホバー時の美しいインタラクション（完全反転！） */
.low_sitemap-title a:hover {
	background-color: var(--color-black); /* 背景を黒に */
	color: var(--color-white); /* 文字を白に！ */
	opacity: 1; /* 以前のopacity指定を打ち消す */
}

/* --- 右カラム（サブリンクの枠） --- */
.low_sitemap-sub {
	flex: 1;
	border-left: 1px solid var(--color-gray-light); /* 左右の境界線を追加 */
}

.low_sitemap-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 右カラムの各リストアイテム */
.low_sitemap-list li {
	border-top: 1px solid var(--color-gray-light);
}
.low_sitemap-list li:first-child {
	border-top: none;
}

.low_sitemap-list li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* ★ 左右にも24pxの余白を追加 */
	padding: 32px 24px;
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: #333333;
	text-decoration: none;
	/* ★ 背景色と文字色の変化を滑らかにするアニメーション */
	transition:
		background-color var(--transition-speed) ease,
		color var(--transition-speed) ease;
}

/* 右端の矢印アイコン（＞）をCSSで描画 */
.low_sitemap-list li a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-top: 2px solid #cccccc;
	border-right: 2px solid #cccccc;
	transform: rotate(45deg);
	margin-left: 16px; /* 矢印との距離を少し空ける */
	/* 矢印の色の変化も滑らかに */
	transition:
		border-color var(--transition-speed) ease,
		transform var(--transition-speed) ease;
}

/* ★ ホバー時の美しいインタラクション（完全反転！） */
.low_sitemap-list li a:hover {
	background-color: var(--color-black); /* 背景を黒に */
	color: var(--color-white); /* 文字を白に！ */
}
.low_sitemap-list li a:hover::after {
	border-color: var(--color-white); /* 矢印も白に！ */
	transform: rotate(45deg) translate(2px, -2px);
}

/* ------------------------------
   ▼ SPサイズ（767px以下）の上書き ▼
------------------------------ */
@media (max-width: 767px) {
	.low_sitemap-row {
		flex-direction: column; /* スマホでは縦1列に */
	}

	/* 左カラム（スマホでは上段）の調整 */
	.low_sitemap-title {
		display: block; /* flexを解除 */
		border-bottom: 1px solid #eeeeee; /* サブリストとの境界線 */
	}
	.low_sitemap-title a {
		display: block; /* flexを解除 */
		padding: 24px 16px; /* スマホ用に少し狭めに */
		font-size: 18px;
	}

	/* 右カラム（スマホでは下段）の調整 */
	.low_sitemap-sub {
		border-left: none; /* 縦積みになるので左の線は不要 */
	}
	.low_sitemap-list li a {
		padding: 20px 16px 20px 32px; /* サブ項目らしく左の余白を広めに取る */
		font-size: 13px;
	}
}