@layer bootstrap {

	/* Bootstrap のユーティリティ（my-5・p-3・p-md-4）は !important 付き。
	   レイヤーがあると !important は優先順位が逆転するため、後のレイヤーからは勝てない。
	   同じ bootstrap レイヤーに置き、id で詳細度を上げて上書きする */

	/* レガシーの /css/style.css は * で全要素に 12px Meiryo を当て、html の font-size まで
	   12px にしている。移植版はヘッダーとフッターが同じ文書にあるため rem の基準は変えられない。
	   rem 由来の値（余白・角丸・ガター）は本番の計算値を px で置き換えた。

	   :where() で包んで詳細度を 0 に保つ。id を直接書くと詳細度が 1-0-0 になり、
	   レガシーでは負けていた .container の margin:auto にまで勝ってしまう（中央寄せが壊れる） */
	:where(#legacy-doc),
	:where(#legacy-doc) * {
		font-family: Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
		font-size: 12px;
		line-height: 21px;
		margin: 0;
		padding: 0;
	}

	#legacy-doc .container,
	#legacy-doc .col-12 {
		padding-right: 9px;
		padding-left: 9px;
	}

	#legacy-doc .row {
		margin-right: -9px;
		margin-left: -9px;
	}

	#legacy-doc .navbar-header {
		margin-top: 48px;
	}

	#legacy-doc .navbar-brand {
		margin-right: 12px;
		padding: 3.75px 0;
		font-size: 46px;
		font-weight: 700;
		line-height: 21px;
		color: #010101;
		text-transform: uppercase;
		white-space: normal;
	}

	#legacy-doc .navbar-brand .f_en_narrow {
		font-family: 'Open Sans Condensed', sans-serif;
		font-size: 46px;
	}

	#legacy-doc .navbar-brand span.small {
		font-size: 26px;
		letter-spacing: -0.6px;
	}

	#legacy-doc .card {
		margin: 36px 0 !important;
		padding: 12px !important;
		border-radius: 3px;
	}

	/* Bootstrap の見出しは 1200px 未満で calc(1.325rem + .9vw) の可変。
	   rem が 12px のため 1.325rem = 15.9px、1.3rem = 15.6px として置き換える */
	#legacy-doc h2 {
		margin-bottom: 6px;
		font-size: calc(15.9px + 0.9vw);
		font-weight: 700;
		line-height: 1.2;
	}

	#legacy-doc h3 {
		margin: 30px 0 6px;
		font-size: calc(15.6px + 0.6vw);
		font-weight: 700;
		line-height: 1.2;
	}

	#legacy-doc .subtitle {
		margin: 5px 0;
		padding: 3px;
		font-size: 17px;
	}

	#legacy-doc hr {
		margin: 12px 0;
	}

	#legacy-doc p {
		margin-bottom: 12px;
	}

	#legacy-doc .pt7 {
		padding-top: 7px;
	}

	#legacy-doc .pb7 {
		padding-bottom: 7px;
	}

	#legacy-doc ul {
		margin-bottom: 12px;
		padding-left: 24px;
	}

	#legacy-doc .policy li {
		margin-bottom: 3px;
		margin-left: 30px;
		list-style-type: disc;
	}

	#legacy-doc b {
		font-weight: 700;
	}

	#legacy-doc a {
		color: #333;
		text-decoration: underline;
	}

	@media (min-width: 768px) {
		#legacy-doc .card {
			padding: 18px !important;
		}
	}

	@media (min-width: 1200px) {
		#legacy-doc h2 {
			font-size: 24px;
		}

		#legacy-doc h3 {
			font-size: 21px;
		}
	}

	@media (max-width: 991px) {
		#legacy-doc .navbar-brand span.small {
			font-size: 33px;
			line-height: 33px;
		}
	}

	@media (max-width: 767px) {
		#legacy-doc .navbar-brand span.small {
			display: block;
			margin-top: 8px;
			font-size: 24px;
			line-height: 24px;
			white-space: nowrap;
		}
	}

	@media (max-width: 560px) {
		#legacy-doc .navbar-brand .f_en_narrow {
			font-size: 12vw;
		}
	}

	@media (max-width: 460px) {
		#legacy-doc .navbar-brand span.small {
			font-size: 20px;
		}
	}
}