@charset "UTF-8";
article.info {
	margin: var(--section-block-margin) var(--base-inline-margin);
	font-size: calc(14.5 / 16 * 1rem);
	line-height: 1.75;
	padding-block-end: calc(var(--spacer-unit) * 4);
}
@media (768px <=width), print {
	article.info {
		font-size: calc(15 / 16 * 1rem);
	}
}
@media (1024px <=width), print {
	article.info {
		font-size: calc(16 / 16 * 1rem);
	}
}
@media (1280px <=width), print {
	article.info {
		font-size: calc(18 / 16 * 1rem);
	}
}
.article-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	border-block-end: 1px solid var(--grayCC);
	padding-block-end: calc(var(--spacer-unit) * 7.5);
	margin-block-end: calc(var(--spacer-unit) * 5);
	& .date {
		inline-size: calc(120 / 18 * 1em);
		flex: none;
	}
	& .category {
		border: 1px solid var(--grayCC);
		inline-size: calc(120 / 18 * 1em);
		text-align: center;
		padding: calc(0.35em - 1px) 0.2em;
		flex: none;
		line-height: 1;
		margin-inline-end: 3em;
		color: var(--gray66);
		text-transform: uppercase;
	}
	& h1 {
		width: 100%;
		font-size: calc(32 / 16 * 1rem * var(--font-scale-m));
		font-size: calc(32 * var(--font-scale-m));
		color: var(--text-color);
		line-height: 1.5;
		font-weight: var(--font-mediun);
		margin-block: calc(var(--spacer-unit) * 4.5) 0;
	}
}


article.info figure {
	margin-block: calc(var(--spacer-unit) * 6) calc(var(--spacer-unit) * 3);
	display: flex;
	flex-direction: column;
	gap:calc(var(--spacer-unit) * 3);
	& + figure {
		margin-block-start: calc(var(--spacer-unit) * 3);
	}
	&:last-child {
		margin-block-end: 0;
	}
	width:min(100%, 600px);
}
.info-list {
	line-height: 1.7;
	border-block-start: 1px solid var(--grayCC);
	& li {
		border-block-end: 1px solid var(--grayCC);
		display: flex;
		flex-wrap: wrap;
		padding: 0.98em 1em;
		align-items: flex-start;
	}
	& .date {
		inline-size: calc(120 / 18 * 1em);
		flex: none;
	}
	& .category {
		border: 1px solid var(--grayCC);
		inline-size: calc(120 / 18 * 1em);
		text-align: center;
		padding: calc(0.35em - 1px) 0.2em;
		flex: none;
		line-height: 1;
		margin-inline-end: 3em;
		color: var(--gray66);
		text-transform: uppercase;
	}
	& .title {
		inline-size: 100%;
		margin-block-start: 0.5em;
	}
	& a {
		color: inherit;
		text-decoration: none;
	}
}