/*
 * モーダルダイアログの共通部分を定義
 *
 *
 */

/*
 * モーダル表示中は背景をスクロールしない
 */
body.disactive {
	overflow:hidden;
}

/*
 * モーダルウィンドウの最下部（半透明黒の部分）
 */
.modal-overlay {
	position:        fixed;
	top: 		     0;
	left: 		     0;
	width: 		     100%;
	height: 		 100%;
	background:      rgba(0,0,0,50%);
	opacity:         0;
	visibility:      hidden;
	transition:      .3s;
	box-sizing:      border-box;
	display:         flex;
  	justify-content: center;
  	align-items:     center;
  	
	z-index:         500;
}

/*
 * モーダルウィンドウ
 *
 */
.modal-window {
	position:		relative;
  	display: 		inline-block;
	background: 	rgba(255,255,255,1);
	border: 		1px solid #b6b6b6;
	filter: 		drop-shadow(20px 20px 20px rgba(0,0,0,0.3));
	box-sizing: 	border-box;
	border-radius:	5px;
	
	z-index: 		505;
}

/*
 * モーダルウィンドウタイトル
 *
 */
.modal-title {
	width: 			100%;
	height:			85px;
	padding-top:	20px;
	padding-left:	30px;
	display: 		block;
	color: 			#555;
  	text-align: 	left;
  	//background: 	#bfbfbf;
  	border-bottom: 	1px solid #b6b6b6;
  	box-sizing: 	border-box;
}

.modal-title h1{
	width:			calc(100% - 50px);
	font-size:		18pt;
	color: 			#555;
	font-weight: 	900;
}

.modal-title h2{
	font-size:		10pt;
	padding-top:	15px;
	color: 			#555;
	font-weight: 	400;
}

/*
 * モーダルウィンドウクローズボタン
 */
.modal-close {
	position: 			absolute;
	display: 			flex;
	align-items: 		center;
	justify-content: 	center;
	top: 				10px;
	right: 				15px;
	width: 				40px;
	height: 			40px;
	font-size: 			28px;
	font-weight:		900;
	border-radius: 		20px;
	color: 				#999;
	cursor:	 			pointer;
	transition:         all .5s;
	z-index:			530;

}
/*
 * モーダルクローズボタン背景表示
 */
.modal-close:hover {
	background-color: 	#ddd;
}