/* ================================
   Headline List Component
================================ */

.headlineList {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-l);
  padding: var(--L);
}

@media screen and (max-width: 767px) {
  .headlineList {
    padding: var(--M);
  }
}

/* タイトル */
.headlineList__title {
  font-size: var(--font-head-m);
  font-weight: 700;
}

/* リード文 */
.headlineList__lead {
  margin-top: var(--XS);
  font-size: var(--font-head-xs);
  font-weight: 700;
}

/* ===== ポイント ===== */
.headlineList__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--S) var(--L);
  margin-top: var(--L);
}

@media screen and (max-width: 767px) {
  .headlineList__items {
    grid-template-columns: 1fr;
    gap: var(--L);
  }
}

.headlineList__item {
  display: flex;
  align-items: stretch;
}

/* アイコン */
.headlineList__icon {
  flex-shrink: 0;
  margin-right: var(--XS);
  display: flex;
  align-items: center;
}

.headlineList__icon img {
  display: block;
}

/* 本文ブロック */
.headlineList__body {
  padding-left: var(--XS);
  border-left: 1px solid var(--color-separate-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* メインテキスト */
.headlineList__text {
  font-size: var(--font-m);
  font-weight: 700;
}

/* 各ポイント内 注釈 */
.headlineList__sub {
  margin-top: var(--X3S);
  font-size: var(--font-xxs);
  color: var(--color-text-secondary);
}

/* ===== 下部注釈 ===== */
.headlineList__notes {
  margin-top: var(--L);
}

.headlineList__notes li {
  font-size: var(--font-xs);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ================================
   headlineList : single item
   リストアイテムが一つだけの時は1カラム表示にする
================================ */

.headlineList--single .headlineList__items {
  grid-template-columns: 1fr;
}

/* ================================
   headlineList : under line
   リストアイテムでline = true　の時に線を引く
================================ */
.headlineList__text.is-underlined {
  text-decoration: underline;
}