@charset "UTF-8";

/************************************
** front-page-news.css
** フロントページ NEWSティッカー用スタイル
**
** 役割
** - NEWSティッカー
** - ラベル
** - ホバー停止
** - 流れるアニメーション
************************************/

/* ========================================
   1. NEWS ticker
======================================== */
.front-news{
  display: none !important;
}

.front-news-ticker{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  height: 48px;
  background: rgba(20, 16, 14, 1);
  overflow: hidden;
}

.front-news-ticker__label{
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  color: #d4aa3a;
  font-size: 12px;
  letter-spacing: 0.22em;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(20, 16, 14, 0.96);
  z-index: 2;
}

.front-news-ticker__track{
  position: absolute;
  left: 120px;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.front-news-ticker__move{
  position: absolute;
  top: 0;
  left: 0;
  height: 48px;
  line-height: 48px;
  white-space: nowrap;
  display: inline-block;
  width: max-content;
  animation: frontNewsTickerMove 90s linear infinite;
}

.front-news-ticker:hover .front-news-ticker__move{
  animation-play-state: paused;
}

.front-news-ticker__item{
  display: inline-block;
  height: 48px;
  line-height: 48px;
  padding: 0 42px 0 28px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  vertical-align: top;
  white-space: nowrap;
  font-weight: 900;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
}

.front-news-ticker__item:hover{
  opacity: 1;
}

.front-news-ticker__item:hover .front-news-ticker__title,
.front-news-ticker__item:hover .front-news-ticker__cat{
  color: #d4aa3a;
  border-color: #d4aa3a;
}

.front-news-ticker__date{
  display: inline;
  margin-right: 8px;
  color: rgba(160,160,160,0.58);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.front-news-ticker__cat{
  display: inline-block;
  margin-right: 5px;
  padding: 0 8px;
  height: 18px;
  margin-bottom: 2px;
  line-height: 18px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.78);
  background-color: rgba(80,80,80,0.3);
  vertical-align: middle;
  transform: translateY(-1px);
  box-sizing: border-box;
}

.front-news-ticker__title{
  display: inline;
  color: #fff;
}


/* ========================================
   2. アニメーション
======================================== */
@keyframes frontNewsTickerMove{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}