@charset "UTF-8";
/**===============================================================
   [components] app-news-feed
==================================================================
   @description
       ヘッダーのお知らせ・通知フィード（ベル + ドロップダウン）。
       common.css の news-feed ブロックからV2へ移植したもの。
       旧レイアウトが廃止されたら common.css 側は削除してよい。

       クラス名は public/js/components/feed/user-feed.js と結合して
       いるため（動的生成・付け外し）、.app-* へは改名しない。
       Bootstrap標準クラス(.btn-secondary 等)の上書きは
       overrides/bootstrap.css 側にある。
=================================================================*/

/* PCは .navbar-nav 配下、SPはその外にあるため、それぞれ既存の詳細度に合わせて指定する */
.navbar-nav > li > a.nav-news-feed-button,
#nav-news-feed-button-sp.nav-news-feed-button {
  line-height: 1;
}

.news-feed-contents {
  z-index: 9000;
}

.news-feed-contents .news-feed-inner {
  min-width: 380px;
  overflow-y: auto;
  max-height: 540px;
}

.news-feed-contents .global-feed-list li.read {
  font-weight: 400;
}

.news-feed-contents .news-feed-list a:hover,
.news-feed-contents .latest-video-news-list a:hover {
  background-color: var(--bs-gray-100);
}

/* 未読ドット。JS(user-feed.js)が active / important を付け外しする */
.feed-dot-badge {
  position: relative;
  z-index: 100;
}

/* 旧レイアウトは top:14px/right:10px だったが、V2はヘッダーが60px・
   ベルのアンカーが小さいためアイコン中央に被る。アイコン右上に載せ直す。 */
.feed-dot-badge::before {
  display: none;
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 0.59rem;
  height: 0.59rem;
  border-radius: 50%;
  background-color: #ffc107d6;
  z-index: 101;
}

.feed-dot-badge.important::before {
  background-color: var(--bs-danger);
}

.feed-dot-badge::after {
  display: none !important;
}

.feed-dot-badge.active::before {
  display: inline-block !important;
}

/* user-feed.js が生成するラベル。
   overrides/bootstrap.css の .badge.app-news-badge（お知らせページ用・後読み）に
   同詳細度で負けないよう .badge を挟んで詳細度を上げ、フィード内はDS配色を維持する */
.news-feed-contents .badge.app-news-badge {
  background-color: var(--bs-gray-600);
  color: #fff;
}

.news-feed-contents .badge.app-news-badge.important {
  background-color: var(--bs-danger);
  color: #fff;
}

.news-feed-contents .badge.app-news-badge.news,
.news-feed-contents .badge.app-news-badge.seminar,
.news-feed-contents .badge.app-news-badge.update,
.news-feed-contents .badge.app-news-badge.columns,
.news-feed-contents .badge.app-news-badge.campaign {
  background-color: #e8f4f8;
  color: var(--bs-info);
}

.news-feed-contents .badge.app-news-badge.feature {
  background-color: #fcebed;
  color: var(--bs-danger);
}

.news-feed-contents .badge.app-news-badge.system {
  background-color: var(--bs-gray-100);
  color: var(--bs-text-secondary);
}

@media (max-width: 991.98px) {
  .feed-dot-badge::before {
    top: 0.5rem;
    right: 0.65rem;
  }
}

@media (max-width: 576px) {
  .feed-dot-badge::before {
    top: 0.57rem;
    right: 0.67rem;
  }

  .news-feed-contents.dropdown-menu {
    position: fixed;
    right: auto;
    top: var(--app-header-height);
    left: 0;
    width: 100%;
  }

  /* 上の position:fixed + width:100% と併せて、内側の min-width:380px を解除する。
     解除しないと 380px 未満の画面(320〜375px)で内側が縮まず、固定配置ゆえ
     スクロールもできないため右端が欠ける。 */
  .news-feed-contents .news-feed-inner {
    min-width: 0;
  }
}

@media (max-width: 767.98px) {
  .news-feed-contents .news-feed-inner {
    max-height: 460px;
  }
}