/* ==========================================================================
   pages/news.css — /news/ 専用CSS（お知らせ移行・260907仕様書）
   --------------------------------------------------------------------------
   読み込み対象：www/top/index.html（§4 NEWS）、www/corporations/news/ 配下の全ページ

   収録内容：
   1. p-news__ 系10クラス … top.css より移設（下層ページは top.css を
      読み込まないため、記事ページに適用するにはここへ移す必要があった）
   2. c-custom-select 系（年度セレクト） … college/assets/css/news.css より
      移植。rgba(18,193,158,*) は college 側 --color-main の値の直書きだったため、
      法人サイトの var(--color-main) を使う color-mix() に置き換えている
   3. p-newsDetail__ 系 … 新規（記事詳細ページ用）
   4. 一覧ページ（/corporations/news/）は 1. の p-news__ 系をそのまま流用する
      （専用クラスは持たない。詳細は 4. のセクション参照）
   ========================================================================== */


/* ==========================================================================
   1. p-news__ 系（トップ §4 NEWS／移設元：top.css）
   --------------------------------------------------------------------------
   - PC2カラム（NEWS本体 1fr ＋ バナー 320px）。SPは1カラム縦積み。
   - NEWS一覧は PHP（news/php/corporation_news.php）を SSI include（断片側に p-news__item 等を保持）。
   ========================================================================== */
/* バナー→NEWSの間隔を半分にするため padding-top のみ半分に。
   padding-bottom（NEWSと次セクションの間隔）は現状維持 */
.p-news { padding-top: 32px; padding-bottom: 64px; }
.p-news__layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; }
.p-news__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  border-top: 1px solid var(--color-gray-300);
}
.p-news__item { border-bottom: 1px solid var(--color-gray-300); }
.p-news__link {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  color: var(--color-gray-900);
  text-decoration: none;
}
.p-news__link:hover .p-news__title { text-decoration: underline; }
.p-news__date {
  flex-shrink: 0;
  color: var(--color-gray-700);
  font-weight: var(--fw-bold);
}
.p-news__cat {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 3px 10px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  border: 1.5px solid currentColor;
  border-radius: 2px;
  box-sizing: border-box;
  color: var(--color-main);
  background-color: color-mix(in srgb, var(--color-main) 6%, transparent);
}
.p-news__cat--exam {
  color: var(--color-exam);
  background-color: color-mix(in srgb, var(--color-exam) 6%, transparent);
}
.p-news__title {
  line-height: 1.5;
}
.p-news__more { margin-top: 30px; }

@media (max-width: 768px) {
  .p-news { padding-top: 20px; padding-bottom: 40px; }
  .p-news__layout { grid-template-columns: 1fr; gap: 32px; }
  .p-news__link { flex-wrap: wrap; gap: 8px 12px; }
}


/* ==========================================================================
   2. c-custom-select 系（年度セレクト／移植元：college/assets/css/news.css）
   --------------------------------------------------------------------------
   開閉・選択処理は common.js の initYearSelect() で管理
   ========================================================================== */
/* 年度セレクトの囲み。移植元 college/assets/css/news.css と同一。
   flex + flex-end で右寄せ、下に一覧との間隔を確保する。
   短大側にSP（768px以下）の上書きは無く、SPでも右寄せのまま
   （.c-custom-select が width:100% になるため、実質は全幅表示になる）。
   初回移植時に範囲外として持ち込まなかったものを補った。 */
.p-archive-filter {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--spacing-xl);
}

.c-custom-select {
  position: relative;
  width: 260px;
  user-select: none;
}

/* トリガーボタン */
.c-custom-select__trigger {
  display: flex;
  align-items: stretch;
  background-color: #ffffff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-base);
}

.c-custom-select__trigger:hover,
.c-custom-select.is-open .c-custom-select__trigger {
  border-color: var(--color-main);
}

/* ラベルエリア */
.c-custom-select__label {
  flex: 1;
  padding: 12px 16px;
  font-size: var(--fs-base);
  color: var(--color-text);
  letter-spacing: 0.03em;
  line-height: 1.5;
}

/* 矢印：四角いメインカラーボタン */
.c-custom-select__arrow {
  width: 44px;
  background-color: var(--color-main);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.c-custom-select__arrow::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2.5px solid #ffffff;
  border-bottom: 2.5px solid #ffffff;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform var(--transition-base), margin-top var(--transition-base);
}

