/* =============================================================================
   tw-compat.css — Tailwind 化ページ共有の互換 CSS（Bootstrap5 / Canvas テーマ実測値）

   目的: Bootstrap5 / Canvas テーマ / jQuery を排除した Tailwind ページで、
         本番 CSS（/style.css・bootstrap.css・custom.css）のカスケード結果を
         実測値で再現する。output.css の「後」に <link> で読み込む。

   構成:
     §A 実測 base（@layer base。preflight が消す要素既定を復元）
     §C Bootstrap グリッド（非スコープ＝原本BS/Canvasと同じ特異度 0,1,0）
     §D Bootstrap/Canvas ユーティリティ（非スコープ・!important。原本BSと同特異度 0,1,0。
         site-header/footer は Shadow DOM 隔離のため非スコープでも影響なし）
     §E Canvas/Bootstrap コンポーネント（非スコープ）

   出典: exhibition_pre201-tailwind.html の互換 <style> を外部化（s77/pre200/pre201/
         schedule で 3BP 検証済みの確定値）。確定値の正は tasks/tailwind_compat_css_reference.md。
   注意: 本ファイルは「量産対象 128本のクラス被覆監査（Phase 0-3）」の結果に応じて
         未被覆クラスを追記して育てる。追記時は必ず実測値を使い、カタログにも反映する。
   ============================================================================= */

/* ===== §A 実測 base（/style.css 由来。Tailwind preflight が消す要素既定を復元） ===== */
:root {
	--kx-primary: #1a63bc;
	--kx-primary-dark: #0f3d75;
	--kx-text: #333;
	--kx-heading: #111;
	--kx-ff-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "BIZ UDPGothic", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
	--kx-ff-heading: "Hiragino Kaku Gothic ProN", "Hiragino Sans", -apple-system, BlinkMacSystemFont, "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
}

@layer base {
	html {
		font-size: 16px;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		font-size: clamp(1rem, 0.975rem + 0.15vw, 1.0625rem);
		line-height: 1.8;
		letter-spacing: 0.04em;
		color: var(--kx-text);
		font-family: var(--kx-ff-base);
		font-weight: 400;
		-webkit-font-smoothing: auto;
		-moz-osx-font-smoothing: auto;
		text-rendering: optimizeLegibility;
		font-kerning: normal;
		-webkit-tap-highlight-color: rgba(26, 99, 188, 0.1);
	}

	@media (min-width: 768px) and (max-width: 1024px) {
		body {
			line-height: 1.75;
			letter-spacing: 0.035em;
		}
	}

	@media (max-width: 767.98px) {
		body {
			line-height: 1.7;
			letter-spacing: 0.03em;
		}
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: var(--kx-heading);
		font-family: var(--kx-ff-heading);
		font-weight: 700;
		line-height: 1.4;
		letter-spacing: 0.02em;
		font-feature-settings: "palt" 1;
		-webkit-font-feature-settings: "palt" 1;
		margin-top: 0;
		margin-bottom: 1.5rem;
	}

	h1 {
		font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem);
	}

	h2 {
		font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
		margin-top: 2.5rem;
	}

	h3 {
		font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.625rem);
		font-weight: 600;
		margin-top: 2rem;
	}

	h4 {
		font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
		font-weight: 600;
		margin-bottom: 1rem;
	}

	h5 {
		font-size: 1rem;
		font-weight: 600;
		margin-bottom: 1rem;
	}

	h6 {
		font-size: 0.875rem;
		font-weight: 600;
	}

	@media (max-width: 767.98px) {

		h1,
		h2 {
			margin-bottom: 1rem;
		}

		h2 {
			margin-top: 1.75rem;
		}

		h3 {
			margin-top: 1.25rem;
		}
	}

	/* 768-1024 帯の見出し margin（h1 mb / h2 mt+mb）は base 見出し定義の「後」に置く。
	   @media を base 見出しより前に置くと、後続の h1-6 / h2 base ルールに source order で
	   負けて効かない（同特異度・後勝ち）。元 /style.css もこの順序（base→@media）。 */
	@media (min-width: 768px) and (max-width: 1024px) {
		h1 {
			margin-bottom: 1.25rem;
		}

		h2 {
			margin-top: 2.25rem;
			margin-bottom: 1.25rem;
		}
	}

	a {
		color: var(--kx-primary);
		text-decoration: none;
	}

	a:hover {
		color: var(--kx-primary-dark);
	}

	small {
		font-size: 0.875em;
	}

	/* ブロック要素の既定マージン（/style.css: margin-bottom 2rem / mobile 1.5rem）
	   Tailwind preflight が 0 にするため復元。余白の無い <p> 等が詰まるのを防ぐ */
	p,
	ul,
	ol,
	dl,
	table,
	blockquote,
	pre,
	form {
		margin-top: 0;
		margin-bottom: 2rem;
	}

	@media (max-width: 767.98px) {

		p,
		ul,
		ol,
		dl,
		table,
		blockquote,
		pre,
		form {
			margin-bottom: 1.5rem;
		}
	}

	/* リスト既定（preflight が list-style:none / padding:0 にするため実測値で復元） */
	ul,
	ol {
		padding-left: 0;
	}

	ul {
		list-style-type: disc;
	}

	ol {
		list-style-type: decimal;
	}

	ul ul,
	ol ul,
	ul ol,
	ol ol {
		margin-bottom: 0;
	}

	li {
		margin: 0;
		padding: 0;
	}

	/* 画像（Bootstrap reboot 準拠: img は inline / vertical-align middle）。
	   Tailwind preflight が img{display:block} にするため復元。block のままだと
	   <img> 直後の <br> が余計な空行を生み縦位置がずれる。d-block 等のユーティリティは !important で上書き */
	img,
	svg {
		vertical-align: middle;
	}

	img {
		display: inline;
	}

	/* figure（Bootstrap reboot 290: margin 0 0 1rem。preflight が figure{margin:0} にするため復元。
	   欠落すると figure 1個ごとに下 16px 不足＝barrierfree 等の画像列で累積ドリフト） */
	figure {
		margin: 0 0 1rem;
	}

	/* hr（Bootstrap5 reboot 87-95。Tailwind preflight が hr{margin:0} にするため復元。
	   background-color で線を描き border:0。素の <hr> 区切りの margin 1rem が縦位置に効く
	   ＝欠落すると hr 1本ごとに上下計 16px 不足し、tabs/記事で累積ドリフトする） */
	hr {
		margin: 1rem 0;
		color: inherit;
		background-color: currentColor;
		border: 0;
		opacity: 0.25;
	}
	hr:not([size]) {
		height: 1px;
	}
}

/* ===== §C Bootstrap グリッド（非スコープ＝原本BS/Canvasと同じ特異度 0,1,0） ===== */
.container {
	width: 100%;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}
}

/* container-fluid（hero。p-0 でパディングを消す＝全幅） */
.container-fluid {
	width: 100%;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	margin-right: auto;
	margin-left: auto;
}

/* ネストした .container は、元 Bootstrap5 で padding が var(--bs-gutter-x, 0.75rem)。
   .row が --bs-gutter-x:1.5rem を子孫継承するため:
     ・.row 子孫のネスト container（関連イベント等）= 24px
     ・.row 外のネスト container（container>section>container 等）= 既定 0.75rem=12px
   固定 1.5rem だと後者に過剰適用され内容幅 -24px→モバイル折り返し増（info_navi_bf +248）。
   教訓17 の固定値を教訓23（.row gutter var化）と整合する var 方式へ修正（2026-05-31）。 */
.container .container {
	padding-right: var(--bs-gutter-x, 0.75rem);
	padding-left: var(--bs-gutter-x, 0.75rem);
}

.row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	margin-right: calc(-0.5 * var(--bs-gutter-x));
	margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row>* {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-top: var(--bs-gutter-y);
}

/* BS5 gutter ユーティリティ（g/gx/gy × 0-5）。.row の --bs-gutter-x/y を上書き。
   非スコープ 0,1,0。デフォルト .row は gutter-x:1.5rem/gutter-y:0 で従来固定値と同値（非回帰）。 */
.g-0, .gx-0 { --bs-gutter-x: 0; }
.g-0, .gy-0 { --bs-gutter-y: 0; }
.g-1, .gx-1 { --bs-gutter-x: 0.25rem; }
.g-1, .gy-1 { --bs-gutter-y: 0.25rem; }
.g-2, .gx-2 { --bs-gutter-x: 0.5rem; }
.g-2, .gy-2 { --bs-gutter-y: 0.5rem; }
.g-3, .gx-3 { --bs-gutter-x: 1rem; }
.g-3, .gy-3 { --bs-gutter-y: 1rem; }
.g-4, .gx-4 { --bs-gutter-x: 1.5rem; }
.g-4, .gy-4 { --bs-gutter-y: 1.5rem; }
.g-5, .gx-5 { --bs-gutter-x: 3rem; }
.g-5, .gy-5 { --bs-gutter-y: 3rem; }

.col {
	flex: 1 0 0%;
}

.col-6 {
	flex: 0 0 auto;
	width: 50%;
}

.col-12 {
	flex: 0 0 auto;
	width: 100%;
}

@media (min-width: 576px) {
	.col-sm-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (min-width: 768px) {
	.col-md-6 {
		flex: 0 0 auto;
		width: 50%;
	}

	.col-md-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}

	.col-md-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}

	.col-md-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (min-width: 992px) {
	.col-lg-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}

	.col-lg-6 {
		flex: 0 0 auto;
		width: 50%;
	}

	.col-lg-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}
}

@media (min-width: 1200px) {
	.col-xl-3 {
		flex: 0 0 auto;
		width: 25%;
	}

	.col-xl-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
}

.justify-content-center {
	justify-content: center !important;
}

.justify-content-end {
	justify-content: flex-end !important;
}

.align-items-center {
	align-items: center !important;
}

/* ===== §D Bootstrap/Canvas ユーティリティ（非スコープ・!important。原本BSと同特異度 0,1,0。
         site-header/footer は Shadow DOM 隔離のため非スコープでも影響なし） ===== */
.d-flex {
	display: flex !important;
}

.d-block {
	display: block !important;
}

@media (min-width: 768px) {
	.d-md-flex {
		display: flex !important;
	}
}

.flex-row {
	flex-direction: row !important;
}

.flex-column {
	flex-direction: column !important;
}

.flex-shrink-0 {
	flex-shrink: 0 !important;
}

.flex-grow-1 {
	flex-grow: 1 !important;
}

.w-100 {
	width: 100% !important;
}

.p-0 {
	padding: 0 !important;
}

.px-2 {
	padding-right: 0.5rem !important;
	padding-left: 0.5rem !important;
}

.mx-4 {
	margin-right: 1.5rem !important;
	margin-left: 1.5rem !important;
}

