@charset "UTF-8";

/* ============================================================
 * お知らせ一覧（/news/）
 * 読み込み順： reset.css → common.css → news.css → drawer-nav.css
 *
 * 記事リスト（.news-items）とページ送り（.pager）は詳細ページでも使うため
 * common.css 側に置いている。ここには一覧ページ固有のものだけ。
 * ========================================================== */

/* ------------------------------------------------------------
 * 一覧
 * ---------------------------------------------------------- */
.news-list {
	padding: 72px 0 96px;
	background: var(--color-white);
}

/* カテゴリ絞り込み */
.news-cat {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.news-cat__link {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	color: var(--color-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
}

.news-cat__link.is-current {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-white);
}

@media (hover: hover) {
	.news-cat__link:hover:not(.is-current) {
		border-color: var(--color-accent);
		color: var(--color-accent);
	}
}

/* 記事が1件もないとき（在庫管理システム側で .news-list__empty を出力）。
   記事が0件でも空の <ul class="news-items"> が残り、上罫線だけが浮いてしまうので
   そちらは隠し、この1文を記事リストと同じ位置・同じ枠組みで見せる */
.news-list__empty {
	margin-top: 32px;
	padding: 40px 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	color: var(--color-sub);
	font-size: 16px;
	line-height: 1.8;
}

.news-list__empty + .news-items {
	display: none;
}


/* ------------------------------------------------------------
 * ~959px
 * ---------------------------------------------------------- */
@media screen and (max-width: 959px) {
	.news-list {
		padding: 56px 0 72px;
	}

	.news-list__empty {
		margin-top: 24px;
		padding: 32px 0;
		font-size: 14px;
	}
}

/* ------------------------------------------------------------
 * ~767px
 * ---------------------------------------------------------- */
@media screen and (max-width: 767px) {
	.news-list {
		padding: 40px 0 56px;
	}

	.news-cat__link {
		padding: 6px 16px;
		font-size: 12px;
	}

}