/* news */
/* ============================================ */

/* ヒーロー */
.news-hero {
  padding: 200px 0 64px;
  @media (width <= 896px) {
    padding: 120px 0 32px;
  }
}
.news-hero__body {
  width: 56%;
  max-width: 816px;
  @media (width <= 896px) {
    width: 100%;
  }
}


/* 一覧本体 */
/* ============================================ */
.news-list {
  padding: 64px 0 80px;
  position: relative;
  @media (width <= 896px) {
    padding: 24px 0 32px;
  }
}


/* タブ（絞り込み） */
/* ============================================ */
.news-tabs {
  display: flex;
  width: 100%;
  gap: 4px;
  border-radius: 8px;
  overflow: clip;
  margin-bottom: 40px;
  @media (width <= 896px) {
    border-radius: 4px;
    margin-bottom: 24px;
  }
}
.news-tabs__btn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc((20 / 18) * 1em) calc((8 / 18) * 1em);
  background: var(--bg_c);
  border: none;
  color: var(--font_c);
  font-size: calc((18 / 16) * 1rem); /* 18px */
  font-weight: 700;
  cursor: pointer;
  @media (width <= 896px) {
    font-size: calc((14 / 16) * 1rem); /* 14px */
  }
  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--main_c);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease-out;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      &::after {
        transform: scaleX(1);
      }
    }
  }
  &.is-active {
    &::after {
      transform: scaleX(1);
    }
  }
}


/* お知らせ一覧（リスト行） */
/* ============================================ */
.news-items {
  margin-top: 8px;
}
.news-item {
  border-top: 1px dashed var(--line_c);
  &:last-child {
    border-bottom: 1px dashed var(--line_c);
  }
}
.news-item__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px 40px 32px 8px;
  color: var(--font_c);
  @media (width <= 896px) {
    flex-wrap: wrap;
    gap: 8px;
    padding: 24px 38px 24px 8px;
  }
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(90deg, color-mix(in srgb, #fff 0%, transparent) 0%, color-mix(in srgb, #fff 56%, transparent) 10%, color-mix(in srgb, #fff 80%, transparent) 20%, #fff 50%, color-mix(in srgb, #fff 56%, transparent) 90%, color-mix(in srgb, #fff 0%, transparent) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s ease-out;
  }
  > * {
    position: relative;
    z-index: 1;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      &::before {
        transform: scaleX(1);
      }
      .news-item__date {
        color: var(--main_c);
      }
      .news-item__txt {
        color: var(--main_c);
        text-decoration: underline;
        text-underline-offset: .2em;
      }
      .news-item__arrow {
        translate: 4px 0;
      }
    }
  }
}
.news-item__date {
  flex-shrink: 0;
  width: 7em;
  font-family: var(--font_en);
  font-size: clamp(0.75rem, 0.4583rem + 0.5208vw, 1rem); /* 16~12(1664~896) */
  font-weight: 800;
  letter-spacing: .06em;
  transition: color .3s ease-out;
}
.news-item__label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: calc((8 / 12) * 1em) calc((12 / 12) * 1em);
  background: #fff;
  border: 1px solid var(--main_c);
  border-radius: 9999px;
  color: var(--main_c);
  font-size: clamp(0.625rem, 0.4792rem + 0.2604vw, 0.75rem); /* 12~10(1664~896) */
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
}
.news-item__txt {
  flex: 1;
  min-width: 0;
  font-size: var(--fs_m); /* 16~14 */
  line-height: 1.8;
  letter-spacing: .04em;
  transition: all .3s ease-out;
  @media (width <= 896px) {
    flex-basis: 100%;
    min-width: 100%;
  }
}
.news-item__new {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc((8 / 12) * 1em) calc((14 / 12) * 1em);
  background: var(--cv_c);
  border-radius: 9999px;
  color: #fff;
  font-family: var(--font_en);
  font-size: clamp(0.625rem, 0.4792rem + 0.2604vw, 0.75rem); /* 12~10(1664~896) */
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
}
.news-item__arrow {
  flex-shrink: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  color: var(--main_c);
  transition: translate .3s ease-out;
  @media (width <= 896px) {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 8px;
    translate: 0 -50%;
  }
  svg {
    width: 100%;
    height: 100%;
  }
}
.news-items__empty {
  padding: 64px 0;
  text-align: center;
  font-size: var(--fs_m); /* 16~14 */
  line-height: 1.8;
  color: var(--font_c);
  @media (width <= 896px) {
    padding: 32px 0;
  }
}


/* ページネーション */
/* ============================================ */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  @media (width <= 896px) {
    gap: 8px;
    margin-top: 40px;
  }
}
.news-pagination__prev,
.news-pagination__next {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs_m); /* 16~14 */
  color: var(--font_c);
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      color: var(--main_c);
    }
  }
}
.news-pagination__prev--disabled,
.news-pagination__next--disabled {
  pointer-events: none;
  opacity: .4;
}
.news-pagination__label {
  font-size: clamp(0.75rem, 0.4583rem + 0.5208vw, 1rem); /* 16~12(1664~896) */
  @media (width <= 896px) {
    display: none;
  }
}
.news-pagination__arrow {
  display: inline-flex;
  width: 20px;
  height: 20px;
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--main_c);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
.news-pagination__prev .news-pagination__arrow::after {
  -webkit-mask-image: url(../images/common/arrow_left.svg);
  mask-image: url(../images/common/arrow_left.svg);
}
.news-pagination__next .news-pagination__arrow::after {
  -webkit-mask-image: url(../images/common/arrow_right.svg);
  mask-image: url(../images/common/arrow_right.svg);
}
.news-pagination__list {
  display: flex;
  align-items: center;
  gap: 8px;
  @media (width <= 896px) {
    gap: 4px;
  }
}
.news-pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--font_c);
  font-family: var(--font_en);
  font-size: calc((14 / 16) * 1rem); /* 14px */
  font-weight: 600;
  @media (width <= 896px) {
    width: 40px;
    height: 40px;
    font-size: calc((12 / 16) * 1rem); /* 12px */
  }
}
.news-pagination__num--current {
  background: var(--main_c);
  color: #fff;
}
.news-pagination__num:hover {
  @media (hover: hover) {
    opacity: 1;
    background: var(--main_c);
    color: #fff;
  }
}
.news-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: var(--font_c);
}