/* =================================================================
 * c-news — TOP「ニュースリリース」NEWS セクション（PC）
 * Figma: 2943:126048（NEWS 4555:338535 / 展示会情報 2943:126109）
 *
 * 構成:
 *   .c-news                   白パネル（gap80 / padding 96 70 / 角丸32）
 *     ├─ .c-news__content      サイドバー + 一覧
 *     │   ├─ .c-news__sidebar   見出し + カテゴリ絞り込み + 一覧ボタン
 *     │   └─ .c-news__list      ニュース行（日付 + バッジ + タイトル + ↗）
 *     └─（展示会出展情報＝旧 partial を温存 include）
 *
 * ※ カテゴリ絞り込みはサーバ側リンク（?category=）。is-active はサーバ判定。
 * ※ PC実表示は @media(min-width:1024px) で element-top が縦flex化し order:3（KV直後）。
 * ※ 展示会ブロックは旧 Anima markup（アイコンが約20分割SVG）のため別タスクとして温存。
 *    CSS は top-main.css の `.element-top .exhibition` 系がそのまま効く。
 * ※ TOP では .top-pc（PC表示）専用。SP表示は別 blade（front/top/mobile）が担当。
 * 色・タイポは tokens.css 経由（info バッジ #2473bb のみパレット外で実値）。
 * =================================================================*/

.c-news {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80rem;
  padding: 96rem 70rem;
  background-color: var(--color-white);
  border-radius: 32rem;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  /* element-top の縦flex内で KV(order2)→NEWS(order3)→本文(order4) */
  .c-news {
    order: 3;
    margin-top: -42rem;
  }
}

.c-news__content {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 72rem;
}

/* ---------- サイドバー ---------- */
.c-news__sidebar {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24rem;
  flex: 0 0 auto;
}

.c-news__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-news__label {
  margin-top: -2rem;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-key);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 24rem;
}

.c-news__title-en {
  font-family: var(--font-en-condensed);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: var(--fs-h1-pc);           /* 56px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 84rem;
}

.c-news__rule {
  width: 60rem;
  height: 2rem;
  background-color: var(--color-key);
}

.c-news__nav {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rem;
  padding-bottom: 24rem;
}

.c-news__cat-link {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: var(--fs-body-sm);         /* 14px */
  letter-spacing: 0.56rem;
  line-height: 25.2rem;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--duration-base) var(--easing-default);
}

.c-news__cat-link:hover,
.c-news__cat-link--active {
  color: var(--color-key);
}

/* 一覧ボタン（pill / border:key） */
.c-news__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  height: 56rem;
  padding: 16rem 20rem 16rem 40rem;
  background-color: var(--color-white);
  border: 2rem solid var(--color-key);
  border-radius: 32rem;
  text-decoration: none;
  box-sizing: border-box;
  transition:
    background-color var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default);
}

.c-news__more-text {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-heading);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--easing-default);
}

.c-news__more-arrow {
  flex-shrink: 0;
  width: 14rem;                          /* Figma: Primary_link btn_white の LinkIcon 14px */
  height: 14rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
  transition: background-color var(--duration-fast) var(--easing-default);
}

.c-news__more:hover { background-color: var(--color-key); }
.c-news__more:hover .c-news__more-text { color: var(--color-white); }
.c-news__more:hover .c-news__more-arrow { background-color: var(--color-white); }

/* ---------- ニュース一覧 ---------- */
.c-news__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.c-news__item {
  display: flex;
  align-items: center;
  gap: 24rem;
  width: 100%;
  padding: 24rem 16rem;
  border-bottom: 1px solid var(--color-neutral-04);
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.c-news__item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  flex: 1;
  min-width: 0;
}

.c-news__item-meta {
  display: inline-flex;
  align-items: center;
  gap: 16rem;
}

.c-news__item-date {
  font-family: var(--font-jp);
  font-weight: 600;
  color: var(--color-neutral-02);
  font-size: var(--fs-body-sm);         /* 14px */
  letter-spacing: -0.14rem;
  line-height: 25.2rem;
  white-space: nowrap;
}

.c-news__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24rem;
  padding: 3rem 12rem;
  border-radius: 12rem;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  font-size: var(--fs-body-xs);         /* 12px */
  letter-spacing: 0.48rem;
  line-height: 18rem;
  white-space: nowrap;
  box-sizing: border-box;
}

.c-news__badge--alert { background-color: var(--color-alert); }
.c-news__badge--news  { background-color: var(--color-orange-01); }
.c-news__badge--case  { background-color: var(--color-secondary); }
.c-news__badge--info  { background-color: #2473bb; } /* 製品情報の青（パレット外） */

.c-news__item-title {
  align-self: flex-start;             /* テキスト幅に揃え hover下線がテキスト下に収まる */
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-body);
  line-height: 28.8rem;
  /* 指示 5693:90577 / 90669: ニュースタイトルは hover で左→右へ 1px 下線スライドイン (0.3s ease-in-out) */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.3s ease-in-out;
}
.c-news__item:hover .c-news__item-title { background-size: 100% 1px; }

