/*
    右ナビ AIレコメンド枠
    ------------------------------------------------
    follow-legacy: no-token（既存サイトにCSS変数の基盤が無いため、
    グローバルな :root を生やさずローカルカスタムプロパティで持つ）
================================*/
.m_sideNavRecommend {
  --_ttlBorder: #9e2730;
  --_groupColor: #707070;
  --_itemLine: #efefef;
  --_groupRule: #ccc;
  --_text: #333;
  --_meta: #666;
  --_date: #b85c00;
  --_bkColor: #F5F5F5;
}

/* 既存の .sidebar-relatedTag + .sidebar-relatedTag と同じ 14px。
   Block 外 margin を持たないよう隣接セレクタで表現する */
.m_parsonalitySideNavs + .m_sideNavRecommend,
.sidebar-relatedTag + .m_sideNavRecommend {
  margin-top: 14px;
}

.m_sideNavRecommend__ttl {
  display: flex;
  align-items: center;
  height: 40px;
  margin-bottom: 5px;
  padding-left: 8px;
  border-left: 9px solid var(--_ttlBorder);
  font-weight: bold;
  letter-spacing: -1px;
  color: inherit;
  font-size: 14px;
  background: var(--_bkColor);
}

.m_sideNavRecommend__group + .m_sideNavRecommend__group {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--_groupRule);
}

.m_sideNavRecommend__groupTtl {
  color: var(--_groupColor);
  line-height: 1.5;
  font-weight: bold;
  font-size: 16px;
}

/* design-locked: 枠色は既存 sideNav.css の値。ただし文字色として使うため
   #04980b(3.82:1) は WCAG AA 4.5:1 に届かず #047d09(5.33:1) に置換している。丸め禁止 */
.m_sideNavRecommend__group--haken { --_groupColor: #9e2730; }
.m_sideNavRecommend__group--bup { --_groupColor: #164A84; }
.m_sideNavRecommend__group--douga { --_groupColor: #e40056; }
.m_sideNavRecommend__group--it { --_groupColor: #04980b; }
.m_sideNavRecommend__group--other { --_groupColor: #E5002D; }
.m_sideNavRecommend__group--plan { --_groupColor: #9E2730; }

.m_sideNavRecommend__list {
  margin-top: 5px;
  list-style: none;
}

.m_sideNavRecommend__item {
  padding: 7px 0;
  line-height: 1.4;
  font-weight: bold;
}

.m_sideNavRecommend__item + .m_sideNavRecommend__item {
  border-top: 1px solid var(--_itemLine);
}

.m_sideNavRecommend__link {
  display: block;
  transition: opacity .3s;
}

@media (prefers-reduced-motion: reduce) {
  .m_sideNavRecommend__link {
    transition: none;
  }
}

.m_sideNavRecommend__link:hover {
  opacity: .6;
  color: var(--_text);
  text-decoration: none;
}

/* 2行で打ち切るのは既存 .m_sideNav__theme__ttl と同じ */
.m_sideNavRecommend__itemTtl {
  display: -webkit-box;
  overflow: hidden;
  color: var(--_text);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.m_sideNavRecommend__meta {
  margin-top: 3px;
  color: var(--_meta);
  font-size: 11px;
}

.m_sideNavRecommend__date {
  margin-top: 3px;
  color: var(--_date);
  font-size: 11px;
}