@charset "utf-8";

:root {
  --font-jp: "Zen Kaku Gothic New", sans-serif;
  --font-en: "Jost", sans-serif;
  --blue: #124A7B;
  --beige: #F4ECD9;
  --white: #fff;
  --black: #000;
}

.p-news__head {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(1.125rem, 0.882rem + 1.036vw, 2.125rem);
  margin-bottom: clamp(0.875rem, 0.602rem + 1.165vw, 2rem);
}

.c-news__category.p-news-category {
  border: var(--blue) 1px solid;
  color: var(--blue);
  background-color: var(--white);
  font-weight: 500;
}

.news-item {
  margin-bottom: clamp(2.5rem, 1.893rem + 2.589vw, 5rem);
}

/* ページネーション */
.news-pagination {
  margin-top: clamp(2.5rem, 1.893rem + 2.589vw, 5rem);
  margin-inline: auto;
  max-width: 552px;
  width: fit-content;
}

.page-number-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 0.431rem + 1.359vw, 2.063rem);
}


.page-number-item li {
  cursor: pointer;
  transition: all 0.3s;
}

.page-number-item li:hover {
  opacity: 0.8;
}


.prev a,
.prev span,
.next a,
.next span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background-color: var(--white);
  width: clamp(2rem, 1.727rem + 1.165vw, 3.125rem);
  height: clamp(2rem, 1.727rem + 1.165vw, 3.125rem);
  border: var(--blue) 1px solid;
  border-radius: 50vh;
  transition: all 0.3s;
}

.prev a:hover,
.next a:hover {
  color: var(--white);
  background-color: var(--blue);
}


.page-numbers {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(1rem, 0.939rem + 0.259vw, 1.25rem);
  letter-spacing: 0.05em;
  line-height: 2.75;
  text-align: center;
  color: var(--blue);
}

.page-numbers.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background-color: var(--blue);
  width: clamp(2rem, 1.727rem + 1.165vw, 3.125rem);
  height: clamp(2rem, 1.727rem + 1.165vw, 3.125rem);
  border: var(--blue) 1px solid;
  border-radius: 50vh;
}