@charset 'UTF-8';
/*----------------------------------------

	- news

-----------------------------------------*/

/*----------------------------------------
	news
-----------------------------------------*/

.news {
	margin-block-start: -80px;
	border-block-start: var(--border-width1) solid var(--color-the63rd-gray02);
	border-start-start-radius: 80px;
	background-color: var(--color-the63rd-black01);
}

.news .newsContainer {
	display: grid;
	gap: 0 70px;
	grid-template-columns: 250px 1fr;
	inline-size: min(80%, 1120px);
	margin-inline: auto;
	padding-block: 80px 40px;
}

.news .newsContainer>.newsTitle {
	display: grid;
	gap: 39px 0;
	grid-template-columns: 1fr;
	align-self: start;
}

.news .newsContainer>.newsTitle h1 {
	inline-size: 200px;
}

.news .newsContainer>.newsTitle ul {
	display: grid;
	gap: 0 24px;
	grid-template-columns: repeat(2, 40px);
	grid-template-rows: auto;
	justify-content: start;
}

.news .newsContainer .newsContent .newsTxt {
	color: var(--color-white01);
}

.news .newsContainer .newsContent .newsTxt a {
	border-block-end: var(--border-width1) solid currentColor;
	color: var(--color-white01);
}

.news .newsContainer .newsContent .newsList {
	margin-block-start: 80px;
}

.news .newsContainer .newsContent .newsList li {
	padding-block: 32px;
	border-block-start: var(--border-width1) solid var(--color-the63rd-gray02);
}

.news .newsContainer .newsContent .newsList li a {
	display: grid;
	gap: 0 40px;
	grid-template-columns: 160px 1fr;
	color: var(--color-white01);
}

.news .newsContainer .newsContent .newsList li a figure {
	position: relative;
	aspect-ratio: 160/105;
	object-fit: cover;
}

.news .newsContainer .newsContent .newsList li a figure::before {
	content: '';
	opacity: 0;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 100%;
	inline-size: 100%;
	background-color: var(--color-white01);
	transition: opacity 0.6s cubic-bezier(0.45, 0, 0.55, 1);
}

.news .newsContainer .newsContent .newsList li a:hover figure::before {
	opacity: 0.5;
}

.news .newsContainer .newsContent .newsList li a figure img {
	aspect-ratio: 160/105;
	object-fit: cover;
}

.news .newsContainer .newsContent .newsList li a .newsListContainer {
	line-height: var(--line-height15);
}

.news .newsContainer .newsContent .newsList li a .newsListContainer time {
	display: block;
	font-size: var(--font-size16);
}

.news .newsContainer .newsContent .newsList li a .newsListContainer .newsTitle {
	display: block;
	margin-block-start: 15px;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size24);
}

.news .newsContainer .newsContent .newsList li a .newsListContainer span {
	position: relative;
}

.news .newsContainer .newsContent .newsList li a:is(.external, .pdf) .newsListContainer .newsTitle span {
	margin-inline-end: calc(0.45em + 16px);
}

.news .newsContainer .newsContent .newsList li a.external .newsListContainer .newsTitle span::after {
	content: '';
	display: inline-block;
	position: absolute;
	inset-block-end: 0.28em;
	inset-inline-end: calc((0.45em + 16px)* -1);
	block-size: 16px;
	inline-size: 16px;
	background: url(/asset/img/sengu/the63rd/common/c_ic_external02w_l.svg) no-repeat center center;
	background-size: cover;
}

.news .newsContainer .newsContent .newsList li a.pdf .newsListContainer .newsTitle span::after {
	content: '';
	display: inline-block;
	position: absolute;
	inset-block-end: 0.28em;
	inset-inline-end: calc((0.45em + 16px)* -1);
	block-size: 16px;
	inline-size: 16px;
	background: url(/asset/img/sengu/the63rd/common/c_ic_pdf01w_l.svg) no-repeat center center;
	background-size: cover;
}

@media (width <=1024px) {
	.news .newsContainer {
		gap: 64px 0;
		grid-template-columns: 1fr;
	}

	.news .newsContainer>.newsTitle {
		display: grid;
		gap: 0 0;
		grid-template-columns: repeat(2, 1fr);
	}

	.news .newsContainer>.newsTitle ul {
		margin-inline-start: auto;
	}
}

@media (width <=800px) {
	.news .newsContainer {
		inline-size: 84%;
		padding-block: 64px 40px;
	}

	.news .newsContainer>.newsTitle ul {
		grid-template-columns: repeat(2, 32px);
		margin-block-start: 7px;
	}

	.news .newsContainer .newsContent .newsList {
		margin-block-start: 64px;
	}

	.news .newsContainer .newsContent .newsList li a {
		gap: 0 16px;
	}

	.news .newsContainer .newsContent .newsList li a .newsListContainer time {
		font-size: var(--font-size14);
	}

	.news .newsContainer .newsContent .newsList li a .newsListContainer .newsTitle {
		margin-block-start: 11px;
		font-size: var(--font-size16);
	}

	.news .newsContainer .newsContent .newsList li a:is(.external, .pdf) .newsListContainer .newsTitle span {
		margin-inline-end: calc(0.45em + 12px);
	}

	.news .newsContainer .newsContent .newsList li a.external .newsListContainer .newsTitle span::after {
		inset-inline-end: calc((0.45em + 12px)* -1);
		block-size: 12px;
		inline-size: 12px;
		margin-inline-start: 7px;
		background-image: url(/asset/img/sengu/the63rd/common/c_ic_external02w_s.svg);
	}

	.news .newsContainer .newsContent .newsList li a.pdf .newsListContainer .newsTitle span::after {
		inset-inline-end: calc((0.45em + 11px)* -1);
		block-size: 11px;
		inline-size: 11px;
		margin-inline-start: 7px;
		background-image: url(/asset/img/sengu/the63rd/common/c_ic_pdf01w_s.svg);
	}
}