/* ==========================================================================
  ニュース一覧
========================================================================== */
@layer page {
  /* COMMON 上書き */
  @media all and (width >= 48rem) {
    #news-list .l-section__inner {
      max-width: none;
      padding: 0;
    }
    #news-list .l-section__heading,
    #news-list .l-section__body {
      max-width: calc(1280 / var(--font-size) * 1rem);
      padding-inline: calc(40 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    /* パンくず */
    .l-breadcrumb {
      background-color: var(--color-light-green);
    }
    .l-breadcrumb__inner {
      max-width: calc(1280 / var(--font-size) * 1rem);
      margin-inline: auto;
      padding-inline: calc(40 / var(--font-size) * 1rem);
      padding-block: calc(14 / var(--font-size) * 1rem);
    }
    .c-breadcrumb-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .c-breadcrumb-item + .c-breadcrumb-item {
      position: relative;
      margin-left: calc(16 / var(--font-size) * 1rem);
      padding-left: calc(16 / var(--font-size) * 1rem);
    }
    .c-breadcrumb-item + .c-breadcrumb-item::before {
      position: absolute;
      left: 0;
      top: calc(6 / var(--font-size) * 1rem);
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      content: '';
      width: calc(6 / var(--font-size) * 1rem);
      height: calc(10 / var(--font-size) * 1rem);
      background-color: #6c6c6c;
      -webkit-mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
              mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
    }
    .c-breadcrumb-item {
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 1.5;
      letter-spacing: 0.1em;
      color: var(--color-main);
      font-weight: bold;
    }
    .c-breadcrumb-item.--current {
      color: #8e8e8e;
    }
    .c-breadcrumb-item.--current a {
      pointer-events: none;
    }
  }
  @media all and (width < 48rem) {
    #news-list .l-section__inner {
      max-width: none;
      padding: 0;
    }
    #news-list .l-section__heading,
    #news-list .l-section__body {
      max-width: calc(1280 / var(--font-size) * 1rem);
      padding-inline: calc(20 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    /* パンくず */
    .l-breadcrumb {
      background-color: var(--color-light-green);
    }
    .l-breadcrumb__inner {
      max-width: calc(1280 / var(--font-size) * 1rem);
      margin-inline: auto;
      padding-inline: calc(20 / var(--font-size) * 1rem);
      padding-block: calc(10 / var(--font-size) * 1rem);
    }
    .c-breadcrumb-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .c-breadcrumb-item + .c-breadcrumb-item {
      position: relative;
      margin-left: calc(12 / var(--font-size) * 1rem);
      padding-left: calc(12 / var(--font-size) * 1rem);
    }
    .c-breadcrumb-item + .c-breadcrumb-item::before {
      position: absolute;
      left: 0;
      top: calc(5.5 / var(--font-size) * 1rem);
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      content: '';
      width: calc(5 / var(--font-size) * 1rem);
      height: calc(8 / var(--font-size) * 1rem);
      background-color: #6c6c6c;
      -webkit-mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
              mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
    }
    .c-breadcrumb-item {
      font-size: calc(12 / var(--font-size) * 1rem);
      line-height: 1.5;
      letter-spacing: 0.1em;
      color: var(--color-main);
      font-weight: bold;
    }
    .c-breadcrumb-item.--current {
      color: #8e8e8e;
    }
    .c-breadcrumb-item.--current a {
      pointer-events: none;
    }
  }

  /* ==========================================================================
    絞り込み
  ========================================================================== */
  @media all and (width >= 48rem) {
    .news-filter {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      gap: calc(24 / var(--font-size) * 1rem);
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-bottom: calc(40 / var(--font-size) * 1rem);
    }
    .news-filter-category-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: calc(12 / var(--font-size) * 1rem);
    }
    .news-filter-category-btn {
      display: block;
      font-size: calc(15 / var(--font-size) * 1rem);
      font-weight: bold;
      line-height: 1;
      color: var(--color-main);
      background-color: #fff;
      border: var(--color-main) calc(1.5 / var(--font-size) * 1rem) solid;
      border-radius: 9999px;
      padding: calc(12 / var(--font-size) * 1rem) calc(28 / var(--font-size) * 1rem);
      -webkit-transition: all 0.15s ease-out;
      transition: all 0.15s ease-out;
      cursor: pointer;
    }
    .news-filter-category-btn.--current,
    .news-filter-category-btn:hover {
      background-color: var(--color-main);
      color: #fff;
    }
    .news-filter-year {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(8 / var(--font-size) * 1rem);
    }
    .news-filter-year__label {
      font-size: calc(15 / var(--font-size) * 1rem);
      font-weight: bold;
      color: var(--color-text-gray);
      -ms-flex-negative: 0;
          flex-shrink: 0;
    }
    .news-filter-year__select {
      position: relative;
    }
    .news-filter-year__select::after {
      content: '';
      position: absolute;
      top: 50%;
      right: calc(14 / var(--font-size) * 1rem);
      -webkit-transform: translateY(-50%) rotate(90deg);
              transform: translateY(-50%) rotate(90deg);
      width: calc(6 / var(--font-size) * 1rem);
      height: calc(10 / var(--font-size) * 1rem);
      background-color: var(--color-main);
      -webkit-mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
              mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
      pointer-events: none;
    }
    .news-filter-year-select {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      font-size: calc(15 / var(--font-size) * 1rem);
      font-weight: bold;
      line-height: 1;
      color: var(--color-main);
      background-color: #fff;
      border: var(--color-border-gray) calc(1.5 / var(--font-size) * 1rem) solid;
      border-radius: calc(6 / var(--font-size) * 1rem);
      padding: calc(12 / var(--font-size) * 1rem) calc(38 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
      min-width: calc(140 / var(--font-size) * 1rem);
      cursor: pointer;
    }
  }
  @media all and (width < 48rem) {
    .news-filter {
      margin-bottom: calc(28 / var(--font-size) * 1rem);
    }
    .news-filter-category {
      /* タブが増えても収まるよう横スクロールさせる */
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-inline: calc(-20 / var(--font-size) * 1rem);
      padding-inline: calc(20 / var(--font-size) * 1rem);
      scrollbar-width: none;
    }
    .news-filter-category::-webkit-scrollbar {
      display: none;
    }
    .news-filter-category-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: calc(8 / var(--font-size) * 1rem);
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
    }
    .news-filter-category-btn {
      display: block;
      font-size: calc(13 / var(--font-size) * 1rem);
      font-weight: bold;
      line-height: 1;
      white-space: nowrap;
      color: var(--color-main);
      background-color: #fff;
      border: var(--color-main) calc(1.33 / var(--font-size) * 1rem) solid;
      border-radius: 9999px;
      padding: calc(10 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
    }
    .news-filter-category-btn.--current {
      background-color: var(--color-main);
      color: #fff;
    }
    .news-filter-year {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(8 / var(--font-size) * 1rem);
      margin-top: calc(16 / var(--font-size) * 1rem);
    }
    .news-filter-year__label {
      font-size: calc(13 / var(--font-size) * 1rem);
      font-weight: bold;
      color: var(--color-text-gray);
      -ms-flex-negative: 0;
          flex-shrink: 0;
    }
    .news-filter-year__select {
      position: relative;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
    }
    .news-filter-year__select::after {
      content: '';
      position: absolute;
      top: 50%;
      right: calc(12 / var(--font-size) * 1rem);
      -webkit-transform: translateY(-50%) rotate(90deg);
              transform: translateY(-50%) rotate(90deg);
      width: calc(5 / var(--font-size) * 1rem);
      height: calc(8 / var(--font-size) * 1rem);
      background-color: var(--color-main);
      -webkit-mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
              mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
      pointer-events: none;
    }
    .news-filter-year-select {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      width: 100%;
      font-size: calc(13 / var(--font-size) * 1rem);
      font-weight: bold;
      line-height: 1;
      color: var(--color-main);
      background-color: #fff;
      border: var(--color-border-gray) calc(1.33 / var(--font-size) * 1rem) solid;
      border-radius: calc(6 / var(--font-size) * 1rem);
      padding: calc(11 / var(--font-size) * 1rem) calc(32 / var(--font-size) * 1rem) calc(11 / var(--font-size) * 1rem) calc(14 / var(--font-size) * 1rem);
    }
  }
  /* JS無効時のフォールバック（年リンク） */
  .news-filter-year-fallback {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: calc(12 / var(--font-size) * 1rem);
    font-size: calc(14 / var(--font-size) * 1rem);
    color: var(--color-main);
    font-weight: bold;
  }

  /* ==========================================================================
    一覧
  ========================================================================== */
  @media all and (width >= 48rem) {
    .news-list-item {
      --list-item-text-color: var(--color-black);

      border-top: var(--color-border-gray) solid calc(1 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
    }
    .news-list-item:nth-last-of-type(1) {
      border-bottom: var(--color-border-gray) solid calc(1 / var(--font-size) * 1rem);
    }
    .news-block {
      display: block;
      padding-block: calc(24 / var(--font-size) * 1rem);
    }
    a.news-block:hover {
      --list-item-text-color: var(--color-main);
      cursor: pointer;
    }
    .news-block__inner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(24 / var(--font-size) * 1rem);
    }
    .news-block__heading {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(16 / var(--font-size) * 1rem);
      -ms-flex-negative: 0;
          flex-shrink: 0;
    }
    .news-block-date {
      font-size: calc(17 / var(--font-size) * 1rem);
      color: var(--color-text-gray);
      font-weight: bold;
      line-height: 1.3;
      font-family: var(--font-en);
    }
    .news-block-category {
      font-size: calc(11 / var(--font-size) * 1rem);
      color: var(--color-text-gray);
      background-color: var(--color-light-gray);
      font-weight: bold;
      line-height: 1.3;
      padding: calc(8 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
      border-radius: 9999px;
      white-space: nowrap;
    }
    .news-block__body {
      width: 100%;
    }
    .news-block-text {
      font-size: calc(18 / var(--font-size) * 1rem);
      line-height: 1.3;
      -webkit-transition: color 0.15s ease-out;
      transition: color 0.15s ease-out;
      color: var(--list-item-text-color);
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      max-height: calc(47 / var(--font-size) * 1rem);
    }
    .news-list-item--pdf .news-block__inner::after {
      content: '';
      position: relative;
      -ms-flex-negative: 0;
          flex-shrink: 0;
      display: block;
      width: calc(30 / var(--font-size) * 1rem);
      height: calc(30 / var(--font-size) * 1rem);
      -webkit-mask: url(/assets/img/common/icon_pdf.svg) no-repeat center/contain;
              mask: url(/assets/img/common/icon_pdf.svg) no-repeat center/contain;
      background-color: #ea4832;
    }
    .news-list-item--empty {
      border-bottom: var(--color-border-gray) solid calc(1 / var(--font-size) * 1rem);
    }
    .news-list-empty-text {
      font-size: calc(16 / var(--font-size) * 1rem);
      line-height: 1.6;
      padding-block: calc(40 / var(--font-size) * 1rem);
      text-align: center;
      color: var(--color-text-gray);
    }
  }
  @media all and (width < 48rem) {
    .news-list-item {
      --list-item-text-color: var(--color-black);

      border-top: var(--color-border-gray) solid calc(1 / var(--font-size) * 1rem);
      position: relative;
    }
    .news-list-item:nth-last-of-type(1) {
      border-bottom: var(--color-border-gray) solid calc(1 / var(--font-size) * 1rem);
    }
    .news-block {
      display: block;
      padding-block: calc(20 / var(--font-size) * 1rem);
    }
    .news-block__inner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: calc(10 / var(--font-size) * 1rem);
    }
    .news-block__heading {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(12 / var(--font-size) * 1rem);
      -ms-flex-negative: 0;
          flex-shrink: 0;
    }
    .news-block-date {
      font-size: calc(14 / var(--font-size) * 1rem);
      color: var(--color-text-gray);
      font-weight: bold;
      line-height: 1.3;
      font-family: var(--font-en);
    }
    .news-block-category {
      font-size: calc(10 / var(--font-size) * 1rem);
      color: var(--color-text-gray);
      background-color: var(--color-light-gray);
      font-weight: bold;
      line-height: 1.3;
      padding: calc(8 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
      border-radius: 9999px;
      white-space: nowrap;
    }
    .news-block__body {
      width: 100%;
    }
    .news-block-text {
      font-size: calc(15 / var(--font-size) * 1rem);
      line-height: 1.3;
      -webkit-transition: color 0.15s ease-out;
      transition: color 0.15s ease-out;
      color: var(--list-item-text-color);
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      max-height: calc(39 / var(--font-size) * 1rem);
    }
    .news-list-item--pdf .news-block__inner::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      display: block;
      width: calc(30 / var(--font-size) * 1rem);
      height: calc(30 / var(--font-size) * 1rem);
      -webkit-mask: url(/assets/img/common/icon_pdf.svg) no-repeat center/contain;
              mask: url(/assets/img/common/icon_pdf.svg) no-repeat center/contain;
      background-color: #ea4832;
    }
    .news-list-item--pdf .news-block__body {
      padding-right: calc(32 / var(--font-size) * 1rem);
    }
    .news-list-item--empty {
      border-bottom: var(--color-border-gray) solid calc(1 / var(--font-size) * 1rem);
    }
    .news-list-empty-text {
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 1.6;
      padding-block: calc(32 / var(--font-size) * 1rem);
      text-align: center;
      color: var(--color-text-gray);
    }
  }

  /* ==========================================================================
    ページネーション
  ========================================================================== */
  @media all and (width >= 48rem) {
    .news-pagination {
      text-align: center;
      margin-top: calc(50 / var(--font-size) * 1rem);
    }
    .news-pagination-page {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(12 / var(--font-size) * 1rem);
      color: var(--color-main);
      font-family: var(--font-en);
    }
    .news-pagination-arrow {
      position: relative;
      width: calc(49 / var(--font-size) * 1rem);
      height: calc(49 / var(--font-size) * 1rem);
      background-color: var(--color-main);
      -webkit-mask-image: url('/assets/img/common/arrow.svg');
              mask-image: url('/assets/img/common/arrow.svg');
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      cursor: pointer;
      -ms-flex-negative: 0;
          flex-shrink: 0;
      -webkit-transition: all 0.15s;
      transition: all 0.15s;
      border-radius: 9999px;
    }
    .news-pagination-arrow:hover {
      background-color: transparent;
      -webkit-mask-image: none;
              mask-image: none;
    }
    .news-pagination-arrow::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      width: calc(49 / var(--font-size) * 1rem);
      height: calc(49 / var(--font-size) * 1rem);
      background-color: var(--color-main);
      -webkit-mask-image: url('/assets/img/common/arrow_inv.svg');
              mask-image: url('/assets/img/common/arrow_inv.svg');
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      opacity: 0;
      z-index: 2;
      border-radius: 9999px;
    }
    .news-pagination-arrow:hover::before {
      opacity: 1;
    }
    .news-pagination-arrow.--disabled {
      background-color: #ababab;
      pointer-events: none;
    }
    .news-pagination-arrow.--prev {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    .news-pagination-btn {
      width: calc(49 / var(--font-size) * 1rem);
      height: calc(49 / var(--font-size) * 1rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-size: calc(24 / var(--font-size) * 1rem);
      font-weight: 500;
      border-radius: 9999px;
      border: var(--color-main) calc(2 / var(--font-size) * 1rem) solid;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      text-align: center;
    }
    .news-pagination-btn.--current,
    .news-pagination-btn:hover {
      background-color: var(--color-main);
      color: #fff;
    }
  }
  @media all and (width < 48rem) {
    .news-pagination {
      text-align: center;
      margin-top: calc(32 / var(--font-size) * 1rem);
    }
    .news-pagination-page {
      max-width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(12 / var(--font-size) * 1rem);
      color: var(--color-main);
      font-family: var(--font-en);
    }
    .news-pagination-arrow {
      position: relative;
      width: calc(40 / var(--font-size) * 1rem);
      height: calc(40 / var(--font-size) * 1rem);
      background-color: var(--color-main);
      -webkit-mask-image: url('/assets/img/common/arrow.svg');
              mask-image: url('/assets/img/common/arrow.svg');
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      cursor: pointer;
      -ms-flex-negative: 0;
          flex-shrink: 0;
      border-radius: 9999px;
    }
    .news-pagination-arrow.--disabled {
      background-color: #ababab;
      pointer-events: none;
    }
    .news-pagination-arrow.--prev {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    .news-pagination-btn {
      width: calc(40 / var(--font-size) * 1rem);
      height: calc(40 / var(--font-size) * 1rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-size: calc(20.07 / var(--font-size) * 1rem);
      font-weight: 500;
      border-radius: 9999px;
      border: var(--color-main) calc(1.33 / var(--font-size) * 1rem) solid;
      text-align: center;
    }
    .news-pagination-btn.--current {
      background-color: var(--color-main);
      color: #fff;
    }
  }
}