/* ==========================================================================
   モーダル全体 (.modal) のスタイル定義
   ========================================================================== */
.modal {

	/* ----------------------------------------------------------------------
	   モーダルダイアログ（ウィンドウ本体）のスタイル
	   ---------------------------------------------------------------------- */
	/* 【修正】 .show を外して、フェードアウトアニメーション中のレイアウト崩れ(瞬間移動)を防止 */
	.modal-dialog {
		/* 画面上下の余白（1.75remずつ）を確保しつつ、高さを画面内に収める */
		max-height: calc(100% - 1.75rem - 1.75rem);
		/* モーダルの中身が少なくても、ウィンドウが潰れないように最低限の高さを保持 */
		min-height: 200px;
		/* 幅はコンテンツに合わせて自動調整 */
		width: auto;
	}

	/* ----------------------------------------------------------------------
	   ヘッダーとフッターの共通スタイル
	   ---------------------------------------------------------------------- */
	.modal-header, .modal-footer {
		/* 要素（タイトルやボタンなど）を中央に寄せてバランスを取る */
		justify-content: center;
	}

	/* ----------------------------------------------------------------------
	   モーダルヘッダー (.modal-header) 専用のスタイル
	   ---------------------------------------------------------------------- */
	.modal-header {
		/* ヘッダー内のラベルの文字サイズを少し大きくして視認性を高める */
		label {
			font-size: 120%;
		}
	}

	/* ----------------------------------------------------------------------
	   モーダルボディ (.modal-body: メインコンテンツ領域) のスタイル
	   ---------------------------------------------------------------------- */
	.modal-body {
		/* 縦方向のスクロールのみを許可し、意図しない横スクロールは隠す（ヘッダー/フッターを固定化） */
		overflow-x: hidden;
		overflow-y: auto;

		/* モーダル内に配置されたテーブルを中央寄せにする */
		table {
			margin: 0 auto;
		}

		/* モーダル内に検索フォーム等のエリアが配置された場合、外枠下の余白を無くして詰める */
		.search-area {
			margin-bottom: 0;
		}
	}

	/* ----------------------------------------------------------------------
	   モーダルフッター (.modal-footer) 専用のスタイル
	   ---------------------------------------------------------------------- */
	.modal-footer {
		/* デフォルトの余白を狭めて、ボタン周りをコンパクトにする */
		padding: 0.25rem;
	}
}

/* ==========================================================================
   タブレット・スマートフォン向け（画面幅991px以下）のレスポンシブ対応
   ========================================================================== */
@media screen and (max-width: 991px) {
	.modal {
		.modal-dialog {
			/* 【修正】 .show を外す */
			/* 小さな画面では上下の余白を 0.5rem に狭め、フォーム等の表示領域を最大限確保する */
			max-height: calc(100% - 0.5rem - 0.5rem);
		}
	}
}