@layer component {
  .pg-news-card {
    line-height: 1.5;
  }
  .pg-news-card__inner {
    display: grid;
    gap: calc(16px / var(--fz-base, 16px) * 1rem) calc(20px / var(--fz-base, 16px) * 1rem);
  }
  @media (max-width: 62em) {
    .pg-news-card__inner {
      grid-template-columns: auto minmax(0, 1fr);
    }
  }
  .pg-news-card__img {
    border-radius: calc(8px / var(--fz-base, 16px) * 1rem);
    overflow: hidden;
    aspect-ratio: 290/387;
  }
  .pg-news-card__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  @media (max-width: 62em) {
    .pg-news-card__img {
      width: 120px;
    }
  }
  .pg-news-card__content {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: calc(8px / var(--fz-base, 16px) * 1rem);
  }
  .pg-news-card__date {
    color: var(--clr-text-gray);
    font-family: var(--ff-en);
    font-size: clamp(0.6875rem, calc(12px / var(--design-width, 1440px) * 100vw), 0.75rem);
  }
  .pg-news-card__title {
    font-size: clamp(0.8125rem, calc(14px / var(--design-width, 1440px) * 100vw), 0.875rem);
  }
}
@layer component {
  .c-pagination {
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .c-pagination:not(:first-child) {
    margin-top: clamp(3.5rem, calc(96px / var(--design-width, 1440px) * 100vw), 6rem);
  }
  .c-pagination__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem);
  }
  .c-pagination__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pagination-button-size, clamp(2rem, calc(44px / var(--design-width, 1440px) * 100vw), 2.75rem));
    height: var(--pagination-button-size, clamp(2rem, calc(44px / var(--design-width, 1440px) * 100vw), 2.75rem));
    border-radius: 50%;
    background-color: var(--pagination-button-bgc, color-mix(in srgb, #fff, #000 5%));
  }
  .c-pagination__button a::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .c-pagination__button.is-disabled {
    background-color: transparent;
    pointer-events: none;
    opacity: 0.4;
  }
  .c-pagination__button::before {
    content: "";
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url("../../common/img/bracket-right.svg") center center no-repeat;
    background-size: 5px 8px;
    opacity: 0.867;
  }
  .c-pagination__button--prev::before {
    transform: rotate(-180deg);
  }
  .c-pagination__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, calc(12px / var(--design-width, 1440px) * 100vw), 0.75rem);
  }
  .c-pagination__item {
    font-family: var(--ff-en);
    position: relative;
    width: var(--pagination-button-size, 24px);
    height: var(--pagination-button-size, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-pagination__item :is(a, span) {
    font-size: clamp(0.9375rem, calc(16px / var(--design-width, 1440px) * 100vw), 1rem);
    font-weight: 500;
  }
  .c-pagination__item :is(a, span)::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .c-pagination__item.is-current::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
  }
}
@layer project {
  .p-section:has(.c-tab-switcher) {
    --section-content-mt: clamp(1.25rem, calc(24px / var(--design-width, 1440px) * 100vw), 1.5rem);
  }
  .p-section[data-variant*="bg:"] .p-section__inner, .p-section[data-variant*="border:"] .p-section__inner {
    background: var(--section-bg, #fff);
    padding-block: clamp(3rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem);
  }
  .p-section[data-variant*="bg:light-gray"] {
    --section-bg: #F5F5F5;
  }
  .p-section[data-variant*="bdc:light-gray"] {
    --section-bdc: #ddd;
  }
  .p-section[data-variant*="border:block"] {
    border-block: 1px solid var(--section-bdc, #000);
  }
  .p-section__inner {
    --minmax: max(calc(var(--content-min-margin, 24) * 1px), calc(var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw));
    max-width: var(--content-max-width, 100%);
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--minmax) * 2);
    padding-inline: clamp(1.25rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem);
    border-radius: calc(20px / var(--fz-base, 16px) * 1rem);
  }
  .p-section__header {
    display: grid;
    gap: clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem);
  }
  .p-section__header[data-variant*="justify:center"] {
    justify-content: center;
  }
  .p-section__header-column .c-tab-switcher:not(:first-child) {
    margin-top: clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem);
  }
  .p-section__heading {
    font-size: clamp(1.5rem, calc(28px / var(--design-width, 1440px) * 100vw), 1.75rem);
    font-weight: bold;
    line-height: 1.1;
    font-family: var(--ff-en);
    letter-spacing: 0.02em;
  }
  .p-section__content {
    padding-block: clamp(1rem, calc(20px / var(--design-width, 1440px) * 100vw), 1.25rem);
  }
  .p-section__content:not(:first-child) {
    margin-top: var(--section-content-mt, clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem));
  }
}
.pg-news {
  padding-block: clamp(4rem, calc(80px / var(--design-width, 1440px) * 100vw), 5rem);
}

.pg-news-list {
  display: grid;
  gap: clamp(1rem, calc(40px / var(--design-width, 1440px) * 100vw), 2.5rem);
}
@media (min-width: 62.0625em) {
  .pg-news-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pg-news-card__img {
  aspect-ratio: 290/385;
  border-radius: calc(8px / var(--fz-base, 16px) * 1rem);
  overflow: hidden;
}
.pg-news-card__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}