/* --------------------------------------------------
Dark Theme
-------------------------------------------------- */

/* --------------------------------------------------
色設定
-------------------------------------------------- */

body {
  /* 背景色 */
  --c-color-bg: #000000;
  /* 文字色 */
  --c-color-text: #ffffff;
  /* アクセントカラー */
  --c-color-accent: #880000;
  /* ヘッダー背景 */
  --c-color-header-bg: #666666;

  /* ボタン背景 */
  --c-color-btn-bg: var(--c-color-accent);
  /* ボタン文字色 */
  --c-color-btn-txt: var(--c-color-bg);
  /* 公式サイトボタン背景 */
  --c-color-official-btn-bg: var(--c-color-btn-bg);

  /* サイドバー見出し文字色 */
  --c-color-sidebar-hdg: var(--c-color-accent);
  /* SPカテゴリ下のライン */
  --c-color-sp-category-border: var(--c-color-accent);
  /* SPカテゴリカレント時の下のライン */
  --c-color-sp-category-active-border: var(--c-color-accent);
  /* SPカテゴリカレント時の文字色 */
  --c-color-sp-category-active-text: var(--c-color-accent);

  /* 記事と記事の間の境界線 */
  --c-color-article-border: var(--c-color-accent);
  /* 記事タイトル */
  --c-color-article-ttl: var(--c-color-accent);

  /* 引用の左ライン */
  --c-color-blockquote-line: #666666;
  /* 記事中の境界線 */
  --c-color-newstext-line: #666666;
  /* 本文内のリンク */
  --c-color-newstext-a: var(--c-color-accent);

  /* フッター上のライン */
  --c-color-footer-border: var(--c-color-accent);
}



/* --------------------------------------------------
全体 / 共通要素
-------------------------------------------------- */

body {
  background: var(--c-color-bg);
  color: var(--c-color-text);
}

.c-btn a {
  background: var(--c-color-btn-bg);
  color: var(--c-color-btn-txt);
}



/* --------------------------------------------------
ヘッダー
-------------------------------------------------- */

.header {
  background: var(--c-color-header-bg);
}



/* --------------------------------------------------
サイドバー
-------------------------------------------------- */

.sidebar__hdg {
  color: var(--c-color-sidebar-hdg);
}

@media screen and (max-width: 767px) {
  .sidebar__list {
    border-bottom-color: var(--c-color-sp-category-border);
  }
}

/* is-active */
@media screen and (max-width: 767px) {
  .sidebar__list li.is-active {
    border-color: var(--c-color-sp-category-active-border);
  }
  .sidebar__list li.is-active a {
    color: var(--c-color-sp-category-active-text);
  }
}



/* --------------------------------------------------
記事
-------------------------------------------------- */

.article:nth-of-type(n+2) {
  border-top-color: var(--c-color-article-border);
}

.article__ttl a {
  color: var(--c-color-article-ttl);
}



/* --------------------------------------------------
本文
-------------------------------------------------- */

.newsText blockquote {
  border-left-color: var(--c-color-blockquote-line);
}

.newsText hr {
  background-color: var(--c-color-newstext-line);
}

.newsText a {
  color: var(--c-color-newstext-a);
}



/* --------------------------------------------------
フッター
-------------------------------------------------- */

#footer {
  border-top-color: var(--c-color-footer-border);
}

.footer__btn a {
  background: var(--c-color-official-btn-bg);
}



/* --------------------------------------------------
ページャー
-------------------------------------------------- */

.pager__number {
  border-color: var(--c-color-btn-bg);
  color: var(--c-color-btn-bg);
}
.pager__number.is-current {
  background: var(--c-color-btn-bg);
  color: var(--c-color-btn-txt);
}

.pager__dots {
  color: var(--c-color-btn-bg);
}

.pager__arw {
  color: var(--c-color-btn-bg);
}



/* --------------------------------------------------
ページトップボタン
-------------------------------------------------- */

#pagetop {
  background: var(--c-color-btn-bg);
}
#pagetop::before,
#pagetop::after {
  background: var(--c-color-btn-txt);
}



/* --------------------------------------------------
Not Found
-------------------------------------------------- */

.nf__ttl {
  color: var(--c-color-article-ttl);
}