/* 固定透過背景 */
#modal-cover {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	outline:0;
	width:100%;
	height:100%;
	z-index:99;
	opacity:0.4;
	background-color:#000;
}

/* モーダルarea */
.modal-area {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:100;
}

/* モーダルbody */
.modal-body {
	position:relative;
	background-color:#fff;
	overflow-x:none;
	overflow-y:auto;
	display:block;
	border: 1px solid #666;
	border-radius: 6px;
}

/* モーダルheader */
.modal-header {
	font-size:large;
	line-height: 1.3;
	padding:20px;
	border-bottom: 1px solid #ccc;
}
.modal-header .modal-close {
	float:right;
	color: #ccc;
	cursor: pointer;
}
.modal-close:hover, .modal-btn:hover {
	font-weight:bold;
}

/* モーダルfooter */
.modal-footer {
	text-align:center;
	line-height: 1.3;
	padding:20px;
	border-top: 1px solid #ccc;
}

/* モーダルcontents */
.modal-contents {
	font-size:medium;
	padding:20px;
	line-height: 1.3;
}
.modal-contents p {
	margin: 2px 0;
	padding: 2px;
	display:block;
}
.modal-form-head, .modal-form-detail {
	padding:0 0 3px 0;
	vertical-align: top;
}

/* ボタン */
.modal-btn {
	cursor: pointer;
	border-radius: 4px;
	display:inline-block;
	padding:5px 10px;
	margin:2px;
	font-size:10pt;
	color:initial;
	border: 1px solid #ccc;
	background-color: #fff;
}

/* その他 */
.modal-required, .modal-error {
	font-size:small;
	color:#f33;
}
.modal-error {
	display:block;
}
.modal-error:before {
	content:'!! ';
}

/* レスポンシブ */
@media (min-width: 800px) {
	.modal-body {
		width:60%;
		margin:100px auto;
	}
	@media (min-width: 1200px) {
		.modal-form-head, .modal-form-detail {
			display:inline-block;
			vertical-align: top;
		}
		.modal-form-head {
			width:25%;
		}
		.modal-form-detail {
			width:70%;
		}
	}
	@media (max-width: 1199px) {
		.modal-form-head, .modal-form-detail {
			width:100%;
			display:block;
		}
	}
}
@media (max-width: 799px) {
	.modal-body {
		width:90%;
		margin:20px auto;
	}
	.modal-form-head, .modal-form-detail {
		width:100%;
		display:block;
	}
}