@charset "utf-8";

/* __________ NEWS リスト __________ */
.news-list {
	display: grid;
	row-gap: calc(32 * var(--px));
}
.link-news {
	--columns: 12;
	column-gap: calc(16 * var(--px));
	background-color: var(--color-denki-black);
}
.news-date {
	--col-start: 1;
	--col-end: calc(var(--col-start) + 2);
	display: grid;
	align-items: center;
	justify-items: center;
	padding-block: calc(24 * var(--px));
	height: 100%;
	color: var(--color-red);
	font-family: var(--font-oswald);
	font-weight: 700;
}
.date-yyyy {
	display: flex;
	justify-content: space-between;
	margin-block-start: var(--leading-trim);
	margin-block-end: -.25em;
	padding-inline: .25em;
	font-size: calc(20 * var(--px));
}
.date-md {
	margin-block: var(--leading-trim);
	font-size: calc(48 * var(--px));
}
.link-news .card-text {
	--col-start: 3;
	--col-end: var(--columns);
	padding-block: calc(16 * var(--px));
	font-size: calc(28 * var(--px));
	font-weight: 500;
	line-height: var(--leading-l);
}
.link-news .card-icon {
	height: 100%;
	font-size: calc(24 * var(--px));
}
@media (min-width: 960px) {
	.link-news {
		--columns: 10;
	}
	.news-date {
		--col-end: calc(var(--col-start) + 1);
	}
	.link-news .card-text {
		--col-start: 2;
		font-size: calc(24 * var(--px));
	}
	.link-news .card-icon {
		height: auto;
		font-size: calc(28 * var(--px));
	}
}


/* __________ NEWS 詳細 __________ */
.news-detail {
	padding-inline: calc(32 * var(--px));
	background-color: var(--color-denki-black);
}
.card.news-head {
	--columns: 12;
}
.card.news-head .card-text {
	--col-start: 3;
	--col-end: -1;
}
@media (any-hover: hover) {
	.card.news-head:hover .card-text {
		color: unset !important;
	}
}
.news-separator {
	width: 100%;
	height: 2px;
	background-color: var(--color-white);
}
@media (min-width: 960px) {
	.card.news-head {
		--columns: 10;
	}
	.card.news-head .card-text {
		--col-start: 2;
	}
}

.news-body {
	padding-block: calc(16 * var(--px)) calc(80 * var(--px));
	padding-inline: calc(16 * var(--px));
	font-family: var(--font-base);
	font-size: calc(24 * var(--px));
	font-weight: 400;
	line-height: 1.8;
}
.news-body .text {
	white-space: pre-line;
}
.news-body .text-left {
	text-align: left;
}
.news-body .text-center {
	text-align: center;
}
.news-body .text-right {
	text-align: right;
}
.news-body .list {
	white-space: normal;
	padding-left: 1em;
	text-indent: -1em;
}
.news-body a {
	color: var(--color-link);
	text-decoration-line: underline;
	text-underline-offset: .25em;
	margin-block-end: .25em;
}
.news-body a:hover {
	color: var(--color-red);
	text-decoration-line: none;
}
.news-body .font-regular { font-weight: 400; }
.news-body .font-medium { font-weight: 500; }
.news-body .font-bold { font-weight: 700; }
.news-body .font-s { font-size: 16rem; }
.news-body .font-m { font-size: 20rem; }
.news-body .font-l { font-size: 24rem; }
.news-body .font-xl { font-size: 28rem; }
.news-body .img-xs { max-inline-size: calc(160 * var(--px)); }
.news-body .img-s { max-inline-size: calc(384 * var(--px)); }
.news-body .img-m { max-inline-size: calc(512 * var(--px)); }
.news-body .img-l { max-inline-size: calc(640 * var(--px)); }
.news-body .img-xl { max-inline-size: calc(864 * var(--px)); }
.news-body .mt-s { margin-block-start: calc(8 * var(--px)); }
.news-body .mt-m { margin-block-start: calc(16 * var(--px)); }
.news-body .mt-l { margin-block-start: calc(24 * var(--px)); }
.news-body .mt-xl { margin-block-start: calc(32 * var(--px)); }
.news-body .news-grid {
	display: grid;
	grid-template-columns: repeat(var(--col, 1), minmax(0, var(--col-size, 1fr)));
	white-space: normal;
}
.news-body .news-grid.col-2 { --col: 2; }
.news-body .news-grid.col-3 { --col: 3; }
.news-body .news-grid.col-4 { --col: 4; }
.news-body .news-grid.col-5 { --col: 5; }
.news-body .news-grid.col-6 { --col: 6; }
.news-body .news-grid.col-fit { --col: auto-fit; }
.news-body .news-grid.col-size-xs { --col-size: calc(160 * var(--px)); }
.news-body .news-grid.col-size-s { --col-size: calc(384 * var(--px)); }
.news-body .news-grid.col-size-m { --col-size: calc(512 * var(--px)); }
.news-body .news-grid.col-size-l { --col-size: calc(640 * var(--px)); }
.news-body .news-grid.gap-s { gap: calc(16 * var(--px)); }
.news-body .news-grid.gap-m { gap: calc(20 * var(--px)); }
.news-body .news-grid.gap-l { gap: calc(24 * var(--px)); }
.news-body .news-grid.gap-xl { gap: calc(32 * var(--px)); }
.news-body .movie {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
}
@media (min-width: 960px) {
	.news-body {
		font-size: calc(20 * var(--px));
	}
	.news-body .font-s { font-size: calc(12 * var(--px)); }
	.news-body .font-m { font-size: calc(16 * var(--px)); }
	.news-body .font-l { font-size: calc(20 * var(--px)); }
	.news-body .font-xl { font-size: calc(24 * var(--px)); }
}