.c-news__item-arrow {
  flex-shrink: 0;
  width: 14rem;
  height: 14rem;
}

/* =================================================================
 * SP（TOP モバイル）— .SP ツリー専用オーバーライド
 *   front/top/mobile（news-exhibition partial）に c-news を @include した際の SP。
 *   Figma SP: 1200:8377（見出し→横スクロールタブ→縦リスト→一覧ボタン→展示会）。
 *   PCの「サイドバー｜一覧」横並びを、サイドバーを display:contents で dissolve し
 *   見出し/ナビ/一覧ボタンを content 直下へ order で縦に積み替える（c-about 方式）。
 *   ※ .SP スコープで PCツリー(.top-pc)に影響させない。媒体クエリ不要（表示切替に委ねる）。
 * =================================================================*/

/* 白パネル：KV のラウンド下端へ 32px 重ねる（旧 .SP .news 踏襲） */
.SP .c-news {
  gap: 48rem;
  padding: 40rem 16rem 48rem;
  position: relative;
  top: -32rem;
  margin-bottom: -32rem;
  z-index: 1;
}

.SP .c-news__content {
  flex-direction: column;
  align-items: center;
  gap: 20rem;
  max-width: 358rem;
  margin: 0 auto;
}

/* サイドバーを dissolve（見出し/ナビ/一覧ボタンを content 直下の flex 項目に） */
.SP .c-news__sidebar {
  display: contents;
}

/* 見出し（中央寄せ・縦） */
.SP .c-news__heading {
  order: 1;
  align-items: center;
  gap: 6rem;
}

.SP .c-news__label {
  margin-top: 0;
  font-size: 12rem;
  letter-spacing: 0.48rem;
  line-height: 12rem;
}

.SP .c-news__title-en {
  font-size: 34rem;
  letter-spacing: 1.36rem;
  line-height: 34rem;
}

.SP .c-news__rule {
  margin-top: 2rem;   /* NEWS との間隔を 8px 相当に */
}

/* カテゴリタブ：横スクロールの pill 群 */
.SP .c-news__nav {
  order: 2;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8rem;
  padding-bottom: 0;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.SP .c-news__nav::-webkit-scrollbar { display: none; }

.SP .c-news__cat-link {
  flex: 0 0 auto;
  width: 110rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8rem;
  font-size: 12rem;
  letter-spacing: 0.48rem;
  line-height: normal;
  background-color: var(--color-white);
  border: 1px solid var(--color-neutral-04);
  border-radius: 32rem;
  white-space: nowrap;
}

.SP .c-news__cat-link--active {
  background-color: var(--color-key);
  border-color: var(--color-key);
  color: var(--color-white);
}

/* ニュース一覧（縦・上辺にも罫線） */
.SP .c-news__list {
  order: 3;
  width: 100%;
  border-top: 1px solid var(--color-neutral-04);
}

/* SP は上位3件のみ表示（4件目以降は「ニュースリリース一覧」へ誘導）。
   件数を変えたい場合は n+4 の数値を変更（4件なら n+5 / 5件なら本ルール削除）。
   PC は5件のまま（コントローラの limit(5) は据え置き）。 */
.SP .c-news__item:nth-child(n+4) {
  display: none;
}

.SP .c-news__item {
  gap: 8rem;
  padding: 16rem 8rem;
}

.SP .c-news__item-body {
  gap: 8rem;
}

.SP .c-news__item-date {
  font-size: 14rem;
  letter-spacing: -0.14rem;
  line-height: 25.2rem;
  order: 2;
}

/* Figma SP 4769:310160: badge→date 順 */
.SP .c-news__badge {
  order: 1;
  height: 22rem;
  padding: 2rem 12rem;
  font-size: 11rem;
  letter-spacing: 0.44rem;
  line-height: 1.5;
}

.SP .c-news__item-title {
  font-size: 16rem;
  letter-spacing: 0.64rem;
  line-height: 28.8rem;
}

.SP .c-news__item-arrow {
  width: 14rem;                          /* Figma: LinkIcon 14px に統一（PC/他のSPリンク矢印と揃える） */
  height: 14rem;
}

/* 一覧ボタン（フル幅 pill・最後尾） */
.SP .c-news__more {
  order: 4;
  height: auto;
  padding: 16rem 20rem 16rem 40rem;
}

.SP .c-news__more-text {
  font-size: 14rem;
  letter-spacing: 0.56rem;
}