.mx-auto {
	margin-right: auto !important;
	margin-left: auto !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-1 {
	margin-top: 0.25rem !important;
}

.mt-5 {
	margin-top: 3rem !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-1 {
	margin-bottom: 0.25rem !important;
}

.mb-2 {
	margin-bottom: 0.5rem !important;
}

.mb-3 {
	margin-bottom: 1rem !important;
}

.mb-4 {
	margin-bottom: 1.5rem !important;
}

.mb-5 {
	margin-bottom: 3rem !important;
}

.text-center {
	text-align: center !important;
}

.text-start {
	text-align: left !important;
}

.text-primary {
	color: #0d6efd !important;
}

.text-smaller {
	font-size: 80% !important;
}

.border {
	border: 1px solid #dee2e6 !important;
}

.border-top {
	border-top: 1px solid #dee2e6 !important;
}

.border-secondary {
	border-color: #6c757d !important;
}

.opacity-25 {
	opacity: 0.25 !important;
}

.rounded {
	border-radius: 0.25rem !important;
}

/* rounded-3（Bootstrap5 .rounded-3 = border-radius-lg 0.5rem）。museum-talk-renderer の赤枠カード（border-danger border-1 rounded-3）で使用。
   未移植だと角丸が出ず直角になる（高さには無影響＝scrollH 検証をすり抜けていた）。 */
.rounded-3 {
	border-radius: 0.5rem !important;
}

/* Canvas ユーティリティ */
.center {
	text-align: center !important;
}

.bottommargin {
	margin-bottom: 3rem !important;
}

/* topmargin family（style.css 626/646/667/688・@media override なし。kmap 等 fancy-title topmargin-lg の上余白 80px が欠落） */
.topmargin {
	margin-top: 3rem !important;
}
.topmargin-sm {
	margin-top: 2rem !important;
}
.topmargin-xs {
	margin-top: 1rem !important;
}
.topmargin-lg {
	margin-top: 5rem !important;
}

.lh20 {
	line-height: 2 !important;
}

/* Bootstrap figure（bootstrap.css 606/610。figure-caption は既存。.figure inline-block 欠落で figure が block 化し親幅に拡大していた） */
.figure {
	display: inline-block;
}
.figure-img {
	margin-bottom: 0.5rem;
	line-height: 1;
}
.figure-caption {
	font-size: 0.875em;
	color: #6c757d;
}

.cst-u {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}

.clearfix::after {
	display: block;
	clear: both;
	content: "";
}

/* img-fluid は非スコープ(0,1,0)。元 Bootstrap と同特異度にし、
   ページ component CSS が source order で勝つ挙動を再現 */
.img-fluid {
	max-width: 100%;
	height: auto;
}

/* ===== §E Canvas/Bootstrap コンポーネント（非スコープ） ===== */
.content-wrap {
	position: relative;
	padding: 80px 0;
	overflow: hidden;
}

/* #content（Canvas /style.css 実測）。#content p の line-height:1.8 は ID 特異度(1,0,1)。 */
#content {
	background-color: #fff;
}

#content p {
	line-height: 1.8;
}

#content .container {
	position: relative;
}

/* heading-block（Canvas /style.css 実測。関連イベント見出し） */
.heading-block {
	margin-bottom: 50px;
}

.heading-block h1,
.heading-block h2,
.heading-block h3,
.heading-block h4 {
	margin-bottom: 0;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 1px;
	color: #333;
}

.heading-block h3 {
	font-size: 28px;
}

@media (max-width: 767.98px) {
	.heading-block h3 {
		font-size: 22px;
	}
}

/* heading-block 下の罫線装飾（Canvas ::after。margin-top30 + border2 = 32px の高さ） */
.heading-block::after {
	content: "";
	display: block;
	margin-top: 30px;
	width: 40px;
	border-top: 2px solid #444;
}

.heading-block.center::after {
	margin: 30px auto 0;
}

/* table（会期 / 会場 / 観覧料。Bootstrap5 実測） */
.table {
	width: 100%;
	margin-bottom: 1rem;
	color: #212529;
	vertical-align: top;
	border-color: #dee2e6;
}

.table> :not(caption)>*>* {
	padding: 0.5rem 0.5rem;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #dee2e6;
}

/* 末尾でないグループ（thead）の最終行セルは border-bottom を currentColor に（Bootstrap5 実測） */
.table> :not(:last-child)> :last-child>* {
	border-bottom-color: currentColor;
}

.cart-product-name a {
	font-weight: bold;
}

/* badge（関連イベント。Bootstrap5 実測） */
.badge {
	display: inline-block;
	padding: 0.35em 0.65em;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.25rem;
}

.bg-danger {
	background-color: #dc3545 !important;
}

/* bg-dark（Bootstrap5 .bg-dark = #212529）。news-renderer の newsBusiness「公告」バッジ（badge bg-dark）と
   buildBadgeOrIcon の inherit fallback で使用。output.css も Tailwind テーマに --color-dark を持たず未生成のため、
   未移植だと .badge の color:#fff が背景無しで描画され公告バッジが視認不能になる（色は scrollH 検証をすり抜ける）。 */
.bg-dark {
	background-color: #212529 !important;
}

/* #gotoTop（Canvas functions.js の置換。表示制御は js2026/page-ui.js） */
#gotoTop {
	display: none;
	z-index: 599;
	position: fixed;
	width: 40px;
	height: 40px;
	background-color: rgba(0, 0, 0, 0.3);
	font-size: 1.25rem;
	line-height: 36px;
	text-align: center;
	color: #fff;
	top: auto;
	left: auto;
	right: 30px;
	bottom: 30px;
	cursor: pointer;
	border-radius: 2px;
}

#gotoTop:hover {
	background-color: #1a63bc;
}

/* =============================================================================
   §C2 / §D2 追加（Phase 1 — 量産128本のクラス被覆監査で確定。本番CSSから実測）
   出典: bootstrap.css / style.css / custom.css。BS の var(--bs-*-rgb) は hex に解決。
   注意: ml-*/mr-*（BS4名）・embed-responsive（BS4）は本番CSSに未定義＝原本でも no-op の
         ため追加しない（近似回避）。multi-rule の component（btn/card/list-group/nav/
         fancy-title/table/divider 等）は各リファレンス確定時に基底ルールごと追記する。
   ============================================================================= */

/* ===== §C2 Bootstrap5 col グリッド 完全版（col-* / col-{sm,md,lg,xl,xxl}-* を網羅）=====
   個別追加では col-sm-4 等の取りこぼしで縦積み→大ドリフトになる（event-260418 で +224px）。
   全列を deterministic な BS5 % で生成して col 系ドリフトを一掃。§C の重複定義は同値で無害。 */
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
	.col-sm-auto { flex: 0 0 auto; width: auto; }
	.col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-sm-3 { flex: 0 0 auto; width: 25%; }
	.col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-sm-6 { flex: 0 0 auto; width: 50%; }
	.col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-sm-9 { flex: 0 0 auto; width: 75%; }
	.col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
	.col-md-auto { flex: 0 0 auto; width: auto; }
	.col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-md-3 { flex: 0 0 auto; width: 25%; }
	.col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-md-6 { flex: 0 0 auto; width: 50%; }
	.col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-md-9 { flex: 0 0 auto; width: 75%; }
	.col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
	.col-lg-auto { flex: 0 0 auto; width: auto; }
	.col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-lg-3 { flex: 0 0 auto; width: 25%; }
	.col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-lg-6 { flex: 0 0 auto; width: 50%; }
	.col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-lg-9 { flex: 0 0 auto; width: 75%; }
	.col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
	.col-xl-auto { flex: 0 0 auto; width: auto; }
	.col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-xl-3 { flex: 0 0 auto; width: 25%; }
	.col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-xl-6 { flex: 0 0 auto; width: 50%; }
	.col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-xl-9 { flex: 0 0 auto; width: 75%; }
	.col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-xl-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1400px) {
	.col-xxl-auto { flex: 0 0 auto; width: auto; }
	.col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-xxl-3 { flex: 0 0 auto; width: 25%; }
	.col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-xxl-6 { flex: 0 0 auto; width: 50%; }
	.col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-xxl-9 { flex: 0 0 auto; width: 75%; }
	.col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-xxl-12 { flex: 0 0 auto; width: 100%; }
}

