@charset "UTF-8";

/* --- notification-group --- */
.notification-group{
	margin-bottom: 90px;
	margin: 60px auto 80px;
}

/* tab-area */
.notification-group .tab-area{
	display: none;
}

/* select-area */
.notification-group .select-area{
	position: relative;
	display: block;
	margin-bottom: 15px;
	cursor: pointer;
}
.notification-group .select-area select{
	-webkit-appearance: none;/* Chrome、Safari */
	-moz-appearance: none;	/* Firefox */
	appearance: none;
	width: 100%;
	padding: 14px 45px 12px 25px;
	border: 1px solid #FFF;
	outline: none;
	cursor: pointer;
	background: #219BD9;
	font-weight: bold;
	font-size: 1.6rem;
	color: #FFF;
}
.notification-group .select-area select::-ms-expand { display: none;}
.notification-group .select-area:before{
	content: "";
	position: absolute;
	top: 0;
	right: 25px;
	bottom: 6px;
	display: block;
	width: 10px;
	height: 10px;
	margin: auto;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: rotateZ(135deg);
	pointer-events: none;
}
 /* **body-container** */
.notification-group .body-container{
    padding: 30px 3%;
	border: 1px solid #DDD;
}

 /* list-area */
.notification-group .list-area{
	padding: 0 0 30px;
	background: #FFF;
}
.notification-group .list-area .list-wrap{
	width: 90%;
	margin: 0 auto;
}
.notification-group .list-area .list-wrap li{
	border-bottom: 1px solid #DDD;
}
.notification-group .list-area .list-wrap a{
	display: block;
	padding: 20px 10px;
	line-height: 1.4;
	color: #333;
}
.notification-group .list-area .list-wrap .no-msg{
	display: block;
	padding: 20px 10px;
	line-height: 1.4;
}


/* list-area label */
.notification-group .list-area .label-date,
.notification-group .list-area .label-area,
.notification-group .list-area .label-info{
	flex: 1 0 auto;
	width: 100%;
	max-width: 150px;
	margin-right: 10px;
	/* padding: 5px; */
	padding: 2px 5px 0;
	text-align: center;
	font-size: 14px;
}
.notification-group .list-area .label-date{
	color: #AAA;
}
.notification-group .list-area .label-area{
	background: #F2F9F5;
	color: #009142;
	padding-top: 3px;
	padding-bottom: 1px;
}
.notification-group .list-area .label-area.seibu{
	background: #EFF8FD;
	color: #219BD9;
}
.notification-group .list-area .label-area.chubu{
	background: #FEF4E9;
	color: #F2800C;
}
.notification-group .list-area .label-area.tobu{
	background: #FDEFEE;
	color: #E31B13;
}
.notification-group .list-area .label-info{
	margin-right: 16px;
	border: 1px solid #219BD9;
	text-align: center;
	color: #219BD9;
}

/* list-area label-group */
.notification-group .list-area .label-group{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 1 1 100%;
	margin-top: 8px;
	line-height: 1.8;
}
.notification-group .list-area .label-group p{
	margin-bottom: 6px;
}
.notification-group .list-area .label-group .label-eventdate{
	display: inline;
	margin-right: 1em;
	padding-top: 1px;
}
.notification-group .list-area .text{
	line-height: 1.8;
}
.notification-group .list-area a:hover .text{
	text-decoration: underline;
}

/* --- pager-area --- */
.pager-area .pager-content{
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0 36px;
}
.pager-area .pager-content li{
	display: block;
	width: 32px;
	height: 32px;
	margin: 2px;
	font-size: 1.6rem;
}
.pager-area .pager-content li .link{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #219BD9;
}
.pager-area .pager-content :not(.prev):not(.next) .link:hover,
.pager-area .pager-content :not(.prev):not(.next) span.link{
	background: #219BD9;
	color: #FFF;
	opacity: 1;
}

/* next, prev */
.pager-area .pager-content .prev,
.pager-area .pager-content .next{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.pager-area .pager-content .prev{
	left: 0;
}
.pager-area .pager-content .next{
	right: 0;
}
.pager-area .pager-content .prev .link:before,
.pager-area .pager-content .next .link:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 11px;
	height: 11px;
	margin: auto;
	border-top: 2px solid #219BD9;
	border-right: 2px solid #219BD9;
}
.pager-area .pager-content .prev .link:before{
	transform: rotateZ(-135deg);
}
.pager-area .pager-content .next .link:before{
	transform: rotateZ(45deg);
}
.pager-area .pager-content .prev span.link:before,
.pager-area .pager-content .next span.link:before{
	border-color: #CCC;
}

/*----***detail.php***----*/
/*-*list-area*-*/

/*ken_inner*/
.notification-group .ken_inner{
	max-width:1160px;
}
/*top_line*/
.notification-group .top_line{
	display: flex;
}
/* list-area label */
.notification-group .list-area .label-date,
.notification-group .list-area .label-area,
.notification-group .list-area .label-info{
	flex: 1 0 auto;
	width: 100%;
	max-width: 150px;
	margin-right: 10px;
	/* padding: 5px; */
	padding: 2px 5px 0;
	text-align: center;
	font-size: 1.4rem;
}
.notification-group .list-area .label-date{
	color: #AAA;
}
.notification-group .list-area .label-area{
	background: #F2F9F5;
	color: #009142;
	padding-top: 3px;
	padding-bottom: 1px;
}
.notification-group .list-area .label-area.seibu{
	background: #EFF8FD;
	color: #219BD9;
}
.notification-group .list-area .label-area.chubu{
	background: #FEF4E9;
	color: #F2800C;
}
.notification-group .list-area .label-area.tobu{
	background: #FDEFEE;
	color: #E31B13;
}
.notification-group .list-area .label-info{
	margin-right: 16px;
	border: 1px solid #219BD9;
	text-align: center;
	color: #219BD9;
}
/*-notification_title-*/
.notification-group .notification_title{
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 24px;
}
/*-notification_title-*/
.notification-group .notification_exp{
    line-height: 2;
    border-top: 1px solid #eee;
    padding: 34px .8rem;
    color: #999;
}



@media screen and (min-width: 750px) {

	/* --- notification-group --- */
	/* title-area */
	.notification-group .title-area{
		padding: 6px 10px;
	}
	.notification-group .title-area .title img{
		height: 48px;
		width: 51px;
		vertical-align: -12px;
		margin-right: 14px;
	}
	.notification-group .title-area .link{
		display: block;
	}

	/* tab-area */
	.notification-group .tab-area{
		display: block;
		margin: 0 40px 30px;
		display: flex;
		flex-flow: row wrap;
	}
	.notification-group .tab-area li{
		display: inline-block;
		margin: 0 6px 10px;
	}
	.notification-group .tab-area li a{
		position: relative;
		display: block;
		padding: 14px 10px 12px;
		background: #DDD;
		font-weight: bold;
		color: #333;
	}
	.notification-group .tab-area .active a,
	.notification-group .tab-area li:hover a{
		opacity: 1;
		background: #219BD9;
		color: #FFF;
	}

	/* select-area */
	.notification-group .select-area{
		display: none;
	}
	 /* **body-container** */
	.notification-group .body-container{
		padding: 40px 50px 60px;
		border: 1px solid #DDD;
	}
	/* list-area label-group */
	.notification-group .list-area .list-wrap{
		width: auto;
		margin: 0;
	}
	.notification-group .list-area .label-group{
		margin-top: 0;
	}
	.notification-group .list-area .label-eventdate{
		flex: 0 0 auto;
	}

} /*  (min-width: 750px)  */