/****************************
	 * モーダル
	 ****************************/
	#modal_base
	{
		width:100%; height:100vh;
		margin:0px !important;
		background:black;
		opacity:0.4;
		position:fixed;
		z-index:2000;
	 }

	#modal_window
	{
		padding:15px;
		border-radius:10px;
		background:white;
		box-shadow:0px 0px 30px #333;
		position:fixed;
		z-index:2500;
	 }

	/****************************
	 * モーダル - ダイアログ
	 ****************************/
	/** ウィンドウのベース設定 **/
	#modal_window .dialog
	{
		padding:0px 10px 4px 40px;
		color:black !important;
	}

	#modal_window .dialog::before
	{
		font-family:"Font Awesome 5 Free";
		content:'\f044';
		width:30px;
		height:100%;
		margin:-15px 0 0 -55px;
		padding:14px 0 0 10px;
		border-radius:10px 0 0 10px;
		font-weight:900;
		font-size:calc( var( --site-font-size ) * 0.9 );
		color:white;
		position:absolute;
	}

	/** ウィンドウの個別カラー **/
	#modal_window .dialog.blue::before   { background:#54bdff; }
	#modal_window .dialog.green::before  { background:#40ad0a; }
	#modal_window .dialog.orange::before { background:#ff9d26; }
	#modal_window .dialog.red::before    { background:#e00000; }
	#modal_window .dialog.gray::before   { background:#bbbbbb; }

	/** 区切り線 **/
	#modal_window .dialog hr
	{
		margin:20px 0 15px 0;
		border:none;
		border-bottom:1px dotted gray;
	}

	/****************************
	 * モーダル - ボタン
	 ****************************/
	/** ボタンの挙動 **/
	#modal_window .dialog button:hover
	{
		cursor:pointer;
	}

	/** ボタンのデフォルト **/
	#modal_window .dialog button
	{
		min-width:115px;
		margin:0 15px;
		padding:4px 10px;
		border-radius:5px;
		font-size:var( --site-font-size );
	}

	/** ボタン（ブルー） **/
	#modal_window .dialog button.blue
	{
		border:2px solid #54bdff;
		background:white;
		color:#1c9eef !important;
	}

	#modal_window .dialog button.blue:hover
	{
		background:#54bdff;
		color:white !important;
	}

	/** ボタン（グリーン） **/
	#modal_window .dialog button.green
	{
		border:2px solid #199900;
		background:white;
		color:#199900 !important;
	}

	#modal_window .dialog button.green:hover
	{
		background:#199900;
		color:white !important;
	}

	/** ボタン（オレンジ） **/
	#modal_window .dialog button.orange
	{
		border:2px solid #ff9d26;
		background:white;
		color:#ff9d26 !important;
	}

	#modal_window .dialog button.orange:hover
	{
		background:#ff9d26;
		color:white !important;
	}

	/** ボタン（レッド） **/
	#modal_window .dialog button.red
	{
		border:2px solid #bf0f0f;
		background:white;
		color:#bf0f0f !important;
	}

	#modal_window .dialog button.red:hover
	{
		background:#bf0f0f;
		color:white !important;
	}

	/** ボタン（グレー/キャンセル） **/
	#modal_window .dialog button.cancel
	{
		border:2px solid #e4e4e4;
		background:#e4e4e4;
		color:#666;
	}

	#modal_window .dialog button.cancel:hover
	{
		border:2px solid #ccc;
		background:#ccc;
		color:#333;
	}

	/****************************
	 * モーダルウィンドウ（個別）
	 ****************************/
	/** ファイルアップロード **/
	#modal_window .dialog.file_up input[ type="file" ]
	{
		display:none;
	}

	#modal_window .dialog.file_up label
	{
		width:100%;
		margin:10px 0 10px 0 !important;
		padding:5px 10px;
		border-radius:5px;
		color:#7e8c11;
		background-color:var( --dialog-filelabel-color );
		display:block;
		cursor:pointer;
	}

	#modal_window .dialog.file_up label:hover
	{
		color:white;
		background-color:var( --dialog-filelabel-select-color );
	}