@charset "UTF-8";
/* ==================================================================
 * フッター・パンくず・サイトマップ・ページトップ（共通パーツ / 1-b）
 *
 * 🚨 **トークンを使ってよいのは「既存のCSSにPC用の上書きがある宣言」だけ。**
 * トークンは751pxで vw → px に切り替わる。上書きが無い宣言に使うと
 * PC幅での値が変わってしまう。
 * サイトマップは**全体がpx指定**なのでトークンを使わない。
 * ================================================================== */

/* --- フッター -------------------------------------------------------- */

.m-footer-wrapper {
	margin-top: var(--space-32);
	background-color: var(--color-text);
}

.m-footer-container {
	padding: 5.33333vw 9.6vw;   /* = 20px 36px @375 */
}

.m-footer-container * {
	color: var(--color-bg);
}

.m-footer-menu {
	line-height: 1.4;   /* トークンのスケール外（tight 1.2 / normal 1.5 の中間） */
}

.m-footer-menu a:hover,
.m-footer-menu a:hover .fab {
	text-decoration: underline;
}

.m-footer-menu-item {
	margin-bottom: var(--space-16);
}

.m-footer-logo {
	text-align: center;
}

.m-footer-logo p {
	margin: auto;
}

@media screen and (max-width: 751px) {
	/* ★2列に割る。既存のCSSが !important で効かせているためそのまま残す */
	.m-footer-menu-item {
		flex-basis: calc(50%) !important;
	}
}

@media screen and (min-width: 751px) {
	.m-footer-wrapper {
		width: 100%;
		margin-top: 90px;   /* 一点物（--space-32 の 32px ではない） */
	}

	.m-footer-container {
		padding: var(--space-20) 0;
	}

	.m-footer-menu {
		width: 800px;
		margin: auto;
	}

	.m-footer-menu a {
		display: block;
		padding: 14px 0;   /* 一点物 */
		font-size: var(--font-12);
	}

	.m-footer-menu-item {
		margin-bottom: 0;
	}
}

/* --- パンくず -------------------------------------------------------- */

.m-breadcrumb-wrapper {
	background-color: var(--color-gray-300);
}

/*
 * 🚨 打ち消すのは `list-style` **だけ**。
 *
 * ① パンくずを <ul> から <ol> に変えたため、既存のCSS の
 * `ul { list-style: none }`（160行目）が当たらず**番号が出る**。
 *
 * ② そこで `margin: 0` も足したところ、**TOPが左に寄りすぎる**という別の不具合になった。
 * このセレクタは `.l-container`（PCで `margin: auto` ＝中央寄せ）と**詳細度が同じ**で、
 * `footer.css` のほうが後に読まれるため**中央寄せを打ち消する**。
 * その結果パンくずだけ 1280px ラッパーの左端に張り付いる。
 *
 * ★ul と ol の UA 既定は `margin-block: 1em` / `padding-inline-start: 40px` で**同じ**。
 * 違うのは `list-style-type` だけなので、余白には触らない。
 */
.m-breadcrumb-container {
	padding: var(--space-8) 0 var(--space-6) var(--space-6);
	list-style: none;
}

.m-breadcrumb-item {
	font-size: var(--font-12);
}

.m-breadcrumb-item a:hover {
	text-decoration: underline;
}

.m-breadcrumb-item a::after {
	display: inline-block;
	padding: 0 8px;   /* ★スマホでも px */
	content: ">";
}

.m-breadcrumb-item:last-child a::after {
	display: none;
}

@media screen and (min-width: 751px) {
	.m-breadcrumb-container {
		padding: var(--space-8) 0 7px;   /* 7px は一点物。左パディングは無くなる */
	}

	.m-breadcrumb-item,
	.m-breadcrumb-item a {
		font-size: var(--font-14);
	}

	.m-breadcrumb-item a {
		display: block;
	}
}

/* --- サイトマップ -----------------------------------------------------
 * ★このブロックは既存のCSSが**全部 px**（vwを使っていない）。
 * トークン（751pxで切り替わる）を使うと値が変わるため、実値のまま書く。
 */

.m-site_map-wrapper {
	padding: 32px 90px 32px 32px;
	margin-top: 90px;
}

.m-site_map-title {
	margin-bottom: 16px;
	font-weight: bold;
}

.m-site_map-title a:hover,
.m-site_map-item a:hover {
	text-decoration: underline;
}

.m-site_map-item {
	padding-left: 30px;
}

.m-site_map-item ul + ul {
	margin-left: 18px;
}

.m-site_map-item li {
	margin-bottom: 8px;
}

.m-site_map-item li:last-child {
	margin-bottom: 0;
}

.m-site_map-item a {
	/* 🚨 トークンを使わない。既存のCSSはメディアクエリ無しの 0.75rem で、
	   スマホでも 12px 固定。--font-12 にすると SP で 3.2vw（=画面幅比）に変わる。 */
	font-size: .75rem;
}

@media screen and (max-width: 751px) {
	.m-site_map-wrapper {
		padding: 32px 88px 32px 32px;
		margin-top: 90px;
	}

	/*
	 * 🚨 既存のCSSはここが構文エラーになっている（style.css 1588行目 / 同様）。
	 * `.m-site_map-title {"` ← 波括弧の直後に不要な二重引用符がある。
	 * ブラウザは最初の `;` までを読み飛ばすため、**`margin-bottom: 0px` は無効**になり、
	 * 基本ルールの `margin-bottom: 16px` がそのまま効いている。`margin-top: 20px` は効く。
	 *
	 * 🚨 **`margin-bottom: 0` と書いてはいけない**。
	 * 一度は「書き手の意図」を汲んで `0` と書いたが、それではスマホで見出しの下余白が
	 * 16px 減り、**フッターのサイトマップが想定より詰まって表示される**。
	 * 合わせるべきなのは書き手の意図ではなく、**利用者が実際に見ている実際の表示**。
	 * 構文エラーはそのままにできないので、**効いている値をそのまま書く**。
	 */
	.m-site_map-title {
		margin-top: 20px;
		margin-bottom: 16px;
	}

	.m-site_map-item {
		margin-top: 5px;
	}
}

/*
 * ★「ページ上部へ戻る」ボタンは使わない方針のため、指定を置いていない。
 * デジタル庁デザインシステムで非推奨（deprecated）。理由は footer.php のコメント参照。
 */