@charset "UTF-8";

/* =========================================================================
   LATEST NEWS 一覧
   -------------------------------------------------------------------------
   Figma「LATEST NEWS_pc01」(1440x2269)と「LATEST NEWS_sp01」(390x1241)の実測。
     PC  y=217  02 + LATEST / NEWS(Geist Thin 280px・2行)
         y=968  一覧(1280幅・左右余白80)。行は 56|104|144|残り(間隔32)
         +80    ページ送り → +180 footer
     SP  y=145  見出し(76px)
         y=391  一覧(350幅・左右余白20)。番号行 → 見出しの2段組み
         +48    ページ送り → +80 footer
   トークン(--c-f9 / --c-ink / --c-3c / --c-87 / --c-c4 / --edge)は main.css の :root。
   字間は main.css の `*` セレクタで全要素に 5% が当たっているので指定しない。
   ========================================================================= */

.narchive {
	background: var(--c-f9);
	color: var(--c-ink);
	/*
	 * 下の余白は padding で取る。最後の子要素に margin-bottom を置くと
	 * マージンの相殺で親の外へ抜け、body の黒地が帯状に見えてしまう。
	 */
	padding-bottom: 180px;
}

/*
 * 左右の余白と最大幅は .ptitle と同じ書き方で自分に持たせる。
 * .narchive 側に padding を持たせて .ptitle を依存させると、
 * ラッパーの無いページ(404など)で共通部品の余白が消える。
 */
.narchive__inner {
	max-width: calc(1280px + var(--edge) * 2);
	margin-left: auto;
	margin-right: auto;
	margin-top: 180px;
	padding-left: var(--edge);
	padding-right: var(--edge);
}

/*
 * 見出し(02 + LATEST / NEWS)は共通部品 .ptitle のまま。
 * 2行への行分けは index.php から $args['lines'] で渡している。
 * このページで上書きするものは無い(280px・削り跡の比率とも共通部品がFigma準拠)。
 */

/* -------------------------------------------------------------------------
   一覧
   1行 = 番号 | 日付 | カテゴリー | 見出し。行の下に1pxの罫線 #C4C4C4。
   Figmaに上端の罫線は無いので、1行目の上には線を引かない。
   ------------------------------------------------------------------------- */

.narchive__list {
	display: flex;
	flex-direction: column;
	gap: 24px; /* 行間(行の高さ55 + 24 = ピッチ79) */
	margin: 0;
	padding: 0;
	list-style: none;
}

.narchive__link {
	display: grid;
	grid-template-columns: 56px 104px 144px 1fr;
	grid-template-areas: "no date cat title";
	column-gap: 32px;
	align-items: start;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--c-c4);
	transition: border-color 0.3s ease;
}

.narchive__no,
.narchive__date,
.narchive__cat,
.narchive__title {
	font-weight: 400;
	font-size: 15px;
	line-height: 30px;
}

.narchive__no,
.narchive__date {
	color: var(--c-87);
}

.narchive__cat,
.narchive__title {
	color: var(--c-3c);
}

.narchive__no {
	grid-area: no;
}

.narchive__date {
	grid-area: date;
}

.narchive__cat {
	grid-area: cat;
}

.narchive__title {
	grid-area: title;
	transition: color 0.3s ease;
}

/* デザインにhover指定は無い。行が押せることが分かる最小限だけ付ける */
.narchive__link:hover {
	border-color: var(--c-ink);
}

.narchive__link:hover .narchive__title {
	color: var(--c-ink);
}

.narchive__empty {
	font-weight: 400;
	font-size: 15px;
	line-height: 30px;
	color: var(--c-3c);
}

/* -------------------------------------------------------------------------
   ページ送り(1 2 3 … →)
   Figma: 12px / lh18 / #191919 / 間隔24 / コンテンツ幅に対して中央
   ------------------------------------------------------------------------- */

/*
 * WordPressのページ送りは <nav class="navigation narchive__pager"> で出る。
 * `navigation` はコアが必ず付けるクラスなので、そちらを掛かり所にしている
 * (main.css の .pagination より詳細度が高く、そのままでは効く48pxの余白を上書きする)。
 */
.narchive .navigation {
	margin-top: 80px;
}

/* WordPressが出すnav見出し。読み上げ用なので画面には出さない */
.narchive .navigation .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.narchive .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.narchive .page-numbers {
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--c-ink);
	transition: opacity 0.3s ease;
}

.narchive a.page-numbers:hover {
	opacity: 0.6;
}

/*
 * Figmaは全ページ番号が同じ #191919 で、現在ページの区別が無い。
 * どこを見ているか分からなくなるため、細い下線だけ足している(要確認)。
 */
.narchive .page-numbers.current {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.narchive .page-numbers.prev,
.narchive .page-numbers.next {
	display: flex;
	align-items: center;
}

.narchive__chevron {
	display: block;
}

/* =========================================================================
   タブレット幅(SP専用デザインの対象外。1440用の列幅では見出しが狭くなる)
   ========================================================================= */

@media (min-width: 768px) and (max-width: 900px) {
	.narchive {
		padding-bottom: 120px;
	}

	.narchive__inner {
		margin-top: 96px;
	}

	/*
	 * 1440用の固定列(56/104/144)だと見出しに回る幅が痩せるので、番号と日付を
	 * 文字幅ぎりぎり(15pxで 31.6 / 88.6 の実測)まで詰めて間隔も24にする。
	 * カテゴリーは ANNOUNCEMENT(133.1)が入る144のままにする。
	 * max-content は使えない。行ごとに別のグリッドなので列が揃わなくなる。
	 */
	.narchive__link {
		grid-template-columns: 36px 92px 144px 1fr;
		column-gap: 24px;
	}

	.narchive .navigation {
		margin-top: 64px;
	}
}

/* =========================================================================
   SP  (Figma: LATEST NEWS_sp01 = 390x1241)
   ========================================================================= */

@media (max-width: 767px) {
	.narchive {
		padding-bottom: 80px;
	}

	/* 見出しの下は80(見出しフレームの下paddingぶん) */
	.narchive__inner {
		margin-top: 80px;
	}

	.narchive__list {
		gap: 16px;
	}

	/*
	 * 番号・日付・カテゴリーを幅なりに並べ(間隔16)、その下に見出し。
	 * PCの固定列と違い、SPは各項目が文字幅ぶんしか取らない。
	 */
	.narchive__link {
		grid-template-columns: auto auto 1fr;
		grid-template-areas:
			"no date cat"
			"title title title";
		column-gap: 16px;
		row-gap: 16px;
		padding-bottom: 16px;
	}

	.narchive__no,
	.narchive__date,
	.narchive__cat {
		font-size: 12px;
		line-height: 24px;
	}

	.narchive__title,
	.narchive__empty {
		font-size: 14px;
		line-height: 28px;
	}

	.narchive .navigation {
		margin-top: 48px;
	}
}