/*---------------------------------------------------
	通知ポップアップ
---------------------------------------------------*/

#notice_popup_area{
	display: none;
	position: fixed;
	max-height: 700px;
	overflow-y: auto;
	right: 10px;
	bottom: 10px;
	background-color: #FFF;
	border: 1px solid #CCC;
	box-shadow: 3px 3px 2px #666;
	opacity: 0.6;
	transition: all 500ms;
	z-index: 100;
}
#notice_popup_area:hover,
#notice_popup_area.open{
	opacity: 1;
}

#notice_popup_area .bar{
	background-color: #283891;
	color: #FFF;
	padding: 3px 8px;
	text-align: right;
}
#notice_popup_area .opener{
	cursor: pointer;
}
#notice_popup_area .opener i{
	margin-right: 5px;
}
#notice_popup_area .opener .close,
#notice_popup_area.open .opener .open{
	display: none;
}
#notice_popup_area .opener .open,
#notice_popup_area.open .opener .close{
	display: block;
}

#notice_popup_area .wrapper{
	display: grid;
	grid-template-rows: 0fr;
	transition: all 500ms;
	width: 120px;
}
#notice_popup_area.open .wrapper{
	grid-template-rows: 1fr;
	padding: 10px;
	width: 200px;
}

#notice_popup_form{
	overflow: hidden;
}
#notice_popup_area.open #notice_popup_form{
	overflow: visible;
}

#notice_popup_area .count{
	font-size: 0.9em;
	margin-left: 0.5em;
}
#notice_popup_area .count:not(:empty):before{
	content: "(";
	margin-right: 3px;
}
#notice_popup_area .count:not(:empty):after{
	content: "件)";
	margin-left: 3px;
}

#notice_popup_template{
	display: none;
}

.notice_popup{
	display: none;
	width: 100%;
	margin-right: 20px;
	margin-bottom: 5px;
}
.notice_popup .btn_notice_close{
	cursor: pointer;
}
.notice_popup .yotei_bar{
	width: 100%;
	height: 18px;
	padding: 3px;
	color: #FFF;
	background-color: #C9514D;
	border-radius: 5px;
}
.notice_popup .prev_yotei_bar{
	width: 100%;
	height: 18px;
	padding: 3px;
	color: #FFF;
	background-color: #444;
	border-radius: 5px;
}
.notice_popup .yotei_datetime{
	font-weight: bold;
}
.notice_popup .contents{
	padding: 3px;
	font-size: 11px;
	margin-bottom: 5px;
}
.notice_popup .contents .rel_info{
	color: #F00;
}
.notice_popup .rel_function{
	/*display: none;*/
	text-align: right;
}
.notice_popup .notice_tanto_name{
	padding: 1px 5px;
	font-size: 11px;
	font-weight: bold;
	background-color: #CCC;
	border-radius: 3px;
}