@charset "utf-8";
/* CSS Document */
.mainTitle{
  background: url("../img/report_mv_img.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.reportList{
	gap: 3.5rem 3.125rem;
}
.reportList li{
	width: 100%;
	max-width: 380px;
}
.reportList li figure{
  overflow: hidden;
  aspect-ratio:19 / 12;
  background: var(--Lgray);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reportList li figure img{
  height: 100%;
  width: auto;
  object-fit: cover;
  max-width: initial;
}
.reportList li figure + p{
	margin-top: 1rem;
}
.reportList li p.flex{
	align-items: center;
}
.reportList li p.flex span{
	display: inline-block;
	font-size: var(--font-12) !important;
}
.category{
	background: var(--red) !important;
	color: var(--wh) !important;
	display: inline-block;
	padding: 0.1rem 0.625rem;
	text-align: center;
}


.articleTit{
	display: flex;
	justify-content: space-between;
	font-size: var(--font-base) !important;
	letter-spacing: 0.1em;
	margin-bottom: 4.07rem;
}
.articleTit .category,
.articleTit .date{
	display: inline-block;
	font-size: var(--font-12) !important;
	letter-spacing: 0;
}
.articleTit .category{
	margin-right: 1.32rem;
	padding: 0.3rem 0.625rem 0.4rem;
	min-height: 29px;
}
.articleDetail p:not(:first-of-type){
	margin-top: 1.875rem;
}
.articleDetail figure{
	margin-top: 3.125rem;
}
.articleDetail .movie{
	margin-top: 4.75rem;
}
@media screen and (max-width: 768px) {
	.articleTit{
		display: block;
		margin-bottom: 2.035rem;
	}
	.articleTit .category{
		margin-bottom: 0.25rem;
	}
	.articleTit .date{
		display: block;
		margin-top: 0.25rem;
	}
	.articleDetail p:not(:first-of-type){
		margin-top: 0.938rem;
	}
	.articleDetail figure{
		margin-top: 1.563rem;
	}
	.articleDetail .movie{
		margin-top: 2.375rem;
	}
}