.pagenavi-standard {
  background-color: #1f1f1f; }

.row.pagenavi li {
  float: left;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px; }
  .row.pagenavi li a {
    padding: 20px 1em 16px; }
    .row.pagenavi li a:hover span {
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      color: #fff; }
    .row.pagenavi li a span {
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      color: #98aaa9;
      display: inline-block;
      line-height: 1.5;
      border-bottom: 4px solid #1f1f1f; }
    .row.pagenavi li a .new {
      display: inline-block;
      position: relative; }
      .row.pagenavi li a .new:before {
        content: 'NEW';
        width: 25px;
        height: 15px;
        display: inline-block;
        font-size: 10px;
        line-height: 1;
        color: #00a2ff;
        position: absolute;
        top: -8px;
        left: 1px; }

.row.pagenavi li.active a span {
  border-bottom: solid 4px #0f6abc;
  color: #fff; }

@media screen and (max-width: 767px) {
  .row.pagenavi li {
    float: none;
    display: block; }
    .row.pagenavi li a {
      text-align: center;
      padding: 14px 0 10px; }
      .row.pagenavi li a .new:before {
        display: none; }
      .row.pagenavi li a .new:after {
        content: 'NEW';
        width: 25px;
        height: 15px;
        display: inline-block;
        font-size: 10px;
        line-height: 1;
        color: #00a2ff;
        position: absolute;
        top: 6px;
        right: -26px; }
  .row.pagenavi li.active {
    position: relative; }
    .row.pagenavi li.active:before {
      content: '';
      width: 4px;
      height: 46px;
      position: absolute;
      top: 0;
      left: 0; }
    .row.pagenavi li.active a span {
      display: inline-block; }
  .row.pagenavi li.close-btn a {
    border-top: 1px solid #555; }
    .row.pagenavi li.close-btn a span {
      display: block;
      padding-top: 1em;
      padding-bottom: 1em;
      color: #9C9C9C;
      border-radius: 3px;
      border: 1px solid #9C9C9C;
      text-align: center; }
  .row.pagenavi li:last-child {
    margin-bottom: 1em; } }

@media screen and (max-width: 767px) {
  a.icon-navi-arrow {
    position: relative;
    padding-left: 25px; }
    a.icon-navi-arrow:before {
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      content: '';
      background: url("/etc/designs/pscom/ja-jp/pagenavi/images/pagenavi_arrow.svg") no-repeat;
      width: 18px;
      height: 11px;
      position: absolute;
      top: 19px;
      left: 0;
      -webkit-transform: rotateZ(0);
              transform: rotateZ(0); }
  a.icon-navi-arrow.open:before {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg); }
  li.close-btn {
    margin-bottom: 1em; } }

@media screen and (max-width: 767px) {
  .js-pagenavi-body {
    overflow: hidden;
    display: none; } }