/* news.css — ニュース項目・Information パネル・年別アイテム
   Figma: 項目 1606:50678 / パネル 1944:55601 / 年別 1944:55675 */

/* ニュース項目 --------------------------------------------------------------- */
/* 上下の線は高さに含まれないため padding から線幅を引く（106px に一致）*/
.news-item {
  --news-item-thumb-height: calc(74 / 16 * 1rem);
  --news-item-thumb-ratio: 119.732 / 74;
  --news-item-dot-size: var(--space-12);
  --news-item-noimage-logo-size: 56%; /* アイキャッチ未登録時のロゴ高さ（枠に対する比率）※ Figma 未定義 */

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
  padding: calc(var(--space-16) - var(--border-width)) var(--space-16);
  border-top: var(--border-width) solid var(--color-black);
  border-bottom: var(--border-width) solid var(--color-black);
  color: var(--color-black);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-hover);
}

/* ホバー：行を薄グレー、サムネイルをズーム、矢印を黒反転 */
.news-item:hover,
.news-item:focus-visible {
  background: var(--color-gray-light);
}

.news-item:hover .news-item__thumb img,
.news-item:focus-visible .news-item__thumb img {
  transform: scale(var(--hover-zoom));
}

.news-item:hover .news-item__icon img + img,
.news-item:focus-visible .news-item__icon img + img {
  opacity: 1;
}

.news-item__main {
  display: flex;
  align-items: center;
  gap: var(--space-40);
  min-width: 0;
}

.news-item__thumb {
  flex-shrink: 0;
  height: var(--news-item-thumb-height);
  aspect-ratio: var(--news-item-thumb-ratio);
  border: var(--border-width-thin) solid var(--color-black);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.news-item__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-hover);
}

/* アイキャッチ未登録：白地にロゴマーク ※ Figma 未定義（パレット内の色で作成）*/
.news-item__thumb--noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
}

.news-item__thumb--noimage img {
  width: auto;
  height: var(--news-item-noimage-logo-size);
  object-fit: contain;
}

.news-item__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.news-item__category {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin: 0;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

/* カテゴリーの丸（色はカテゴリーごとに変えられるよう CSS で描く）*/
.news-item__dot,
.archive-item__dot {
  flex-shrink: 0;
  width: var(--news-item-dot-size, var(--space-12));
  height: var(--news-item-dot-size, var(--space-12));
  border-radius: var(--radius-full);
  background: var(--color-genki-port-40848e);
}

.news-item__title {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  word-break: break-word;
}

.news-item__date {
  margin: 0;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
}

.news-item__icon {
  position: relative;
  flex-shrink: 0;
  width: var(--space-40);
  height: var(--space-40);
}

.news-item__icon img {
  position: absolute;
  inset: 0;
  transition: opacity var(--duration-fast) var(--ease-hover);
}

.news-item__icon img + img {
  opacity: 0;
}

/* 縦に続けて並べるとき：2件目以降は上線を出さない（前の項目の下線と重なって二重に見えるため）。
   線幅ぶんを padding に戻して、1件の高さ（106px）は変えない */
.news-panel__item + .news-panel__item > .news-item,
.news-list__items > li + li > .news-item,
.news-ranking__list > li + li > .news-item {
  padding-top: var(--space-16);
  border-top: 0;
}

/* Information パネル ---------------------------------------------------------- */
.news-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-40) var(--space-56);
  border-radius: var(--radius-lg);
  background: var(--color-gray-light);
  color: var(--color-black);
}

.news-panel__title {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.news-panel__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-panel__more {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* 年別アイテム（アーカイブ）Figma: 1944:55675 --------------------------------- */
.archive-item {
  --archive-item-width: 17.5rem; /* 280px */

  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  max-width: var(--archive-item-width);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-10);
  color: var(--color-black);
  text-decoration: none;
}

.archive-item:hover .archive-item__icon,
.archive-item:focus-visible .archive-item__icon {
  transform: translateX(var(--hover-shift));
}

.archive-item__label {
  flex: 1 0 0;
  min-width: 0;
  word-break: break-word;
}

.archive-item__icon {
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-hover);
  width: calc(6.13649 / 16 * 1rem);
  height: calc(10.6067 / 16 * 1rem);
}

/* コンパクト版（お知らせ詳細のサイドバー）Figma: 1978:15894 --------------------- */
.news-item--compact {
  gap: var(--space-16);
  height: var(--news-item-thumb-height); /* Figma: 行の高さは 74 固定。2行タイトルは上下にはみ出す */
  padding: 0;
  border: 0;
}

.news-item--compact .news-item__main {
  gap: var(--space-16);
  width: 100%;
}

.news-item--compact .news-item__body {
  flex: 1 0 0;
}

.news-item--compact .news-item__icon {
  display: none;
}

.news-item--compact .news-item__title {
  line-height: var(--line-height-tight);
}

/* サイドバーのブロック（見出し＋線＋一覧）Figma: 1944:54551 */
.side-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  width: 100%;
  color: var(--color-black);
}

.side-block__title {
  width: 100%;
  margin: 0;
  padding-bottom: var(--space-24);
  border-bottom: var(--border-width) solid var(--color-black);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.side-block__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-block__list > li {
  display: flex;
  width: 100%;
}

.side-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  width: 100%;
}

/* 1200px 以下：サイドバーのブロックはメイン列の下に並ぶ */
@media (max-width: 1200px) {
  .side-blocks {
    order: 3;
    padding-bottom: var(--space-80);
  }
}

/* 767px 以下（SP）：横並びを縦1列に。⚠ SPデザイン未確定のため仮レイアウト */
@media (max-width: 767px) {
  .news-panel {
    padding: var(--space-24);
  }

  /* 本文の幅を確保するため、サムネイルを小さくし矢印アイコンは隠す（行全体がリンク）*/
  .news-item {
    --news-item-thumb-height: var(--space-56);

    gap: var(--space-16);
    padding-inline: 0;
  }

  .news-item__main {
    gap: var(--space-16);
  }

  .news-item__icon {
    display: none;
  }
}