/*========================================
  Layout
========================================*/
body, .main {
  background: #000;
  color: #fff;
}

a, button, *[class*="c-btn"],
input, button, textarea, select {
  color: #fff;
}

.header {
  background: linear-gradient(rgba(0, 0, 0, 0), black);
}

.gnav li svg {
  fill: #ccc;
}
.gnav li a {
  color: #ccc;
}
.gnav li a:hover, .gnav li a:focus {
  color: #fff;
  background: #333;
}
.gnav li a:hover svg, .gnav li a:focus svg {
  fill: #fff;
}

.sort a {
  background: #444;
  border-color: #444;
}
.sort a:focus {
  border-color: #dc0021;
}
.sort-select a {
  background: #dc0021;
  color: #fff;
  border-color: #dc0021;
}

/* overview
------------------------------------------------------------ */
.overview-video:before {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
.overview-video:after {
  background: linear-gradient(to right, black, rgba(0, 0, 0, 0));
}
.overview-label {
  color: #dc0021;
}
.overview-data, .overview-info {
  color: #ccc;
}

/* items
------------------------------------------------------------ */
.itemcard:focus a {
  background: #dc0021;
}

ol.itemlist-wrapper li:before {
  background: #dc0021;
}

.taglist li:focus:before {
  outline-color: #dc0021;
}
.taglist-select {
  background: #dc0021;
  color: #fff;
}

/* -----  loader ----- */
.loading {
  background: rgba(0, 0, 0, 0.6);
}

.loader,
.loader:before,
.loader:after {
  color: #dc0021;
}

/* -----  pages ----- */
.pages a {
  background: #444;
  border-color: #444;
}
.pages a:hover, .pages a:focus {
  border-color: #dc0021;
}
.pages a-prev a {
  border-top-color: #ccc;
  border-left-color: #ccc;
}
.pages a-next a {
  border-top-color: #ccc;
  border-right-color: #ccc;
}

/*========================================
  Toppage
========================================*/
.toppage .topsection {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5vh, #000 calc(100% - 5vh));
  mask-image: linear-gradient(to bottom, transparent, #000 5vh, #000 calc(100% - 5vh));
}

.itemcard:focus .itemcard-ttl {
  background: #dc0021;
}

.toppage .itemcard:focus-ttl {
  background: none;
}
.toppage .itemcard:focus:before {
  border-color: #dc0021;
}

/*========================================
  detail
========================================*/
.btnarea a {
  /*background-color: rgba($clr-main,0.6);*/
  background: rgba(150, 150, 150, 0.6);
}
.btnarea a:hover, .btnarea a:focus {
  background-color: #dc0021;
  color: #fff;
}

.btnarea-play svg {
  fill: #fff;
}