@charset "utf-8";
/* =========================================================
  docs-list layout(お知らせ一覧)
========================================================= */
.contentGpCategory .docs ul {
  margin: 0 0 40px;
  border-top: 1px solid var(--mono-color-5);
}

.contentGpCategory .docs li {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
  border-bottom: 1px solid var(--mono-color-5);
}

.contentGpCategory .docs a {
  display: block;
  width: 100%;
  padding: 24px 0;
  color: #333;
  text-decoration: none;
}

.contentGpCategory .docs a:hover {
  background-color: var(--sub-color-1);
}

.contentGpCategory .entry {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0 20px;
}

.contentGpCategory .update_date {
  margin: 0 24px 0 0;
  color: #808080;
}

.contentGpCategory .docs .category {
  display: inline-block;
  margin: 0 24px 0 0;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
}

.contentGpCategory .docs .category span {
  display: inline-block;
  width: 140px;
  height: 24px;
}

.kubun-news {
    background-color: var(--main-color-1);
}

.kubun-event {
    background-color: var(--accent-color-1);
}

.kubun-topics {
    background-color: var(--accent-color-2);
}

.title_link a {
    color: var(--mono-color-1);
    text-decoration: none;
}

.title_link a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@media only screen and (max-width: 559px) {

  .contentGpCategory .docs {
        margin: 30px 0 90px;
    }

    .contentGpCategory .docs ul {
        margin: 30px 0;
    }

    .contentGpCategory .docs li {
        gap: 10px;
    }

    .category span {
        width: 90px;
    }

    .title_link {
        flex-basis: 100%;
    }
}

/*===============================
 ページネーション 
 ===============================*/
.separator {
    opacity: 0;
}

.pagination a {
    text-decoration: none;
}

.pagination a:visited {
    color: #212529;
}

.pagination .current {
    position: relative;
    font-weight: normal;
}

.pagination .current:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 24px;
    border-bottom: 3px solid var(--main-color-1);
}