/* news.css — ニュース一覧・詳細（Figma: News 2278:15662）
   .news-archive  一覧セクション（青バンド + 絞り込みタブ + 3列グリッド）
   .news-card     ニュースカード
   .news-single   詳細（暫定・デザイン未提供） */

/* ページ全体：セクションはFigma準拠で密着（base.cssの48px余白を打ち消し） */
.post-type-archive-ic_news section,
.tax-ic_news_cat section,
.single-ic_news section {
  margin-block: 0;
}

/* --- 一覧セクション -------------------------------------------------------- */
/* 実値: py80 gap64 / 青バンド 1603.5x627 left-178 / 見出し 32px Bold 白 */

.news-archive {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-80) 0;
  background: var(--color-white);
  overflow: hidden;
}

.news-archive__band {
  position: absolute;
  top: .054375rem; /* ⚠ Figma実値 */
  left: -11.125rem;
  width: 100.21875rem;
  height: 39.1875rem;
  pointer-events: none;
}

.news-archive__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  align-items: center;
  width: 100%;
  max-width: var(--layout-max);
}

/* --- カテゴリー絞り込みタブ ------------------------------------------------ */
/* 実値: gap24 / ピル px32 py8 radius40 18.286px lh1.5
         非選択: 白地 + 1px #1561AB / 選択中: #004C98地 + 2px白枠 */

.news-filter {
  display: flex;
  gap: var(--space-24);
  align-items: center;
  width: 100%;
}

.news-filter__item {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-32);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-accent);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  text-decoration: none;
  white-space: nowrap;
}

.news-filter__item--active {
  border: 2px solid var(--color-white);
  background: var(--color-primary-dark);
  color: var(--color-white);
}

/* --- カードグリッド --------------------------------------------------------- */
/* 実値: 3列 380px 段間32px（列間はjustify-betweenで30px） */

.news-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 23.75rem);
  justify-content: space-between;
  row-gap: var(--space-32);
  width: 100%;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--gradient-panel-gray);
  box-shadow: var(--shadow-card-wide);
  color: var(--color-black);
  text-decoration: none;
  overflow: hidden;
}

.news-card__image {
  aspect-ratio: var(--ratio-16-9);
  border-radius: var(--radius);
  background: var(--color-white);
  overflow: hidden;
}

.news-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card__title {
  transition: color 0.2s ease;
}

/* hover: 画像をわずかにズーム + タイトルを青へ
   （.media-card のズームと .news-row / .news-mini の色変化を合わせた形） */
@media (hover: hover) {
  .news-card:hover .news-card__image img {
    transform: scale(1.05);
  }
  .news-card:hover .news-card__title {
    color: var(--color-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-card__image img {
    transition: none;
  }
  .news-card:hover .news-card__image img {
    transform: none;
  }
}

.news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.news-card__meta {
  display: flex;
  gap: var(--space-16);
  align-items: center;
  width: 100%;
}

.news-card__tag {
  display: inline-flex;
  padding: var(--space-4) var(--space-16);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
  white-space: nowrap;
}

.news-card__date {
  color: var(--color-black);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.news-card__arrow {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  background: currentColor;
  mask: url("../../images/icon-arrow-right.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icon-arrow-right.svg") center / contain no-repeat;
}

/* 3行で打ち切り（.news-mini__title と同じ省略記号付きclamp）*/
.news-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
  overflow: hidden;
}

/* 抜粋も3行で打ち切り（省略記号付きclamp。タイトルと同様に高さを揃える） */
.news-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
  overflow: hidden;
}

.news-archive__empty {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h3);
}

/* --- ページ送り（デザイン未提供のためピル型で統一） ------------------------ */

.news-archive__inner .navigation.pagination {
  display: flex;
  justify-content: center;
  width: 100%;
}

.news-archive__inner .nav-links {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.news-archive__inner .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-accent);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* hover: 白地 → accent塗り＋白字（.btn--outline と同トーン）。
   aのみ対象＝現在ページ・省略記号（spanで出力される）は反応させない */
@media (hover: hover) {
  .news-archive__inner a.page-numbers:hover {
    background: var(--color-accent);
    color: var(--color-white);
  }
}

.news-archive__inner .page-numbers.current {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.news-archive__inner .page-numbers.dots {
  border: 0;
}

/* --- 詳細：記事ヘッダー帯（Figma: 2652:28373）------------------------------ */
/* 実値: py40 / グレーグラデ / gap32 / パンくず12.8px Bold / 見出し32px Bold ls10% */

.news-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-40) 0;
  background: var(--gradient-panel-gray-3);
}

.news-head__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
  max-width: var(--layout-max);
}

.news-head__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.news-head__title {
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.news-head__meta {
  display: flex;
  gap: var(--space-16);
  align-items: center;
}

.news-head__date {
  color: var(--color-text-body);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

/* --- パンくず（Figma: 2652:28376）----------------------------------------- */

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--color-text-body);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  list-style: none;
}