/* ===== §D2 追加ユーティリティ（Bootstrap5 / Canvas。!important は原実装を継承） ===== */
/* 余白 完全版（BS5 spacing。scale 0=0/1=.25/2=.5/3=1/4=1.5/5=3rem + auto）。
   個別追加では py-4 等の取りこぼしで padding 差→ドリフト（event-260418 welcome で 8px）。
   ml/mr/pl/pr（BS4名）は本番 no-op のため除外。§D(pre201) の重複は同値で無害。 */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.m-auto { margin: auto !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-auto { margin-bottom: auto !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }
/* BS4 名 ml/mr/pl/pr は本番 bootstrap.css(BS5) で未定義=no-op。だが Tailwind output.css が
   同名生成し margin/padding を付けてしまうため 0 へ打ち消して本番忠実(no-op)を再現する。
   kifu/info13 の ml-2/ml-3 で幅-8→テキスト折返し増のドリフトが出ていた（教訓20補完） */
.ml-0,.ml-1,.ml-2,.ml-3,.ml-4,.ml-5,.ml-auto { margin-left: 0 !important; }
.mr-0,.mr-1,.mr-2,.mr-3,.mr-4,.mr-5,.mr-auto { margin-right: 0 !important; }
.pl-0,.pl-1,.pl-2,.pl-3,.pl-4,.pl-5 { padding-left: 0 !important; }
.pr-0,.pr-1,.pr-2,.pr-3,.pr-4,.pr-5 { padding-right: 0 !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

@media (min-width: 576px) {
	.m-sm-3 { margin: 1rem !important; }
	.mb-sm-0 { margin-bottom: 0 !important; }
	.mt-sm-0 { margin-top: 0 !important; }
}

@media (min-width: 768px) {
	.mx-md-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
	.p-md-4 { padding: 1.5rem !important; }
	.mb-md-0 { margin-bottom: 0 !important; }
	.mt-md-0 { margin-top: 0 !important; }
}

/* leftmargin 系（Canvas /style.css） */
.leftmargin { margin-left: 3rem !important; }
.leftmargin-sm { margin-left: 2rem !important; }
.leftmargin-xs { margin-left: 1rem !important; }

/* display / flex */
.flex-wrap { flex-wrap: wrap !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }

@media (min-width: 768px) {
	.justify-content-md-center { justify-content: center !important; }
}

@media (min-width: 1200px) {
	.d-xl-flex { display: flex !important; }
}

/* テキスト色 / サイズ（BS の var(--bs-*-rgb) は hex 解決。custom.css 上書きを優先反映） */
.text-danger { color: #dc3545 !important; }
.text-muted { color: #6c757d !important; }
.text-right { text-align: right !important; }
.text-white { color: #ffffff !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }
.text-dark { color: #212529 !important; }
.text-black { color: #030303 !important; }
.text-info { color: #0dcaf0 !important; }
.text-xlarger { font-size: 150% !important; }
.fs-6 { font-size: 1rem !important; }
.lead { font-size: 1.25rem; font-weight: 300; }

/* 背景 / 罫 / 影 */
.bg-light { background-color: #f8f9fa !important; }
.bg-primary { background-color: #0d6efd !important; }
.border-danger { border-color: #dc3545 !important; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }

/* page-title-right（Canvas。#content の p に付く右寄せ。breadcrumb 位置の派生は本文に無影響） */
.page-title-right { text-align: right; }

/* Canvas テキスト装飾（custom.css / style.css） */
.ao-text { color: #1a63bc !important; }
.red-text { color: #dc3545 !important; }
.aka-text { color: #890e08 !important; }
.font-weight-bold { font-weight: bold !important; }
.ls2 { letter-spacing: 2px !important; }
.ls3 { letter-spacing: 3px !important; }
.f-min { font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", serif !important; }

/* マーカー線（既存装飾の再現。custom.css。design.md §2 は新規装飾の禁止でありこれは既存再現） */
.marker-r { background: linear-gradient(transparent 75%, #ff9393 75%); font-weight: bold; }

/* mark（Bootstrap5。preflight 対策でスコープ復元） */
mark,
.mark { padding: 0.2em; background-color: #fcf8e3; }

/* ===== §E2 #page-title / breadcrumb（全ページ共通 chrome。Canvas /style.css 実測）=====
   抽出元の pre201 は hero 画像で #page-title を持たなかったため baseline に欠落していた。
   記事系ページは #page-title.page-title-mini + 右上 absolute の breadcrumb が標準。
   これが無いと breadcrumb の <ol> が縦に伸び #content が約 +113px 下方へずれる。 */
#page-title {
	position: relative;
	padding: 4rem 0;
	background-color: #f5f5f7;
	border-bottom: 1px solid #eee;
}

/* 本番 /style.css 7096。absolute の .breadcrumb（right:15px）の位置基準を #page-title(全幅)ではなく
   .container(1140px中央寄せ)にする。これが欠落していたため breadcrumb が画面右端に張り付き、
   元デザイン（コンテンツ右端=h1 と同じ右境界から15px）とズレていた（教訓19: chrome 規則の移植漏れ）。 */
#page-title .container {
	position: relative;
}

#page-title.page-title-mini {
	padding: 20px 0;
}

#page-title h1 {
	padding: 0;
	margin: 0;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 1px;
	color: #333;
	font-size: 2rem;
	text-transform: none;
}

/* page-title-mini は h1 を font-size:18px / color:#444 に上書き（line-height は base の 1 を継承） */
#page-title.page-title-mini h1 {
	font-weight: 600;
	font-size: 18px;
	color: #444;
}

.breadcrumb {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	background: transparent;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	font-size: 0.9em;
}

.breadcrumb-item {
	color: #6c757d;
}

.breadcrumb-item a {
	color: #555;
}

.breadcrumb-item a:hover {
	color: #1a63bc;
}

.breadcrumb-item + .breadcrumb-item::before {
	float: left;
	padding-right: 0.5rem;
	color: #6c757d;
	content: "/";
}

@media (max-width: 767.98px) {
	#page-title {
		padding: 2rem 0;
		text-align: center;
	}

	/* モバイルは h1 line-height 1.5 / font-size calc(1rem+2vw)（mini は font-size 18px が特異度で勝つ
	   → 18px × 1.5 = 27px。これを欠くと #page-title が 9px 縮み全体が上方へずれる） */
	#page-title h1 {
		line-height: 1.5;
		font-size: calc(1rem + 2vw);
	}

	.breadcrumb {
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		margin: 20px 0 0 !important;
		justify-content: center;
		transform: translateY(0);
	}
}

/* ===== §E3 Bootstrap5 コンポーネント（非スコープ・実測。card/btn/list-group/nav/table-sm）=====
   museum_info01 で card 未対応により -54px ズレ。レイアウトに効く基底（padding/border/display/
   width/font）を移植。hover/focus 等の色のみ状態は省略（レイアウト無影響）。 */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 0.25rem;
}
.card-body { flex: 1 1 auto; padding: 1rem 1rem; }
.card-title { margin-bottom: 0.5rem; }
.card-text { margin-bottom: 1rem; }
.card-img-top {
	width: 100%;
	border-top-left-radius: calc(0.25rem - 1px);
	border-top-right-radius: calc(0.25rem - 1px);
}
.card-header {
	padding: 0.5rem 1rem;
	margin-bottom: 0;
	background-color: rgba(0, 0, 0, 0.03);
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* btn（Bootstrap5 実測。基底＋色バリアント。hover/active の色変化は省略） */
.btn {
	display: inline-block;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	border-radius: 0.25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-sm,
.btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; }
.btn-primary { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
.btn-outline-primary { color: #0d6efd; border-color: #0d6efd; }
.btn-outline-secondary { color: #6c757d; border-color: #6c757d; }
.btn-light { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
.btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; }

/* table バリアント（Bootstrap5 実測。.table 基底は §E にあり） */
.table-sm > :not(caption) > * > * { padding: 0.25rem 0.25rem; }

/* 休館日カレンダー（museum-calendar-auto.js が #closed-calendar-container に注入する td/th クラス。
   本番 css2022/989style.css 8-18 実測）。元は 989style.css 読込で着色していたが Tailwind 版は
   未読込のため、休館日(kyukanbi)/夜間(entyo)のセル背景と日土の曜日色が欠落＝休館日が色分けされなかった。
   sun/sat/kyukanbi/entyo は calendar 専用クラス＝他テーブルに無影響。 */
table th.sun { color: #a94442; }
table th.sat { color: #3370cc; }
table td.kyukanbi { background-color: #f8cac5; }
table td.entyo { background-color: #d8ebfb; }

/* list-group（Bootstrap5 実測） */
.list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: 0.25rem; }
.list-group-item {
	position: relative;
	display: block;
	padding: 0.5rem 1rem;
	color: #212529;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-item-action { width: 100%; color: #495057; text-align: inherit; }

/* nav（Bootstrap5 実測） */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-link {
	display: block;
	padding: 0.5rem 1rem;
	color: #0d6efd;
	text-decoration: none;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.nav-fill > .nav-link,
.nav-fill .nav-item { flex: 1 1 auto; text-align: center; }
.nav-pills .nav-link { border-radius: 0.25rem; }
.nav-pills .nav-link.active { color: #fff; background-color: #0d6efd; }

/* ===== fancy-title / title-bottom-border / title-block（見出し装飾。Canvas /style.css 実測）=====
   fancy-title(54本)=左右二重罫の見出し、title-bottom-border(50本)=下線見出し、title-block(33本)=左罫見出し。
   museum_info01 の h3 は <div class="fancy-title title-bottom-border"> 内＝下線(padding 0.75rem + border 2px)。 */
.fancy-title { position: relative; display: flex; align-items: center; margin-bottom: 2rem; }
.fancy-title h1, .fancy-title h2, .fancy-title h3, .fancy-title h4, .fancy-title h5, .fancy-title h6 { position: relative; margin-bottom: 0; }
.fancy-title::before, .fancy-title::after { content: ""; flex-basis: 0; flex-grow: 1; max-width: 100%; height: 0; border-top: 3px double #e5e5e5; }
.fancy-title::before { display: none; margin-right: 0.75rem; }
.fancy-title::after { margin-left: 0.75rem; }
.title-border::before, .title-border::after { border-top-width: 1px; border-top-style: solid; }
.title-border-color::before, .title-border-color::after { border-top: 1px solid #1a63bc !important; }
.title-center::before { display: block; }
.title-bottom-border::before, .title-bottom-border::after { display: none; }
.title-bottom-border h1, .title-bottom-border h2, .title-bottom-border h3, .title-bottom-border h4, .title-bottom-border h5, .title-bottom-border h6 { width: 100%; padding: 0 0 0.75rem; border-bottom: 2px solid #1a63bc; }

/* title-block（左罫見出し。Canvas /style.css） */
.title-block { padding: 2px 0 3px 20px; border-left: 7px solid #1a63bc; margin-bottom: 30px; }
.title-block h1, .title-block h2, .title-block h3, .title-block h4 { margin-bottom: 0; }

/* ===== §E5 Canvas component（line/divider/gutter/col-mb/entry/feature-box）＋追加BSユーティリティ ===== */
/* line（水平罫） */
.line, .double-line { clear: both; position: relative; width: 100%; margin: 4rem 0; border-top: 1px solid #eee; }
.line.line-sm { margin: 2rem 0; }

/* divider（中央装飾罫。Canvas catalog 値） */
.divider { position: relative; display: flex; align-items: center; overflow: hidden; margin: 3rem auto; color: #e5e5e5; width: 100%; }
.divider::after, .divider::before { content: ""; flex-basis: 0; flex-grow: 1; max-width: 100%; height: 1px; background-color: #eee; }
.divider::before { display: none; margin-right: 0.5rem; }
.divider::after { margin-left: 0.5rem; }
.divider-center::before { display: block; }
.divider i, .divider [class^="icon-"] { font-size: 18px; line-height: 1; }

/* Canvas gutter（--custom-gutter 駆動。教訓18: 上 -gutter / 左右 -gutter/2、子col 上 gutter / 左右 gutter/2） */
[class*="gutter-"] {
	--custom-gutter: var(--bs-gutter-x, 1.5rem);
	margin-top: calc(var(--custom-gutter) * -1);
	margin-right: calc(var(--custom-gutter) / -2);
	margin-left: calc(var(--custom-gutter) / -2);
}
[class*="gutter-"] > .col,
[class*="gutter-"] > [class*="col-"] {
	padding-right: calc(var(--custom-gutter) / 2);
	padding-left: calc(var(--custom-gutter) / 2);
	margin-top: var(--custom-gutter);
}
.gutter-10 { --custom-gutter: 10px; }
.gutter-20 { --custom-gutter: 20px; }
.gutter-30 { --custom-gutter: 30px; }
.gutter-40 { --custom-gutter: 40px; }
.gutter-50 { --custom-gutter: 50px; }

/* col-mb（--col-mb 駆動。カード下の行間） */
[class*="col-mb-"] { margin-bottom: calc(var(--col-mb) / -1); }
[class*="col-mb-"] > .col,
[class*="col-mb-"] > [class*="col-"] { padding-bottom: var(--col-mb); }
.col-mb-10 { --col-mb: 10px; }
.col-mb-20 { --col-mb: 20px; }
.col-mb-30 { --col-mb: 30px; }
.col-mb-40 { --col-mb: 40px; }
.col-mb-50 { --col-mb: 50px; }
.col-mb-80 { --col-mb: 80px; }

/* 記事グリッド entry（Canvas blog） */
.entry { position: relative; }
.entry-image { margin-bottom: 30px; }
.entry-image, .entry-image > a, .entry-image img { display: block; position: relative; width: 100%; height: auto; }
.entry-title h2, .entry-title h3, .entry-title h4, .entry-title h5 { margin: 0; text-transform: none; letter-spacing: 1px; }
.grid-inner { position: relative; overflow: hidden; width: 100%; }

/* feature-box / media-box（Canvas） */
.fbox-content { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; padding: 0 0.75rem; }
.fbox-content h3 { font-size: 1rem; font-weight: 600; text-transform: none; margin-bottom: 0; color: #333; }
.fbox-content p { margin-top: 0.5rem; margin-bottom: 0; color: #999; }
.media-box { padding: 0; margin-left: 0; margin-right: 0; flex-direction: column; }
.media-box .fbox-media { margin: 0 0 1.5rem; }
.media-box .fbox-media, .media-box .fbox-media a, .media-box .fbox-media img { position: relative; display: block; width: 100%; height: auto; }

/* 追加 BS ユーティリティ（bootstrap.css 実値） */
.d-none { display: none !important; }
.d-inline-block { display: inline-block !important; }
.d-inline { display: inline !important; }
.h-100 { height: 100% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.border-0 { border: 0 !important; }
.border-primary { border-color: #0d6efd !important; }
.small { font-size: 0.875em; }
.alert { position: relative; padding: 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; }
.alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }

/* ===== §E6 追加（中程度クラスタの drift 解消。table-responsive/img-thumbnail/d-inline-flex/list-unstyled/float） ===== */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.img-thumbnail { padding: 0.25rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; max-width: 100%; height: auto; }
.d-inline-flex { display: inline-flex !important; }
.list-unstyled { padding-left: 0; list-style: none; }
.float-start { float: left !important; }
.float-end { float: right !important; }
@media (min-width: 576px) { .float-sm-start { float: left !important; } .float-sm-end { float: right !important; } }
@media (min-width: 768px) { .float-md-start { float: left !important; } .float-md-end { float: right !important; } }

/* ===== §E7 追加（j-kouko/ouchi 他カードグリッド系。本番 /style.css 実測） ===== */

/* グローバル iframe（本番 /style.css 329: iframe{width:100%;border:0}）。
   YouTube 等を幅100%化 → width/height 属性（560×315）のアスペクト比で高さ自動算出（幅×0.5625）。
   これが無いと iframe が 560×315 固定のままカード幅を超え、高さも縮まず縦に膨らむ。 */
iframe { width: 100%; border: 0; }

/* entry-image 内 iframe/video（本番 /style.css 8303-8310。Blog 記事メディア） */
.entry-image iframe { display: block; }
.entry-image video { display: block; width: 100%; }

/* FitVids レスポンシブ動画ラッパー（本番 plugins.min.js が動的注入する fit-vids-style と同一。
   page-ui.js の initFitVids が YouTube/Vimeo iframe をこの wrapper でラップ＝16:9 等を維持。
   iframe は属性比で aspect-ratio が効かない要素のため、padding-top% ボックス＋absolute で再現） */
.fluid-width-video-wrapper { width: 100%; position: relative; padding: 0; }
.fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* post-grid（Blog grid。本番 /style.css 8562-8570） */
.post-grid .entry { margin-bottom: 30px; }
.post-grid .entry-title h2 { font-size: 1.125rem; letter-spacing: 0; font-weight: 600; }

/* Display utilities 完全セット（Bootstrap5。教訓20: col/spacing 同様 deterministic な体系は全生成する。
   bp 付き d-{sm,md,lg,xl,xxl}-* の欠落を解消＝d-lg-block/d-lg-none 等で PC/SP 出し分けが効く。
   既存の散在定義（§A/§D/§E5/§E6）と同値で無害） */
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-grid { display: grid !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-none { display: none !important; }
@media (min-width: 576px) {
	.d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-block { display: block !important; } .d-sm-grid { display: grid !important; } .d-sm-table { display: table !important; } .d-sm-table-row { display: table-row !important; } .d-sm-table-cell { display: table-cell !important; } .d-sm-flex { display: flex !important; } .d-sm-inline-flex { display: inline-flex !important; } .d-sm-none { display: none !important; }
}
@media (min-width: 768px) {
	.d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-block { display: block !important; } .d-md-grid { display: grid !important; } .d-md-table { display: table !important; } .d-md-table-row { display: table-row !important; } .d-md-table-cell { display: table-cell !important; } .d-md-flex { display: flex !important; } .d-md-inline-flex { display: inline-flex !important; } .d-md-none { display: none !important; }
}
@media (min-width: 992px) {
	.d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } .d-lg-grid { display: grid !important; } .d-lg-table { display: table !important; } .d-lg-table-row { display: table-row !important; } .d-lg-table-cell { display: table-cell !important; } .d-lg-flex { display: flex !important; } .d-lg-inline-flex { display: inline-flex !important; } .d-lg-none { display: none !important; }
}
@media (min-width: 1200px) {
	.d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } .d-xl-grid { display: grid !important; } .d-xl-table { display: table !important; } .d-xl-table-row { display: table-row !important; } .d-xl-table-cell { display: table-cell !important; } .d-xl-flex { display: flex !important; } .d-xl-inline-flex { display: inline-flex !important; } .d-xl-none { display: none !important; }
}
@media (min-width: 1400px) {
	.d-xxl-inline { display: inline !important; } .d-xxl-inline-block { display: inline-block !important; } .d-xxl-block { display: block !important; } .d-xxl-grid { display: grid !important; } .d-xxl-table { display: table !important; } .d-xxl-table-row { display: table-row !important; } .d-xxl-table-cell { display: table-cell !important; } .d-xxl-flex { display: flex !important; } .d-xxl-inline-flex { display: inline-flex !important; } .d-xxl-none { display: none !important; }
}

/* ===== §E8 Canvas toggle / accordion（本番 /style.css 12403-12494 実測。非スコープ 0,1,0） =====
   page-ui.js の initToggle が .toggle-active を付与し、CSS で .toggle-content を開閉する。
   本番は jQuery で inline に開閉するため、vanilla 用に `.toggle.toggle-active > .toggle-content { display:block }`
   を追加（s77-tailwind のページ個別 style 867 相当）。s77/ouchi-3/exhibition 系で共通。
   .toggle 不使用ページには無影響（.toggle-content は既定 display:none）。 */
.toggle { display: block; position: relative; margin: 0 0 20px 0; }
.toggle-header, .accordion-header { position: relative; display: flex; flex-wrap: wrap; margin: 0 -5px; cursor: pointer; color: #444; font-size: 1rem; font-weight: 700; }
.toggle-icon, .accordion-icon { flex: 0 0 auto; width: auto; max-width: 100%; padding: 0 5px; text-align: center; }
.toggle-icon i, .toggle-icon span { width: 1rem; }
.toggle-title, .accordion-title { flex-basis: 0; flex-grow: 1; max-width: 100%; padding: 0 5px; }
.toggle:not(.toggle-active) > .toggle-header .toggle-open, .toggle-active > .toggle-header .toggle-closed { display: none; }
.toggle-active > .toggle-header .toggle-open { display: inline-block; }
.toggle-content, .accordion-content { display: none; position: relative; padding: 0.75rem 0; }
.toggle.toggle-active > .toggle-content { display: block; }
.toggle-bg .toggle-header { background-color: #eee; margin: 0; padding: 0.75rem; border-radius: 2px; }
.toggle-bg .toggle-content { padding: 1rem 0.75rem; }
.toggle-border { border: 1px solid #ccc; border-radius: 4px; }
.toggle-border .toggle-header { padding: 0.75rem; margin: 0; }
.toggle-border .toggle-content { padding: 1rem; padding-top: 0; }

/* ===== §E9 Canvas tabs（本番 /style.css 12590-12940 実測。非スコープ 0,1,0） =====
   page-ui.js の initTabs が .ui-tabs-active を付与＋tab-content の表示を切替。
   museum_info05（side-tabs）/ exhibition 系 tabs 共通。
   responsive-tabs（モバイルで tab→accordion/select 化）は本番 functions.js の JS 挙動で CSS 定義は無い＝別途。 */
.tabs { position: relative; margin: 0 0 30px 0; }
.tab-nav { display: flex; flex-wrap: wrap; margin: 0; border-bottom: 1px solid #ddd; list-style: none; padding: 0 15px; }
.tab-nav li { flex: 0 0 auto; width: auto; max-width: 100%; border: 1px solid #ddd; border-bottom: 0; border-left: 0; height: 41px; text-align: center; }
.tab-nav li:first-child { border-left: 1px solid #ddd; }
.tab-nav li a { display: block; padding: 0 15px; color: #444; height: 40px; line-height: 40px; background-color: #f5f5f7; font-weight: bold; }
@media (max-width: 767.98px) { .tab-nav li a { font-size: 0.875rem; } }
.tab-nav li.ui-tabs-active a { position: relative; top: 1px; background-color: #fff; }
.tab-nav i { position: relative; top: 1px; margin-right: 3px; }
.tab-container { position: relative; padding: 20px 0 0; }
.tabs .tab-content:not(:first-child) { display: none; }
/* side-tabs（PC: tab-nav を左サイドに縦並び。本番 12834-12884 @media 768+） */
@media (min-width: 768px) {
	.side-tabs { display: flex; flex-wrap: wrap; }
	.side-tabs .tab-nav { flex: 0 0 auto; flex-flow: column; min-width: 200px; width: auto; max-width: 100%; padding: 20px 0; border-bottom: 0; border-right: 1px solid #ddd; }
	.side-tabs .tab-nav li { border: 1px solid #ddd; border-right: 0; border-top: 0; height: auto; text-align: left; }
	.side-tabs .tab-nav li:first-child { margin-left: 0; border-top: 1px solid #ddd; border-left: 1px solid #ddd; }
	.side-tabs .tab-nav li a { height: auto; line-height: 44px; }
	.side-tabs .tab-nav li.ui-tabs-active a { top: 0; right: -1px; }
	.side-tabs .tab-container { flex-basis: 0; flex-grow: 1; padding: 15px 0 0 20px; }
}

/* ===== §E10 Canvas sidenav（本番 /style.css 12947-13044 実測。非スコープ 0,1,0） =====
   hshf/index 等の「サイドナビ型タブ」（<div data-plugin="tabs"> 内 .sidenav）。
   page-ui.js の initSideNav が li > a[href="#id"] の参照先パネルを切替し、
   アクティブ <li> に .ui-tabs-active を付与する（下記 .sidenav > .ui-tabs-active > a が反応）。
   .sidenav 不使用ページには無影響。 */
.sidenav { width: 100%; padding: 0; background-color: #fff; border-radius: 4px; }
.sidenav li { list-style-type: none; }
.sidenav li a { display: block; position: relative; margin: 0 0 -1px; padding: 11px 20px 11px 14px; border: 1px solid #e5e5e5; border-right-width: 2px; color: #666; }
.sidenav > li:first-child > a { border-radius: 4px 4px 0 0; }
.sidenav > li:last-child > a { border-radius: 0 0 4px 4px; border-bottom-width: 2px; }
.sidenav > .ui-tabs-active > a, .sidenav > .ui-tabs-active > a:hover { position: relative; z-index: 2; border-color: rgba(0, 0, 0, 0.1) !important; color: #fff !important; font-weight: 700; background-color: #1a63bc !important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }
.sidenav li ul { display: none; }
.sidenav li.ui-tabs-active ul { display: block; }
.sidenav li li a { padding: 6px 20px 6px 35px; font-size: 0.875rem; border-top: none; border-bottom: none; }
.sidenav li li:first-child a { padding-top: 20px; }
.sidenav li li:last-child a { padding-bottom: 20px; }
.sidenav li i { position: relative; top: 1px; margin-right: 6px; font-size: 0.875rem; text-align: center; width: 16px; }
.sidenav .icon-chevron-right { position: absolute; width: 14px; height: 14px; top: 50%; left: auto; right: 6px; margin-top: -8px; margin-right: 0; opacity: 0.4; font-size: 12px !important; }
.sidenav > li > a:hover { background-color: #f5f5f5; color: #222; }
.sidenav a:hover .icon-chevron-right { opacity: 0.5; }
.sidenav .ui-tabs-active .icon-chevron-right, .sidenav .ui-tabs-active a:hover .icon-chevron-right { opacity: 1; }

/* ===== §E11 Canvas align-wide ユーティリティ（本番 /style.css 1640-1680 実測。非スコープ 0,1,0） =====
   entry-image 等を container 外へ「全幅ブレイクアウト」させる（hshf/index の top-img 等）。
   PC は固定幅（lg=960/xl=1140/xxl=1320）、≤991.98px は 100vw。full は常時 100vw。
   deterministic な体系のため lg/xl/xxl/full を完全生成（教訓20）。未使用ページには無影響。 */
.align-wide-lg { margin-left: calc(50% - 480px) !important; margin-right: calc(50% - 480px) !important; max-width: 960px !important; width: 960px !important; }
.align-wide-xl { margin-left: calc(50% - 570px) !important; margin-right: calc(50% - 570px) !important; max-width: 1140px !important; width: 1140px !important; }
.align-wide-xxl { margin-left: calc(50% - 660px) !important; margin-right: calc(50% - 660px) !important; max-width: 1320px !important; width: 1320px !important; }
@media (max-width: 991.98px) {
	.align-wide-lg, .align-wide-xl, .align-wide-xxl { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: 100vw !important; width: 100vw !important; }
}
.align-wide-full { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: 100vw !important; width: 100vw !important; }

/* ===== §E12 height(min-vh) + hero slider（本番 style.css 2329-2548 / 6254-6585 / swiper.css 実測。非スコープ 0,1,0） =====
   20th/brand 等の全画面 hero（#slider.slider-element.swiper_wrapper.min-vh-*）。単一静的スライドは Swiper JS 不要。
   data-animate は装飾＝終状態（表示）を再現し opacity:0 ルールは入れない。未使用ページには無影響。 */
/* min-vh base */
.min-vh-100 { min-height: 100vh !important; }
.min-vh-75 { min-height: 75vh !important; }
.min-vh-60 { min-height: 60vh !important; }
.min-vh-50 { min-height: 50vh !important; }
.min-vh-40 { min-height: 40vh !important; }
.min-vh-25 { min-height: 25vh !important; }
.min-vh-0 { min-height: 0 !important; }
@media (min-width: 576px) {
	.min-vh-sm-100 { min-height: 100vh !important; }
	.min-vh-sm-75 { min-height: 75vh !important; }
	.min-vh-sm-60 { min-height: 60vh !important; }
	.min-vh-sm-50 { min-height: 50vh !important; }
	.min-vh-sm-40 { min-height: 40vh !important; }
	.min-vh-sm-25 { min-height: 25vh !important; }
	.min-vh-sm-0 { min-height: 0 !important; }
}
@media (min-width: 768px) {
	.min-vh-md-100 { min-height: 100vh !important; }
	.min-vh-md-75 { min-height: 75vh !important; }
	.min-vh-md-60 { min-height: 60vh !important; }
	.min-vh-md-50 { min-height: 50vh !important; }
	.min-vh-md-40 { min-height: 40vh !important; }
	.min-vh-md-25 { min-height: 25vh !important; }
	.min-vh-md-0 { min-height: 0 !important; }
}
@media (min-width: 992px) {
	.min-vh-lg-100 { min-height: 100vh !important; }
	.min-vh-lg-75 { min-height: 75vh !important; }
	.min-vh-lg-60 { min-height: 60vh !important; }
	.min-vh-lg-50 { min-height: 50vh !important; }
	.min-vh-lg-40 { min-height: 40vh !important; }
	.min-vh-lg-25 { min-height: 25vh !important; }
	.min-vh-lg-0 { min-height: 0 !important; }
}
@media (min-width: 1200px) {
	.min-vh-xl-100 { min-height: 100vh !important; }
	.min-vh-xl-75 { min-height: 75vh !important; }
	.min-vh-xl-60 { min-height: 60vh !important; }
	.min-vh-xl-50 { min-height: 50vh !important; }
	.min-vh-xl-40 { min-height: 40vh !important; }
	.min-vh-xl-25 { min-height: 25vh !important; }
	.min-vh-xl-0 { min-height: 0 !important; }
}
/* hero slider（slider-element/swiper_wrapper。本番 style.css 6254-6585 / swiper.css base 実測） */
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; }
.swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; }
.slider-element { position: relative; width: 100%; overflow: hidden; }
.slider-inner { position: absolute; overflow: hidden; opacity: 1; visibility: visible; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.h-auto:not(.slider-parallax) .slider-inner, .h-auto .swiper-container, .min-vh-0:not(.slider-parallax) .slider-inner, .min-vh-0 .swiper-container { position: relative !important; height: auto !important; }
.swiper_wrapper { position: relative; width: 100%; overflow: hidden; }
.swiper_wrapper .swiper-container { position: absolute; width: 100%; height: 100%; margin: 0; }
.swiper_wrapper .swiper-slide { position: relative; margin: 0; overflow: hidden; }
.slider-element .video-wrap, .swiper-slide .yt-bg-player, .swiper-slide-bg { position: absolute; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; }
.swiper-slide-bg { background-position: center center; background-repeat: no-repeat; background-size: cover; }
.slider-element .container, .slider-element .container-fluid { position: relative; height: 100%; }
.slider-element.canvas-slider .swiper-slide img { width: 100%; }
.slider-caption { position: relative; display: flex; height: 100%; flex-flow: column; justify-content: center; z-index: 20; max-width: 550px; color: #eee; font-size: 1.375rem; font-weight: 300; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); }
.slider-caption:not(.dark), .slider-caption:not(.dark) h2 { color: #222; text-shadow: none; }
.slider-caption h2 { font-size: 4rem; letter-spacing: 2px; text-transform: none; font-weight: 700; line-height: 1; margin-bottom: 0; }
.slider-caption p { margin-top: 30px; margin-bottom: 10px; font-size: 1.5rem; }
@media (max-width: 991.98px) {
	.swiper_wrapper .slider-caption h2 { font-size: 5.5vw; }
	.swiper_wrapper .slider-caption p { font-size: 2.6vw; }
}
.slider-caption.slider-caption-right { margin-left: auto; }
.slider-caption.slider-caption-center { position: relative; max-width: 800px; text-align: center; margin: 0 auto; left: 0; right: 0; }
/* #slider モバイル flex override（本番 slider.css 84-104）。ID(1,0,0)+!important が .d-none(0,1,0)+!important に勝ち、
   `d-none d-xl-block` の hero も ≤991.98px で表示される（inline height で高さ確定）。欠落で map系 hero が -700px 縦欠落していた。 */
@media (max-width: 991.98px) {
	#slider { display: flex !important; flex-direction: column; justify-content: center; }
	#slider .slider-inner { position: relative; display: flex; flex-grow: 1; align-items: center; }
}

/* ===== §D3 レスポンシブ spacing 完全生成（BS5。sm576/md768/lg992/xl1200/xxl1400。軸→単辺順。非スコープ 0,1,0） =====
   ms-lg-5 等。教訓20（deterministic は完全生成）＋教訓22（単辺は軸の後）。 */
@media (min-width: 576px) {
	.m-sm-0 { margin: 0 !important; }
	.m-sm-1 { margin: 0.25rem !important; }
	.m-sm-2 { margin: 0.5rem !important; }
	.m-sm-3 { margin: 1rem !important; }
	.m-sm-4 { margin: 1.5rem !important; }
	.m-sm-5 { margin: 3rem !important; }
	.m-sm-auto { margin: auto !important; }
	.mx-sm-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-sm-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
	.mx-sm-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
	.mx-sm-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
	.mx-sm-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
	.mx-sm-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-sm-auto { margin-left: auto !important; margin-right: auto !important; }
	.my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-sm-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
	.my-sm-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
	.my-sm-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-sm-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-sm-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-sm-auto { margin-top: auto !important; margin-bottom: auto !important; }
	.mt-sm-0 { margin-top: 0 !important; }
	.mt-sm-1 { margin-top: 0.25rem !important; }
	.mt-sm-2 { margin-top: 0.5rem !important; }
	.mt-sm-3 { margin-top: 1rem !important; }
	.mt-sm-4 { margin-top: 1.5rem !important; }
	.mt-sm-5 { margin-top: 3rem !important; }
	.mt-sm-auto { margin-top: auto !important; }
	.me-sm-0 { margin-right: 0 !important; }
	.me-sm-1 { margin-right: 0.25rem !important; }
	.me-sm-2 { margin-right: 0.5rem !important; }
	.me-sm-3 { margin-right: 1rem !important; }
	.me-sm-4 { margin-right: 1.5rem !important; }
	.me-sm-5 { margin-right: 3rem !important; }
	.me-sm-auto { margin-right: auto !important; }
	.mb-sm-0 { margin-bottom: 0 !important; }
	.mb-sm-1 { margin-bottom: 0.25rem !important; }
	.mb-sm-2 { margin-bottom: 0.5rem !important; }
	.mb-sm-3 { margin-bottom: 1rem !important; }
	.mb-sm-4 { margin-bottom: 1.5rem !important; }
	.mb-sm-5 { margin-bottom: 3rem !important; }
	.mb-sm-auto { margin-bottom: auto !important; }
	.ms-sm-0 { margin-left: 0 !important; }
	.ms-sm-1 { margin-left: 0.25rem !important; }
	.ms-sm-2 { margin-left: 0.5rem !important; }
	.ms-sm-3 { margin-left: 1rem !important; }
	.ms-sm-4 { margin-left: 1.5rem !important; }
	.ms-sm-5 { margin-left: 3rem !important; }
	.ms-sm-auto { margin-left: auto !important; }
	.p-sm-0 { padding: 0 !important; }
	.p-sm-1 { padding: 0.25rem !important; }
	.p-sm-2 { padding: 0.5rem !important; }
	.p-sm-3 { padding: 1rem !important; }
	.p-sm-4 { padding: 1.5rem !important; }
	.p-sm-5 { padding: 3rem !important; }
	.px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-sm-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
	.px-sm-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
	.px-sm-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
	.px-sm-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
	.px-sm-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
	.py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-sm-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
	.py-sm-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.py-sm-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-sm-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-sm-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
	.pt-sm-0 { padding-top: 0 !important; }
	.pt-sm-1 { padding-top: 0.25rem !important; }
	.pt-sm-2 { padding-top: 0.5rem !important; }
	.pt-sm-3 { padding-top: 1rem !important; }
	.pt-sm-4 { padding-top: 1.5rem !important; }
	.pt-sm-5 { padding-top: 3rem !important; }
	.pe-sm-0 { padding-right: 0 !important; }
	.pe-sm-1 { padding-right: 0.25rem !important; }
	.pe-sm-2 { padding-right: 0.5rem !important; }
	.pe-sm-3 { padding-right: 1rem !important; }
	.pe-sm-4 { padding-right: 1.5rem !important; }
	.pe-sm-5 { padding-right: 3rem !important; }
	.pb-sm-0 { padding-bottom: 0 !important; }
	.pb-sm-1 { padding-bottom: 0.25rem !important; }
	.pb-sm-2 { padding-bottom: 0.5rem !important; }
	.pb-sm-3 { padding-bottom: 1rem !important; }
	.pb-sm-4 { padding-bottom: 1.5rem !important; }
	.pb-sm-5 { padding-bottom: 3rem !important; }
	.ps-sm-0 { padding-left: 0 !important; }
	.ps-sm-1 { padding-left: 0.25rem !important; }
	.ps-sm-2 { padding-left: 0.5rem !important; }
	.ps-sm-3 { padding-left: 1rem !important; }
	.ps-sm-4 { padding-left: 1.5rem !important; }
	.ps-sm-5 { padding-left: 3rem !important; }
}
@media (min-width: 768px) {
	.m-md-0 { margin: 0 !important; }
	.m-md-1 { margin: 0.25rem !important; }
	.m-md-2 { margin: 0.5rem !important; }
	.m-md-3 { margin: 1rem !important; }
	.m-md-4 { margin: 1.5rem !important; }
	.m-md-5 { margin: 3rem !important; }
	.m-md-auto { margin: auto !important; }
	.mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-md-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
	.mx-md-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
	.mx-md-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
	.mx-md-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
	.mx-md-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-md-auto { margin-left: auto !important; margin-right: auto !important; }
	.my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-md-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
	.my-md-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
	.my-md-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-md-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-md-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-md-auto { margin-top: auto !important; margin-bottom: auto !important; }
	.mt-md-0 { margin-top: 0 !important; }
	.mt-md-1 { margin-top: 0.25rem !important; }
	.mt-md-2 { margin-top: 0.5rem !important; }
	.mt-md-3 { margin-top: 1rem !important; }
	.mt-md-4 { margin-top: 1.5rem !important; }
	.mt-md-5 { margin-top: 3rem !important; }
	.mt-md-auto { margin-top: auto !important; }
	.me-md-0 { margin-right: 0 !important; }
	.me-md-1 { margin-right: 0.25rem !important; }
	.me-md-2 { margin-right: 0.5rem !important; }
	.me-md-3 { margin-right: 1rem !important; }
	.me-md-4 { margin-right: 1.5rem !important; }
	.me-md-5 { margin-right: 3rem !important; }
	.me-md-auto { margin-right: auto !important; }
	.mb-md-0 { margin-bottom: 0 !important; }
	.mb-md-1 { margin-bottom: 0.25rem !important; }
	.mb-md-2 { margin-bottom: 0.5rem !important; }
	.mb-md-3 { margin-bottom: 1rem !important; }
	.mb-md-4 { margin-bottom: 1.5rem !important; }
	.mb-md-5 { margin-bottom: 3rem !important; }
	.mb-md-auto { margin-bottom: auto !important; }
	.ms-md-0 { margin-left: 0 !important; }
	.ms-md-1 { margin-left: 0.25rem !important; }
	.ms-md-2 { margin-left: 0.5rem !important; }
	.ms-md-3 { margin-left: 1rem !important; }
	.ms-md-4 { margin-left: 1.5rem !important; }
	.ms-md-5 { margin-left: 3rem !important; }
	.ms-md-auto { margin-left: auto !important; }
	.p-md-0 { padding: 0 !important; }
	.p-md-1 { padding: 0.25rem !important; }
	.p-md-2 { padding: 0.5rem !important; }
	.p-md-3 { padding: 1rem !important; }
	.p-md-4 { padding: 1.5rem !important; }
	.p-md-5 { padding: 3rem !important; }
	.px-md-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-md-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
	.px-md-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
	.px-md-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
	.px-md-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
	.px-md-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
	.py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-md-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
	.py-md-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.py-md-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-md-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
	.pt-md-0 { padding-top: 0 !important; }
	.pt-md-1 { padding-top: 0.25rem !important; }
	.pt-md-2 { padding-top: 0.5rem !important; }
	.pt-md-3 { padding-top: 1rem !important; }
	.pt-md-4 { padding-top: 1.5rem !important; }
	.pt-md-5 { padding-top: 3rem !important; }
	.pe-md-0 { padding-right: 0 !important; }
	.pe-md-1 { padding-right: 0.25rem !important; }
	.pe-md-2 { padding-right: 0.5rem !important; }
	.pe-md-3 { padding-right: 1rem !important; }
	.pe-md-4 { padding-right: 1.5rem !important; }
	.pe-md-5 { padding-right: 3rem !important; }
	.pb-md-0 { padding-bottom: 0 !important; }
	.pb-md-1 { padding-bottom: 0.25rem !important; }
	.pb-md-2 { padding-bottom: 0.5rem !important; }
	.pb-md-3 { padding-bottom: 1rem !important; }
	.pb-md-4 { padding-bottom: 1.5rem !important; }
	.pb-md-5 { padding-bottom: 3rem !important; }
	.ps-md-0 { padding-left: 0 !important; }
	.ps-md-1 { padding-left: 0.25rem !important; }
	.ps-md-2 { padding-left: 0.5rem !important; }
	.ps-md-3 { padding-left: 1rem !important; }
	.ps-md-4 { padding-left: 1.5rem !important; }
	.ps-md-5 { padding-left: 3rem !important; }
}
@media (min-width: 992px) {
	.m-lg-0 { margin: 0 !important; }
	.m-lg-1 { margin: 0.25rem !important; }
	.m-lg-2 { margin: 0.5rem !important; }
	.m-lg-3 { margin: 1rem !important; }
	.m-lg-4 { margin: 1.5rem !important; }
	.m-lg-5 { margin: 3rem !important; }
	.m-lg-auto { margin: auto !important; }
	.mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-lg-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
	.mx-lg-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
	.mx-lg-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
	.mx-lg-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
	.mx-lg-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }
	.my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-lg-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
	.my-lg-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
	.my-lg-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-lg-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-lg-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; }
	.mt-lg-0 { margin-top: 0 !important; }
	.mt-lg-1 { margin-top: 0.25rem !important; }
	.mt-lg-2 { margin-top: 0.5rem !important; }
	.mt-lg-3 { margin-top: 1rem !important; }
	.mt-lg-4 { margin-top: 1.5rem !important; }
	.mt-lg-5 { margin-top: 3rem !important; }
	.mt-lg-auto { margin-top: auto !important; }
	.me-lg-0 { margin-right: 0 !important; }
	.me-lg-1 { margin-right: 0.25rem !important; }
	.me-lg-2 { margin-right: 0.5rem !important; }
	.me-lg-3 { margin-right: 1rem !important; }
	.me-lg-4 { margin-right: 1.5rem !important; }
	.me-lg-5 { margin-right: 3rem !important; }
	.me-lg-auto { margin-right: auto !important; }
	.mb-lg-0 { margin-bottom: 0 !important; }
	.mb-lg-1 { margin-bottom: 0.25rem !important; }
	.mb-lg-2 { margin-bottom: 0.5rem !important; }
	.mb-lg-3 { margin-bottom: 1rem !important; }
	.mb-lg-4 { margin-bottom: 1.5rem !important; }
	.mb-lg-5 { margin-bottom: 3rem !important; }
	.mb-lg-auto { margin-bottom: auto !important; }
	.ms-lg-0 { margin-left: 0 !important; }
	.ms-lg-1 { margin-left: 0.25rem !important; }
	.ms-lg-2 { margin-left: 0.5rem !important; }
	.ms-lg-3 { margin-left: 1rem !important; }
	.ms-lg-4 { margin-left: 1.5rem !important; }
	.ms-lg-5 { margin-left: 3rem !important; }
	.ms-lg-auto { margin-left: auto !important; }
	.p-lg-0 { padding: 0 !important; }
	.p-lg-1 { padding: 0.25rem !important; }
	.p-lg-2 { padding: 0.5rem !important; }
	.p-lg-3 { padding: 1rem !important; }
	.p-lg-4 { padding: 1.5rem !important; }
	.p-lg-5 { padding: 3rem !important; }
	.px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-lg-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
	.px-lg-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
	.px-lg-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
	.px-lg-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
	.px-lg-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
	.py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-lg-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
	.py-lg-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.py-lg-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-lg-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-lg-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
	.pt-lg-0 { padding-top: 0 !important; }
	.pt-lg-1 { padding-top: 0.25rem !important; }
	.pt-lg-2 { padding-top: 0.5rem !important; }
	.pt-lg-3 { padding-top: 1rem !important; }
	.pt-lg-4 { padding-top: 1.5rem !important; }
	.pt-lg-5 { padding-top: 3rem !important; }
	.pe-lg-0 { padding-right: 0 !important; }
	.pe-lg-1 { padding-right: 0.25rem !important; }
	.pe-lg-2 { padding-right: 0.5rem !important; }
	.pe-lg-3 { padding-right: 1rem !important; }
	.pe-lg-4 { padding-right: 1.5rem !important; }
	.pe-lg-5 { padding-right: 3rem !important; }
	.pb-lg-0 { padding-bottom: 0 !important; }
	.pb-lg-1 { padding-bottom: 0.25rem !important; }
	.pb-lg-2 { padding-bottom: 0.5rem !important; }
	.pb-lg-3 { padding-bottom: 1rem !important; }
	.pb-lg-4 { padding-bottom: 1.5rem !important; }
	.pb-lg-5 { padding-bottom: 3rem !important; }
	.ps-lg-0 { padding-left: 0 !important; }
	.ps-lg-1 { padding-left: 0.25rem !important; }
	.ps-lg-2 { padding-left: 0.5rem !important; }
	.ps-lg-3 { padding-left: 1rem !important; }
	.ps-lg-4 { padding-left: 1.5rem !important; }
	.ps-lg-5 { padding-left: 3rem !important; }
}
@media (min-width: 1200px) {
	.m-xl-0 { margin: 0 !important; }
	.m-xl-1 { margin: 0.25rem !important; }
	.m-xl-2 { margin: 0.5rem !important; }
	.m-xl-3 { margin: 1rem !important; }
	.m-xl-4 { margin: 1.5rem !important; }
	.m-xl-5 { margin: 3rem !important; }
	.m-xl-auto { margin: auto !important; }
	.mx-xl-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-xl-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
	.mx-xl-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
	.mx-xl-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
	.mx-xl-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
	.mx-xl-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-xl-auto { margin-left: auto !important; margin-right: auto !important; }
	.my-xl-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-xl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
	.my-xl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
	.my-xl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-xl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-xl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-xl-auto { margin-top: auto !important; margin-bottom: auto !important; }
	.mt-xl-0 { margin-top: 0 !important; }
	.mt-xl-1 { margin-top: 0.25rem !important; }
	.mt-xl-2 { margin-top: 0.5rem !important; }
	.mt-xl-3 { margin-top: 1rem !important; }
	.mt-xl-4 { margin-top: 1.5rem !important; }
	.mt-xl-5 { margin-top: 3rem !important; }
	.mt-xl-auto { margin-top: auto !important; }
	.me-xl-0 { margin-right: 0 !important; }
	.me-xl-1 { margin-right: 0.25rem !important; }
	.me-xl-2 { margin-right: 0.5rem !important; }
	.me-xl-3 { margin-right: 1rem !important; }
	.me-xl-4 { margin-right: 1.5rem !important; }
	.me-xl-5 { margin-right: 3rem !important; }
	.me-xl-auto { margin-right: auto !important; }
	.mb-xl-0 { margin-bottom: 0 !important; }
	.mb-xl-1 { margin-bottom: 0.25rem !important; }
	.mb-xl-2 { margin-bottom: 0.5rem !important; }
	.mb-xl-3 { margin-bottom: 1rem !important; }
	.mb-xl-4 { margin-bottom: 1.5rem !important; }
	.mb-xl-5 { margin-bottom: 3rem !important; }
	.mb-xl-auto { margin-bottom: auto !important; }
	.ms-xl-0 { margin-left: 0 !important; }
	.ms-xl-1 { margin-left: 0.25rem !important; }
	.ms-xl-2 { margin-left: 0.5rem !important; }
	.ms-xl-3 { margin-left: 1rem !important; }
	.ms-xl-4 { margin-left: 1.5rem !important; }
	.ms-xl-5 { margin-left: 3rem !important; }
	.ms-xl-auto { margin-left: auto !important; }
	.p-xl-0 { padding: 0 !important; }
	.p-xl-1 { padding: 0.25rem !important; }
	.p-xl-2 { padding: 0.5rem !important; }
	.p-xl-3 { padding: 1rem !important; }
	.p-xl-4 { padding: 1.5rem !important; }
	.p-xl-5 { padding: 3rem !important; }
	.px-xl-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-xl-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
	.px-xl-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
	.px-xl-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
	.px-xl-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
	.px-xl-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
	.py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-xl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
	.py-xl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.py-xl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-xl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-xl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
	.pt-xl-0 { padding-top: 0 !important; }
	.pt-xl-1 { padding-top: 0.25rem !important; }
	.pt-xl-2 { padding-top: 0.5rem !important; }
	.pt-xl-3 { padding-top: 1rem !important; }
	.pt-xl-4 { padding-top: 1.5rem !important; }
	.pt-xl-5 { padding-top: 3rem !important; }
	.pe-xl-0 { padding-right: 0 !important; }
	.pe-xl-1 { padding-right: 0.25rem !important; }
	.pe-xl-2 { padding-right: 0.5rem !important; }
	.pe-xl-3 { padding-right: 1rem !important; }
	.pe-xl-4 { padding-right: 1.5rem !important; }
	.pe-xl-5 { padding-right: 3rem !important; }
	.pb-xl-0 { padding-bottom: 0 !important; }
	.pb-xl-1 { padding-bottom: 0.25rem !important; }
	.pb-xl-2 { padding-bottom: 0.5rem !important; }
	.pb-xl-3 { padding-bottom: 1rem !important; }
	.pb-xl-4 { padding-bottom: 1.5rem !important; }
	.pb-xl-5 { padding-bottom: 3rem !important; }
	.ps-xl-0 { padding-left: 0 !important; }
	.ps-xl-1 { padding-left: 0.25rem !important; }
	.ps-xl-2 { padding-left: 0.5rem !important; }
	.ps-xl-3 { padding-left: 1rem !important; }
	.ps-xl-4 { padding-left: 1.5rem !important; }
	.ps-xl-5 { padding-left: 3rem !important; }
}
@media (min-width: 1400px) {
	.m-xxl-0 { margin: 0 !important; }
	.m-xxl-1 { margin: 0.25rem !important; }
	.m-xxl-2 { margin: 0.5rem !important; }
	.m-xxl-3 { margin: 1rem !important; }
	.m-xxl-4 { margin: 1.5rem !important; }
	.m-xxl-5 { margin: 3rem !important; }
	.m-xxl-auto { margin: auto !important; }
	.mx-xxl-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-xxl-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
	.mx-xxl-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
	.mx-xxl-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
	.mx-xxl-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
	.mx-xxl-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-xxl-auto { margin-left: auto !important; margin-right: auto !important; }
	.my-xxl-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-xxl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
	.my-xxl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
	.my-xxl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-xxl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-xxl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-xxl-auto { margin-top: auto !important; margin-bottom: auto !important; }
	.mt-xxl-0 { margin-top: 0 !important; }
	.mt-xxl-1 { margin-top: 0.25rem !important; }
	.mt-xxl-2 { margin-top: 0.5rem !important; }
	.mt-xxl-3 { margin-top: 1rem !important; }
	.mt-xxl-4 { margin-top: 1.5rem !important; }
	.mt-xxl-5 { margin-top: 3rem !important; }
	.mt-xxl-auto { margin-top: auto !important; }
	.me-xxl-0 { margin-right: 0 !important; }
	.me-xxl-1 { margin-right: 0.25rem !important; }
	.me-xxl-2 { margin-right: 0.5rem !important; }
	.me-xxl-3 { margin-right: 1rem !important; }
	.me-xxl-4 { margin-right: 1.5rem !important; }
	.me-xxl-5 { margin-right: 3rem !important; }
	.me-xxl-auto { margin-right: auto !important; }
	.mb-xxl-0 { margin-bottom: 0 !important; }
	.mb-xxl-1 { margin-bottom: 0.25rem !important; }
	.mb-xxl-2 { margin-bottom: 0.5rem !important; }
	.mb-xxl-3 { margin-bottom: 1rem !important; }
	.mb-xxl-4 { margin-bottom: 1.5rem !important; }
	.mb-xxl-5 { margin-bottom: 3rem !important; }
	.mb-xxl-auto { margin-bottom: auto !important; }
	.ms-xxl-0 { margin-left: 0 !important; }
	.ms-xxl-1 { margin-left: 0.25rem !important; }
	.ms-xxl-2 { margin-left: 0.5rem !important; }
	.ms-xxl-3 { margin-left: 1rem !important; }
	.ms-xxl-4 { margin-left: 1.5rem !important; }
	.ms-xxl-5 { margin-left: 3rem !important; }
	.ms-xxl-auto { margin-left: auto !important; }
	.p-xxl-0 { padding: 0 !important; }
	.p-xxl-1 { padding: 0.25rem !important; }
	.p-xxl-2 { padding: 0.5rem !important; }
	.p-xxl-3 { padding: 1rem !important; }
	.p-xxl-4 { padding: 1.5rem !important; }
	.p-xxl-5 { padding: 3rem !important; }
	.px-xxl-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-xxl-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
	.px-xxl-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
	.px-xxl-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
	.px-xxl-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
	.px-xxl-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
	.py-xxl-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-xxl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
	.py-xxl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.py-xxl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-xxl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-xxl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
	.pt-xxl-0 { padding-top: 0 !important; }
	.pt-xxl-1 { padding-top: 0.25rem !important; }
	.pt-xxl-2 { padding-top: 0.5rem !important; }
	.pt-xxl-3 { padding-top: 1rem !important; }
	.pt-xxl-4 { padding-top: 1.5rem !important; }
	.pt-xxl-5 { padding-top: 3rem !important; }
	.pe-xxl-0 { padding-right: 0 !important; }
	.pe-xxl-1 { padding-right: 0.25rem !important; }
	.pe-xxl-2 { padding-right: 0.5rem !important; }
	.pe-xxl-3 { padding-right: 1rem !important; }
	.pe-xxl-4 { padding-right: 1.5rem !important; }
	.pe-xxl-5 { padding-right: 3rem !important; }
	.pb-xxl-0 { padding-bottom: 0 !important; }
	.pb-xxl-1 { padding-bottom: 0.25rem !important; }
	.pb-xxl-2 { padding-bottom: 0.5rem !important; }
	.pb-xxl-3 { padding-bottom: 1rem !important; }
	.pb-xxl-4 { padding-bottom: 1.5rem !important; }
	.pb-xxl-5 { padding-bottom: 3rem !important; }
	.ps-xxl-0 { padding-left: 0 !important; }
	.ps-xxl-1 { padding-left: 0.25rem !important; }
	.ps-xxl-2 { padding-left: 0.5rem !important; }
	.ps-xxl-3 { padding-left: 1rem !important; }
	.ps-xxl-4 { padding-left: 1.5rem !important; }
	.ps-xxl-5 { padding-left: 3rem !important; }
}

/* ===== §E13 Canvas .section / .emphasis-title（本番 /style.css 3208-3234・15275-15287 実測。非スコープ 0,1,0） =====
   exhibition 系で多用。.section は margin/padding 60px 0 ＋ 淡灰背景。m-0/p-0/inline padding で上書きされる。
   無いと content section の上下 padding 120px が欠落しドリフト（info_navi 768 で -120）。 */
.section { position: relative; width: 100%; margin: 60px 0; padding: 60px 0; background-color: #f9f9f9; overflow: hidden; }
.section .container { z-index: 2; }
.emphasis-title { margin: 0 0 50px; }
.emphasis-title h1, .emphasis-title h2 { margin-bottom: 0; font-weight: 400; letter-spacing: -2px; text-transform: none; color: #333; font-size: 64px; }
.emphasis-title h1 strong, .emphasis-title h2 strong { font-weight: 700; }

/* ===== §grid-bare-col: bare レスポンシブ等幅列（BS5 .col-{bp}）。グリッド完全性の補完（教訓20） =====
   `.col-md`（番号/auto 無し）= その bp 以上で等幅 flex 列。欠落すると .row>* の width:100% で縦積みする
   （dazaifu の col-md×9 が PC で +3938 縦積みだった）。flex-basis:0 が main軸で width より優先＝等幅。 */
@media (min-width: 576px) { .col-sm { flex: 1 0 0%; } }
@media (min-width: 768px) { .col-md { flex: 1 0 0%; } }
@media (min-width: 992px) { .col-lg { flex: 1 0 0%; } }
@media (min-width: 1200px) { .col-xl { flex: 1 0 0%; } }
@media (min-width: 1400px) { .col-xxl { flex: 1 0 0%; } }

/* ===== §E14 Bootstrap modal 既定（本番 bootstrap.css 5411 実測。非スコープ 0,1,0） =====
   modal は JS（Bootstrap）でのみ表示され既定は display:none。tw-compat に無いと modal の中身が
   通常フローで展開表示され大ドリフト（visit_top で +2000／modal×12）。静的再現＝既定の非表示状態を再現。
   modal-dialog/content 等は表示時のみ効くため display:none だけで足りる（トリガー JS は移植しない）。 */
.modal { position: fixed; top: 0; left: 0; z-index: 1055; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1050; width: 100vw; height: 100vh; background-color: #000; }
.modal-backdrop:not(.show) { display: none; opacity: 0; }

/* ===== §E15 Canvas fslider/flexslider（本番 /style.css 3266-3290 実測。非スコープ 0,1,0） =====
   単一スライドの fslider（exhibition_top のカード画像等）は img を width:100%/height:auto に制約。
   無いと img が原寸でカードが膨張（exhibition_top で +602／fslider×9）。単一スライドは JS 不要＝CSS のみで再現。
   複数スライドの fslider は将来 Swiper 化（initOwlCarousel と同様）。未使用ページには無影響。 */
.fslider, .fslider .flexslider, .fslider .slider-wrap, .fslider .slide, .fslider .slide > a, .fslider .slide > img, .fslider .slide > a > img {
	position: relative; display: block; width: 100%; height: auto; overflow: hidden; -webkit-backface-visibility: hidden;
}
.fslider.h-100 .flexslider, .fslider.h-100 .slider-wrap, .fslider.h-100 .slide { height: 100% !important; }
.fslider { min-height: 32px; }
/* 複数スライドの fslider は JS 未実行だと全 slide が縦積みするため、flexslider 初期状態（先頭1枚表示）を
   再現して高さを一致させる（exhibition_top grid3 のカードで +538）。単一スライドには無影響。 */
.fslider .slider-wrap > .slide:not(:first-child) { display: none; }

/* ===== §E16 card-modern（本番 custom.css 1095 実測。非スコープ 0,1,0） =====
   .card の border 1px を border:none に上書き（gen の余分 border で per-card +2px だった）。
   radius 12px/box-shadow/hover は exhibition/event のショーケース演出（design.md §2 除外規定対象）。
   mechanizable は不使用＝無影響。 */
.card-modern { border: none; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.01); transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s ease; }
.card-modern:hover { transform: translateY(-2px); box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.18), 0 10px 15px -5px rgba(0, 0, 0, 0.06); }

/* ===== §E17 info04 bespoke 移植（本番実測。非スコープ 0,1,0。2026-05-31） =====
   exhibition_info04（あじっぱ）で必要になった汎用 component を実測移植。
   起点は _diff.mjs で特定: button(-97) / feature-box(fbox-icon のアイコン) / .h5 class(-59×複数)。 */

/* (1) 見出し size class（BS5 bootstrap.css 99-148）。要素 h1-h6 は §A base にあるが、
   div/p に付く .hN class が未定義だった。info04 の `p.h5`（体験案内文）が body サイズで縮み -59px。 */
.h1, .h2, .h3, .h4, .h5, .h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; }
.h1 { font-size: calc(1.375rem + 1.5vw); }
.h2 { font-size: calc(1.325rem + 0.9vw); }
.h3 { font-size: calc(1.3rem + 0.6vw); }
.h4 { font-size: calc(1.275rem + 0.3vw); }
.h5 { font-size: 1.25rem; }
.h6 { font-size: 1rem; }
@media (min-width: 1200px) {
	.h1 { font-size: 2.5rem; }
	.h2 { font-size: 2rem; }
	.h3 { font-size: 1.75rem; }
	.h4 { font-size: 1.5rem; }
}

/* (2) Canvas .button（style.css 9748）＋ .button-full（10117）＋ .button-purple（10380）＋ .center（729）。
   info04 の `a.button.button-full.button-purple.center.text-end` が素の inline リンクで h=156→59（-97px）だった。
   button-full の block/padding 30px 0/font 30px が高さ 156px の正体。 */
.button { display: inline-block; position: relative; cursor: pointer; outline: none; white-space: nowrap; margin: 5px; padding: 8px 22px; font-size: 0.875rem; line-height: 24px; background-color: #1a63bc; color: #fff; font-weight: 700; text-transform: none; letter-spacing: 1px; border: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }
.button i { position: relative; margin-right: 5px; width: 16px; text-align: center; }
.button.text-end i { margin: 0 0 0 5px; }
.button.button-full { display: block; width: 100%; white-space: normal; margin: 0; height: auto; line-height: 1.6; padding: 30px 0; font-size: 30px; font-weight: 300; text-transform: none; border-radius: 0; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }
.button.button-full strong { font-weight: 700; border-bottom: 2px solid #eee; }
.button-purple:not(.button-border) { background-color: #5d4157 !important; }
.center { text-align: center !important; }

/* (3) Canvas .feature-box / .fbox-icon / .fbox-content（style.css 10609-10674）。
   info04 の `feature-box fbox-center fbox-dark fbox-plain` で fbox-icon が全幅 block 化しアイコンが 64→17px に潰れていた。
   feature-box=flex 横並び、fbox-icon=5.5rem×4rem の円形アイコン枠（i は line-height:4rem＝64px）、fbox-content=flex-grow:1 で残り幅。
   ※ fbox-center は本番 style.css に定義なし＝no-op（移植不要）。fbox-dark/plain は色/装飾のみ（高さ無影響・必要なら後段で）。 */
.feature-box { position: relative; display: flex; flex-wrap: wrap; margin-left: -0.75rem; margin-right: -0.75rem; }
.feature-box:first-child { margin-top: 0; }
.fbox-icon { width: 5.5rem; height: 4rem; padding: 0 0.75rem; }
.fbox-icon a, .fbox-icon i, .fbox-icon img { display: block; position: relative; width: 100%; height: 100%; color: #fff; }
.fbox-icon i, .fbox-icon img { border-radius: 50%; background-color: #1a63bc; }
.fbox-icon i { font-style: normal; font-size: 1.75rem; line-height: 4rem; text-align: center; }
.fbox-content { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; padding: 0 0.75rem; }
.fbox-content h3 { font-size: 1rem; font-weight: 600; text-transform: none; margin-bottom: 0; color: #333; }
.fbox-content p { margin-top: 0.5rem; margin-bottom: 0px; color: #999; }
/* fbox-center（style.css 10934）= flex-direction:column＝アイコン上/コンテンツ下の縦並び。
   これが無いと feature-box の flex が横並びになり content 幅が縮みテキスト折返しで +199px だった。 */
.fbox-center { flex-direction: column; align-items: center; text-align: center; }
.fbox-center .fbox-icon { margin-bottom: 1.5rem; }
.fbox-center .fbox-content { flex-basis: auto; }

/* (4) height vh-N utility（style.css 2353-2371）。min-vh-N は §E12 に完備だが height 版が欠落していた。
   info04 hero `slider-element min-vh-md-100 vh-50` が @390（md未満で min-vh-md-100 無効）に vh-50 が効かず -280px だった。 */
.vh-75 { height: 75vh !important; }
.vh-60 { height: 60vh !important; }
.vh-50 { height: 50vh !important; }
.vh-40 { height: 40vh !important; }
.vh-25 { height: 25vh !important; }

/* (5) p-lg-6（style.css 1906・@lg padding 5rem）。BS5 spacing は 0-5 のみで level 6 が欠落。
   info04 の `col-md-6 p-5 p-lg-6` が @lg で padding 80px→48px に減り content 幅 +64px・折り返しが変化していた。 */
@media (min-width: 992px) {
	.p-lg-6 { padding: 5rem !important; }
}

/* (6) bottommargin-lg（style.css 692・margin-bottom:5rem 常時）。bottommargin（無印）は別所にあるが lg 版が欠落。
   info04 の FAQ 見出し h2.bottommargin-lg の下余白 80px が無く、bg-color-light section が -72px 縮んでいた。 */
.bottommargin-lg { margin-bottom: 5rem !important; }

/* (7) t-schedule バッジ（custom.css 26-118）。t-schedule.js が会期に応じ付与する動的バッジ。
   未移植だと gen の t-badge が素の inline に縮む（visit_top の t-badge-preview / exhibition_top の t-badge-open）。
   複数の t-schedule ページ共通のため共有 §E17 に集約（教訓13「ページ<style>移植」を共有化）。色/角丸/fade は本番 t-badge の再現。 */
.t-status { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.5em; flex-shrink: 0; }
.t-title-with-status { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.5em; }
.t-title-with-status > *:first-child { flex-shrink: 1; min-width: 0; }
.t-title-with-status .t-status { flex-shrink: 0; margin-left: 0; }
.t-badge { display: inline-block; padding: 0.35em 0.75em; font-size: 0.85em; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: middle; border-radius: 0.375em; transition: all 0.2s ease-in-out; flex-shrink: 0; }
.t-badge-preview { color: #ffffff; background-color: #dc3545; }
.t-badge-open { color: #ffffff; background-color: #0d6efd; }
.t-badge-closing { color: #ffffff; background-color: #6f42c1; }
.t-badge-closed { color: #ffffff; background-color: #6c757d; }
@keyframes t-badge-fade-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.t-badge-animate { animation: t-badge-fade-in 0.3s ease-out; }

/* (8) line-height utility（custom.css 802-806）。lh13=1.3/lh15=1.5。tw-compat に無く gen の行間が広く
   カード説明文が +41/p（visit_info15 で +146）だった。 */
.lh13 { line-height: 1.3 !important; }
.lh15 { line-height: 1.5 !important; }