/* news.css */
@charset "utf-8";

/* ニュースエリア共通 */
.news__item {
	display: block;
}
.news__link {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr;
	text-decoration: none;
}
.news__thumb {
	order: 1;
	overflow: clip;
	aspect-ratio: 16 / 9;
}

.news__thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform 0.2s ease-in-out;
}
.news__link:hover .news__thumb img {
	transform: scale(1.05);
}
.news__meta {
	order: 3;
	display: flex;
	align-items: center;
	gap: 10px;
}
.news__cate {
	position: relative;
	display: block;
	background: var(--main);
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	color: var(--white);
}
.news__date {
	color: var(--main);
	font-family: var(--en-font);
	font-size: 0.9em;
	font-weight: 600;
}
.news__heading {
	order: 2;
	font-weight: 600;
	font-size: 1.1em;
	color: var(--glay);
}
.news__heading a {
	color: inherit;
	text-decoration: underline;
}
.news__link:hover .news__heading {
	text-decoration: none;
}

/* -----------------スクロール対応----------------- */
.scroll-area {
	height: 100%;
	/* max-height: 700px; */
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--main) transparent;
}
.scroll-area::-webkt-scrollbar {
	width: 6px;
}
.scroll-area::-webkit-scrollbar-track {
	background: transparent;
}
.scroll-area::-webkit-scrollbar-thumb {
	background-color: var(--main);
	border: 2px solid transparent;
	background-clip: content-box;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
	background-color: var(--main);
}

/* -----------------カテゴリによって色を変える----------------- */
.news__cate--schoollNewsFeed {
	background-color: var(--sub);
	color: #fff;
}
/* 校長だより → 赤系 */
.news__cate--htblogFeed {
	background-color: #ac2348; /* 入れ替え後の通常色 */
	color: #fff;
}
/* クラブ活動 → 緑系 */
.news__cate--clubblogFeed {
	background-color: #2fa553; /* 入れ替え後の通常色 */
	color: #fff;
}
/* イベント → 水色系 */
.news__cate--eventblogFeed {
	background-color: #5ba8c1; /* 入れ替え後の通常色 */
	color: #fff;
}
/* 進路 → 紺系 */
.news__cate--pathblogFeed {
	background-color: #1a2d61; /* 入れ替え後の通常色 */
	color: #fff;
}
/* 生徒会 → 黄系 */
.news__cate--seitokaiblogFeed {
	background-color: #c4a923; /* 入れ替え後の通常色 */
	color: #fff;
}

/* -----------------レイアウトバリエーション----------------- */

/* 恐らく下層ページ用フィード */

.text-news .news__item {
	border-bottom: 1px solid var(--silver);
}
.text-news .news__link {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4em;
	color: inherit;
	margin: 0;
	padding: 1em 0;
}
.text-news .news__meta {
	font-weight: 600;
	font-size: 14px;
	order: 1;
}
.text-news .news__heading {
	order: 2;
	padding-right: 1.75em;
	position: relative;
}
.text-news .news__heading::after {
	content: 'keyboard_arrow_right';
	font-family: var(--icons);
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translate(0, -50%);
	color: inherit;
	transition: all 0.2s;
}
.text-news .news__heading:hover {
	color: var(--main-light);
}
.text-news .news__heading:hover::after {
	transform: translate(30%, -50%);
}
@media (min-width: 768px) {
	.text-news .news__link {
		display: grid;
		grid-template-columns: auto 1fr;
	}
}

/* ========================
   News Custom
======================== */
.news-grid {
	gap: 4px;
}

.news-grid .news__link {
	background: var(--white);
}
.news__meta,
.news__heading {
	margin-inline: 8px;
	margin-block: 0;
}