.c-custom-select.is-open .c-custom-select__arrow::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

/* ドロップダウン：デフォルトは完全に非表示 */
.c-custom-select__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  z-index: 100;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    max-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 180ms ease,
    transform 200ms ease,
    visibility 0ms 250ms;
}

.c-custom-select.is-open .c-custom-select__dropdown {
  max-height: 300px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    max-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 180ms ease,
    transform 200ms ease,
    visibility 0ms 0ms;
}

.c-custom-select__dropdown {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

/* 各オプション */
.c-custom-select__item {
  padding: 14px 16px;
  font-size: var(--fs-base);
  color: var(--color-text);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-light);
  letter-spacing: 0.03em;
  transition: background-color 120ms ease;
  /* li のデフォルト余白リセット */
  padding-left: 16px;
  margin-bottom: 0;
}

.c-custom-select__item:last-child {
  border-bottom: none;
}

.c-custom-select__item:hover {
  background-color: color-mix(in srgb, var(--color-main) 6%, transparent);
  color: var(--color-main);
}

/* 選択中 */
.c-custom-select__item.is-selected {
  color: var(--color-main);
  font-weight: var(--fw-bold);
  background-color: color-mix(in srgb, var(--color-main) 4%, transparent);
}

/* アクセシビリティ用ネイティブ select（非表示） */
.c-custom-select__native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

@media (max-width: 768px) {
  .c-custom-select {
    width: 100%;
  }
}


/* ==========================================================================
   3. p-newsDetail__ 系（記事詳細ページ用・新規）
   --------------------------------------------------------------------------
   カテゴリにモディファイアクラスは付けない（現行に無いものは書かない原則）ため、
   p-newsDetail__cat の見た目は p-news__cat（無印）と揃えている
   ========================================================================== */
/* 記事タイトルのみ左寄せ（40字以上が153件中42件あり中央寄せだと多行で読みにくいため）。
   c-heading-1 の下線は ::after を left:50% + translateX(-50%) で中央に置いているので、
   両方を打ち消して左端に揃える。一覧ページの c-heading-1「お知らせ」は中央寄せのまま */
.p-newsDetail__title { text-align: left; }
.p-newsDetail__title::after { left: 0; transform: none; }

.p-newsDetail__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.p-newsDetail__cat {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 3px 10px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  border: 1.5px solid currentColor;
  border-radius: 2px;
  box-sizing: border-box;
  color: var(--color-main);
  background-color: color-mix(in srgb, var(--color-main) 6%, transparent);
}
.p-newsDetail__date {
  color: var(--color-gray-700);
  font-weight: var(--fw-bold);
}
/* 本文の下端とパンくず（.p-breadcrumb の margin-top:80px）の間隔を確保する。
   ラッパー（.l-mainContent／.c-box-content／.m-container）は上下余白を持たず、
   本文最終要素が素の div のときに margin-bottom が付かないため、ここで持たせる。
   値は直値を避け spacing トークンに寄せる（--spacing-2xl＝48px）。core（common.css）は触らない。 */
.p-newsDetail__content {
  line-height: 1.8;
  padding-bottom: var(--spacing-2xl);
}


/* ==========================================================================
   4. 一覧ページ（/corporations/news/）で使うクラス
   --------------------------------------------------------------------------
   一覧ページは 1. の p-news__ 系をそのまま流用する（トップ §4 NEWS と同じ）。
   kdu_news.php が出力するのも p-news__item / __link / __date / __cat / __title で、
   <ul> は p-news__list。専用の p-newsList 系は定義が p-news__ 系と同一で
   どこからも使われなかったため削除した。

   行の余白だけは一覧ページとトップで変える。トップ §4 NEWS は限られた高さに
   5件を収めるため詰まった行間が要るが、一覧ページは全件を読む画面のため広げたい。
   スコープは祖先 .c-box-content で分ける：一覧ページは本文3層ラッパ
   （l-mainContent > c-box-content > m-container）の中にあり、トップページには
   .c-box-content が1件も存在しないため、この指定はトップに届かない。
   components.css の自動アイコン付与（2347行）や下線制御（2358行）も
   同じ .c-box-content を「下層ページの本文領域」を示す祖先として使っている。
   ========================================================================== */
.c-box-content .p-news__link {
  padding: var(--spacing-lg) 0;
}