:root {
  /* main color */
  --color--main: #6F493F;

  /* btn text color / new text color */
  --color--btn-text: #fff;

  /* menu text color */
  --color--menu-text: #fff;
}

/* pager */
.block--pager .pager__item--newer a,
.block--pager .pager__item--newer span,
.block--pager .pager__item--older a,
.block--pager .pager__item--older span,
.swiper-initialized .swiper-button-prev,
.swiper-initialized .swiper-button-next {
  background: var(--color--main);
  border-color: var(--color--btn-text);
}

/* new icon */
.list--information > li.new::before,
.list--information .list--item.new::before,
.list--thumbnail > li.new a::before,
.list--thumbnail .list--item.new a::before,
.list--blog > li.new a::before,
.list--blog .list--item.new a::before,
.section--detail.new .category::after,
.page--home #section--event .list--event li.new::before,
.page--home #area--fc section a.new::before{
  background: var(--color--main);
  color: var(--color--btn-text);
}

/* menu bar / menu */
#wrap #header::after,
#header .drawer,
#header .drawer .g-nav .g-nav--menu ul:not(.list--login) li a > div {
  background: var(--color--main);
}

#header #drawer__btn .drawer__btn__item,
#header .drawer .g-nav .g-nav--menu ul:not(.list--login) li#menu__latest::before{
  background: var(--color--menu-text);
}

#header .block--artist-name svg{
  fill: var(--color--menu-text);
}

#header .block--sns .list--sns li a i,
#header .list--login li a,
#header .drawer .g-nav .g-nav--menu ul:not(.list--login) li a{
  color: var(--color--menu-text);
}

#header .drawer .g-nav .g-nav--menu ul:not(.list--login) li a::after{
  background-image: radial-gradient(circle, var(--color--menu-text) 2px, transparent 0px);
}

/* PC new icon */
@media (min-width: 961px) {
  .section--list .list--information li.new .tit::after {
    background: var(--color--main);
    color: var(--color--btn-text);
  }
}

/* hover animation */
@media (hover: hover) {
  #header .drawer .list--login a:hover {
    background: var(--color--btn-text);
    color: var(--color--main);
  }
  .page--home #section--heroimg .block--login .list--login li a:hover{
    background: var(--color--main);
    color: var(--color--btn-text);
  }
  .list--login li a:hover {
    background: var(--color--btn-text);
    color: var(--color--main);
  }
}

/* SP new icon */
@media (max-width: 960px) {
  .list--information > li.new .category::before,
  .list--information .list--item.new .category::before {
    background: var(--color--main);
  }
  .page--home #section--event .list--event li.new .tit::after {
    background: var(--color--main);
    color: var(--color--btn-text);
  }
}