.breadcrumb__link {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .breadcrumb__link:hover {
    text-decoration: underline;
  }
}

/* 区切りシェブロン（Figma実値 8x15）。mask + currentColor で文字色に追従 */
.breadcrumb__sep {
  flex-shrink: 0;
  width: .5rem;
  height: .9375rem;
  background: currentColor;
  mask: url("../../images/icon-breadcrumb-arrow.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icon-breadcrumb-arrow.svg") center / contain no-repeat;
}

/* --- 詳細：本体2カラム（Figma: 2652:28390）-------------------------------- */
/* 実値: py40 / 左800px + gap80 + 右320px / 左カラム内 gap40 */

.news-single {
  display: flex;
  justify-content: center;
  padding: var(--space-40) 0;
  background: var(--color-white);
}

.news-single__inner {
  display: grid;
  grid-template-columns: 50rem 20rem;
  gap: var(--space-80);
  width: 100%;
  max-width: var(--layout-max);
}

.news-single__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  min-width: 0;
}

.news-single__thumbnail img {
  display: block;
  width: 100%;
  height: auto; /* 元比率のまま表示（クロップしない） */
}

.news-single__article {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  align-items: center;
  padding-bottom: var(--space-40);
}

.news-single__content {
  width: 100%;
  color: var(--color-text-body);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-article);
  letter-spacing: var(--letter-spacing-widest);
  /* 記事本文には申し込みURL等の長い英数字が入るため、コンテンツ幅で折り返す */
  overflow-wrap: anywhere;
}

.news-single__back {
  flex-shrink: 0;
}

/* --- 関連ニュース（Figma: 2652:28401）------------------------------------- */
/* 実値: 上下2px罫線 rgba(21,97,171,.2) / pt40 gap24 / 見出し18.286px Bold */

.news-related {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  border-top: .125rem solid var(--color-border-accent);
  padding-top: var(--space-40);
}

.news-related__title {
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.news-related__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* 横型カード（Figma: 2426:14767）実値: gap24 / 画像240x149 radius8 / 下線2px */
.news-row {
  display: flex;
  gap: var(--space-24);
  align-items: center;
  border-bottom: .125rem solid var(--color-border-accent);
  padding-bottom: var(--space-24);
  color: var(--color-black);
  text-decoration: none;
}

.news-row__image {
  flex-shrink: 0;
  width: 15rem;
  height: 9.3125rem; /* Figma実値 149px */
  border-radius: var(--radius);
  background: var(--color-white);
  overflow: hidden;
}

.news-row__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-row__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  min-width: 0;
}

.news-row__meta {
  display: flex;
  gap: var(--space-16);
  align-items: center;
}

.news-row__date {
  color: var(--color-text-body);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.news-row__title {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

/* --- サイドバー「最新ニュース一覧」（Figma: 2652:28405）------------------- */
/* 実値: gap32 / 見出し18.286px Bold + 下線2px 青 pb8 / リスト gap24 */

.news-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}

.news-side__title {
  margin: 0;
  border-bottom: .125rem solid var(--color-primary);
  padding-bottom: var(--space-8);
  color: var(--color-text-body);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.news-side__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* 小カード（Figma: 2426:14779）実値: gap16 / 画像118x118 radius4 / 本文gap8 */
.news-mini {
  display: flex;
  gap: var(--space-16);
  align-items: center;
  color: var(--color-text-body);
  text-decoration: none;
}

.news-mini__image {
  flex-shrink: 0;
  width: 7.375rem; /* Figma実値 118px */
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
}

.news-mini__image img {
  display: block;
  width: 100%;
  height: auto; /* 元比率のまま表示（クロップしない） */
}

.news-mini__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.news-mini__meta {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.news-mini__date {
  color: var(--color-text-body);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

/* カード高＝画像118pxに収める（Figmaは省略記号付き）*/
.news-mini__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  overflow: hidden;
}

@media (hover: hover) {
  .news-row:hover .news-row__title,
  .news-mini:hover .news-mini__title {
    color: var(--color-primary);
  }
}

/* --- SP ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .news-archive__inner {
    gap: var(--space-40);
    padding: 0 var(--space-24);
  }
  .news-filter {
    flex-wrap: wrap;
    gap: var(--space-12);
  }
  .news-filter__item {
    padding: var(--space-8) var(--space-16);
    font-size: var(--font-size-h5);
  }
  .news-archive__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-24);
  }
  /* 2カラム（800+320）は画面に入らないため1カラムに積む */
  .news-head__inner,
  .news-single__inner {
    padding: 0 var(--space-24);
  }
  .news-single__inner {
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }
  /* 画像は幅比で縮め、Figma実値のアスペクト比（240:149）を保つ */
  .news-row {
    gap: var(--space-16);
  }
  .news-row__image {
    width: 30%;
    height: auto;
    aspect-ratio: 240 / 149;
  }
  .news-row__title {
    font-size: var(--font-size-h5);
  }
  .news-mini__image {
    width: 5rem;
  }
}