/* =========================
   NEWS用キービジュアルの差し替えだけ
   （レイアウト・高さ・余白は .hj-kv そのまま使う）
   ========================= */
.hj-kv.hj-kv-news {
  background: linear-gradient(
      180deg,
      rgba(8, 38, 44, 0.4),
      rgba(8, 38, 44, 0.3)
    ),
    url("/img/pages/news/kv-hj-news.png") center/cover no-repeat;
}

/* SPのときだけ、元と同じく上を少しずらす */
@media (max-width: 575.98px) {
  .hj-kv.hj-kv-news {
    background: linear-gradient(
        180deg,
        rgba(8, 38, 44, 0.4),
        rgba(8, 38, 44, 0.3)
      ),
      url("/img/pages/news/kv-hj-news.png") center 30% / cover no-repeat;
  }
}

/* ニュース用：ちょい濃いグリーン帯 */
.hj-theme-news-green {
  --hj-bg: #d2ecdf; /* 既存よりワントーン濃いめのグリーン */
  --hj-grad-hi: 1;  /* グラデを少しだけ効かせる */
}

/* ニュース用：右側にでかいパーセンテージ */
.hj-percent {
  flex: 0 0 auto;
  background: #fff7ed;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 1rem;
  padding: .25rem .75rem .4rem;
  text-align: right;
  line-height: 1;
  min-width: 5.2rem;
}
.hj-percent-num {
  font-weight: 800;
  font-size: 1.6rem;
  color: #b45309;
}
.hj-percent-unit {
  font-weight: 700;
  color: #b45309;
  margin-left: .15rem;
}
@media (max-width: 575.98px) {
  .hj-card.d-flex {
    flex-direction: column;
  }
  .hj-percent {
    margin-top: .65rem;
    align-self: flex-start;
  }
}

/* 補足リスト内の数字も少し強めに */
.hj-percent-inline {
  display: inline-block;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: .6rem;
  padding: .05rem .5rem;
  font-weight: 700;
  color: #0f172a;
  margin-left: .25rem;
}
/* ノートボックスの基本（PCは横並びのままでOKならこれで） */
.hj-note-box {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* アイコンは固定サイズにしておく */
.hj-note-ic {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: #fff;
}

/* テキスト側がつぶれないように */
.hj-note-box > div:last-child {
    min-width: 0; /* これ大事 */
}

/* 長いURLを折る */
.hj-note-box a {
    word-break: break-all;
}

/* スマホ時の縦並び */
@media (max-width: 575.98px) {
    .hj-note-box {
        flex-direction: column;
    }
    .hj-note-ic {
        /* 上に来るのでちょっと余白調整してもOK */
        margin-bottom: .25rem;
    }
}

/* ニュース一覧のカードをもう少しはっきりさせる */
.hj-news-card {
  background: #fff;
  border: 1px solid rgba(2, 8, 23, 0.12); /* ← これを少し濃く */
  border-radius: 1.25rem;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.03);
}