になる。
3列グリッド（日付 / カテゴリ / タイトル）。top.css の PC 定義（887-909行）は
flex の横並びだが、一覧は件数が多く、日付とカテゴリの左端をそろえたいのでグリッドにする。
カテゴリ列を固定幅にすることで、バッジ3種の幅が自動的にそろう。 */
.news__link {
display: grid;
grid-template-columns: 7.5em 9em 1fr;
align-items: center;
gap: var(--spacing-lg);
padding-block: var(--spacing-lg);
color: var(--color-text);
font-size: var(--fs-sm);
text-decoration: none;
}
a.news__link:hover .news__title {
text-decoration: underline;
}
/* 日付。top.css 807-812行と同じ値 */
.news__date {
margin: 0;
color: var(--color-gray-600);
font-size: var(--fs-base);
font-feature-settings: "palt";
}
/* カテゴリのバッジ。枠線の太さ（1.5px）と余白は top.css 814-828行を踏襲。
短大に合わせて **角丸を無くし**、幅は列幅いっぱい（width: 100%）で3種そろえる。
top.css の width: 40% は一覧では使わない。 */
.news__category {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
width: 100%;
padding: 3px 10px;
border: 1.5px solid currentColor;
border-radius: 0;
color: var(--color-main);
background-color: color-mix(in srgb, var(--color-main) 1%, transparent);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
white-space: nowrap;
}
/* 修飾子3種。
top.css には --exam と --important の定義しかなく、**--info の定義は無い**
（ベースの紺がそのまま出る前提）。ここでは3種そろえて明示する。
値は top.css 830-834行に合わせ、--exam と --important は同じ赤。
※「重要なお知らせ」と「入試情報」が同色になる。分けるなら --important だけ差し替える。 */
.news__category--info {
color: var(--color-main);
background-color: color-mix(in srgb, var(--color-main) 1%, transparent);
}
.news__category--exam,
.news__category--important {
color: var(--color-exam);
background-color: color-mix(in srgb, var(--color-exam) 6%, transparent);
}
/* 2026-09-24 お知らせ分類：中区分 メディア・イベント・OC の色 */
.news__category--media {
color: var(--color-news-media);
background-color: color-mix(in srgb, var(--color-news-media) 6%, transparent);
}
.news__category--event {
color: var(--color-news-event);
background-color: color-mix(in srgb, var(--color-news-event) 6%, transparent);
}
/* タイトル。PHP は を出力する */
.news__title {
margin: 0;
font-size: var(--fs-base);
font-weight: normal;
line-height: var(--lh-relaxed);
}
/* ==========================================================================
8-2. KV の縦幅（一覧ページだけ広くする）
--------------------------------------------------------------------------
既存値（components.css）
.c-mv--s min-height: 180px（2558行）／SP 140px（2619行）
一覧の KV は .c-mv__cat（小見出し）と .c-mv__title（h1）の2段になるため、
記事詳細（4-2）と同じ考え方で :has() を使って広げる。
限定の方法：.c-mv__cat は下層92ページで使われているため目印にできない。
一覧ページにしか無い .p-archive-filter（年度セレクト）を 越しに見る。
詳細度は (0,2,0) で .c-mv--s の (0,1,0) に勝つ。
========================================================================== */
main:has(.p-archive-filter) .c-mv--s {
min-height: 260px;
}
/* ==========================================================================
9. 年度アーカイブのセレクト
--------------------------------------------------------------------------
common.js の initYearSelect()（395-436行）が要求するもの。
- id="yearSelect" … ラッパ。開閉時に **is-open** が付け外しされる（404・408行）
- id="yearSelectTrigger" … クリックで開閉（423行）
- .c-custom-select__label … 選択中のラベル。textContent が差し替わる（418行）
- .c-custom-select__item … 選択肢。**is-selected** が付け外しされる（413-416行）
JS は表示・非表示を style で触らないため、開閉は **.is-open** だけで CSS 側が担当する。
選択すると location.href = '?year=' + data-value（420行）で同じページに遷移する。
.c-custom-select__native は aria-hidden の実 select（支援技術用）で、画面には出さない。
短大に寄せた点（2026-09-09）
- 右寄せ（.p-archive-filter の justify-content: flex-end）
- 角丸なし（トリガー・ドロップダウンとも border-radius: 0）
- 右端の矢印を **メインカラーのベタ塗りのボタン**にする（白い山形を ::before で描く）
- 幅は 240px を目安にする（短大の実寸は測れないため目安）
========================================================================== */
.p-archive-filter {
display: flex;
justify-content: flex-end;
margin-bottom: var(--spacing-lg);
}
.c-custom-select {
position: relative;
width: 240px;
font-size: var(--fs-sm);
}
/* aria-hidden のネイティブ select。common.css の .u-visually-hidden と同じ手法で隠す */
.c-custom-select__native {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* 矢印ボタンを枠いっぱいの高さで置くため、align-items は stretch、
右側のパディングは持たせない（矢印ボタンが右端に接する）。 */
.c-custom-select__trigger {
display: flex;
align-items: stretch;
justify-content: space-between;
padding: 0 0 0 var(--spacing-md);
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: #fff;
color: var(--color-text);
line-height: var(--lh-normal);
cursor: pointer;
}
.c-custom-select__trigger:hover {
border-color: var(--color-main);
}
.c-custom-select__trigger:focus-visible {
outline: 2px solid var(--color-main);
outline-offset: 2px;
}
.c-custom-select__label {
display: flex;
align-items: center;
padding-block: 10px;
font-weight: var(--fw-bold);
}
/* 右端の矢印ボタン：メインカラーのベタ塗り。山形は ::before で白く描く。
右上・右下の角は **トリガー側の overflow: hidden で切る**。
ここに border-radius を書くと、外側の角丸（--radius-sm＝5px）から枠線 1px を引いた
4px を手で合わせることになり、枠線の太さを変えたときにずれる。切り取りに任せる方が確実。 */
.c-custom-select__arrow {
position: relative;
flex-shrink: 0;
width: 40px;
align-self: stretch;
background-color: var(--color-main);
}
.c-custom-select__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -6px 0 0 -4px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
}
.c-custom-select.is-open .c-custom-select__arrow::before {
margin-top: -2px;
transform: rotate(-135deg);
}
/* ドロップダウン。JS は is-open を付け外しするだけなので、開閉はここで持つ */
.c-custom-select__dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
right: 0;
left: 0;
z-index: 10;
max-height: 320px;
margin: 0;
padding: 0;
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: #fff;
box-shadow: var(--shadow-md);
list-style: none;
}
.c-custom-select.is-open .c-custom-select__dropdown {
display: block;
}
.c-custom-select__item {
padding: 10px var(--spacing-md);
line-height: var(--lh-normal);
cursor: pointer;
}
.c-custom-select__item:hover {
background-color: var(--color-gray-25);
}
.c-custom-select__item.is-selected {
background-color: var(--color-sub);
color: var(--color-main);
font-weight: var(--fw-bold);
}
/* ==========================================================================
10. 一覧のSP（max-width: 768px）
--------------------------------------------------------------------------
8・8-2・9 のベース定義の後ろに置く。前に置くと記述順で負けて効かない。
1行3列は入らないので、top.css の SP（849-884行）と同じ考え方で
「1段目＝日付＋カテゴリ／2段目＝タイトル」の2段にする。
バッジは短大にならい、SPでも3種の幅をそろえる（固定幅 8em）。
========================================================================== */
@media (max-width: 768px) {
/* KV。SP の .c-mv--s は 140px（components.css:2619） */
main:has(.p-archive-filter) .c-mv--s {
min-height: 200px;
}
.news__link {
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--spacing-xs) var(--spacing-sm);
padding-block: var(--spacing-md);
}
.news__date {
grid-column: 1;
font-size: var(--fs-sm);
}
.news__category {
grid-column: 2;
justify-self: start;
width: auto;
min-width: 8em;
padding: 2px 8px;
font-size: var(--fs-xs);
}
.news__title {
grid-column: 1 / -1;
font-size: var(--fs-sm);
line-height: var(--lh-normal);
}
/* 年度セレクトは幅いっぱいに */
.p-archive-filter {
justify-content: stretch;
margin-bottom: var(--spacing-md);
}
.c-custom-select {
width: 100%;
}
}
/* 2026-09-24 お知らせ一覧のアイコン： の ::after は grid の子要素になり段が崩れるため消し、タイトルの末尾に付ける（短大と同じ方式） */
/* ① 一覧の の自動アイコン（core の PDF・Word・Excel・外部リンク）を消す。外部リンクは core の指定と同じ条件をお知らせに絞って詳細度を上げる */
.news__list a.news__link::after,
.c-box-content .news__list a.news__link[href^="http"][target="_blank"]:not([href*=".pdf"]):not([href$=".doc"]):not([href$=".docx"]):not([href$=".xls"]):not([href$=".xlsx"])::after {
content: none;
}
/* ② PDF の行：タイトルの末尾に PDF のアイコン（値は components.css の a[href*=".pdf"]::after と同じ） */
.news__list a.news__link[href*=".pdf"] .news__title::after {
content: "\f1c1";
font-family: "Font Awesome 6 Free";
font-weight: 400;
color: var(--color-pdf-badge);
margin-left: 6px;
font-size: 1.1em;
vertical-align: middle;
}
/* ③ 外部リンクの行：タイトルの末尾に別ウィンドウのアイコン（値は components.css の外部リンクと同じ。PHP が target を出すようになってから効く） */
.news__list a.news__link[target="_blank"]:not([href*=".pdf"]) .news__title::after {
content: "\f35d";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--color-gray-400);
margin-left: 6px;
font-size: 0.8em;
vertical-align: middle;
}