@charset "UTF-8";
#contentHeader {
	background : url("/wp/wp-content/themes/pgg_bogo/company/img/bg_main.jpg") 50% 50% no-repeat;
	background-size : cover;
}
#infolist > li {
	display : grid;
	grid-template-columns : 6em 8em 1fr;
	grid-gap : 16px;
	padding : 24px;
	border-top : 1px solid #cccccc;
}
#infolist > li:last-child {
	border-bottom : 1px solid #cccccc;
}
#infolist > li .date {
	padding : 4px 0;
}
#infolist > li .category span {
	display : flex;
	font-size : 0.825em;
	line-height : 1.75;
	justify-content : center;
	align-items : center;
	padding : 8px 12px;
	color : #ffffff;
	background-color : #333333;
}
#infolist > li .title {
	padding : 4px 0;
}

/* detail */
#detail header {
	display : grid;
	grid-template-columns : auto 1fr;
	grid-gap : 24px 16px;
	margin-bottom : 24px;
	padding : 16px 0 24px;
	border-bottom : 1px solid #cccccc;
}
#detail header .date {
	grid-column : 1/2;
	grid-row : 1/2;
	padding : 4px 0;
}
#detail header .category {
	grid-column : 2/3;
	grid-row : 1/2;
}
#detail header .category span {
	display : inline-block;
	line-height : 1.75;
	padding : 4px 8px;
	color : #ffffff;
	background-color : #000000;
}
#detail header .title {
	grid-column : 1/3;
	grid-row : 2/3;
	font-size : 1.275em;
	font-weight : bold;
}


#detail .infobody > p:not(:last-child) {
	margin-bottom : 1em;
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
}
@media screen and (max-width: 767px) {
	#infolist > li {
		display : grid;
		grid-template-columns : auto 1fr;
		grid-gap : 8px 16px;
		padding : 16px 0;
	}
	#infolist > li .date {
		grid-column : 1/2;
		grid-row : 1/2;
	}
	#infolist > li .category {
		grid-column : 2/3;
		grid-row : 1/2;
	}
	#infolist > li .title {
		grid-column : 1/3;
		grid-row : 2/3;
	}
}