.cmn-heading-l2,
.cmn-heading-l3 {
  background: var(--color-blue);
}

.cmn-heading-l2::before,
.cmn-heading-l3::before {
  content: "";
  position: absolute;
  top: 12vw;
  left: 0;
  aspect-ratio: 750/323;
  background-image: url(../img/news/bg_kv@sp.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 100%;
}

.cmn-grouping-l2 .cmn-grouping-section-box {
  padding-top: 8vw;
}

.cmn-grouping-l3 .cmn-grouping-section-box {
  background: #cde68a;
}

.news-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: auto;
  margin-right: auto;
  width: 89.3333333333vw;
  gap: 4vw;
  margin-bottom: 8vw;
}

.news-tabs button {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 110/30;
  background: var(--color-light-purple);
  -webkit-mask: url(../img/common/bg_category.svg) no-repeat;
  -webkit-mask-size: contain;
  mask: url(../img/common/bg_category.svg) no-repeat;
  mask-size: contain;
  white-space: nowrap;
  color: var(--color-white);
  width: 44vw;
  font-size: 3.4666666667vw;
}

.news-tabs button.is-active {
  pointer-events: none;
  background: #fff;
  color: var(--color-font);
}

#news-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.6666666667vw;
}

#news-pager:has(button) {
  margin-top: 16vw;
}

#news-pager .pager-page {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/common/ic_pager.webp) center center no-repeat;
  background-size: contain;
  color: var(--color-white);
  aspect-ratio: 1;
  font-size: 3.7333333333vw;
  width: 8vw;
  filter: drop-shadow(0px 1.6vw 0px rgba(var(--color-font-rgb), 0.6));
}

#news-pager .pager-page.is-current {
  pointer-events: none;
  -webkit-mask: url(../img/common/ic_pager.webp) center center no-repeat;
  -webkit-mask-size: contain;
  mask: url(../img/common/ic_pager.webp) center center no-repeat;
  mask-size: contain;
  background: var(--color-white);
  color: var(--color-font);
  width: 7.4666666667vw;
}

#news-pager .pager-prev,
#news-pager .pager-next {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/common/ic_slide.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 1;
  width: 10.6666666667vw;
  filter: drop-shadow(0px 1.6vw 0px rgba(var(--color-font-rgb), 0.6));
}

#news-pager .pager-prev {
  transform: scale(-1, 1);
}

.news-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5.3333333333vw;
}

.news-heading .heading-shadow {
  filter: drop-shadow(1.6vw 1.6vw 2.6666666667vw rgba(var(--color-font-rgb), 0.25));
  transform: translateZ(0);
}

.news-heading .heading-ill-body,
.news-heading .heading-ill-hands {
  aspect-ratio: 202/140;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 4vw;
  top: -5.7333333333vw;
  width: 24.2666666667vw;
}

.news-heading .heading-ill-body {
  background-image: url(../img/common/ill_cloud_body.webp);
}

.news-heading .heading-ill-hands {
  background-image: url(../img/common/ill_cloud_hands.webp);
}

.news-heading .heading-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-white);
  width: 92vw;
  border-radius: 4vw;
  padding: 8vw;
}

.news-heading h2 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.05em;
  font-size: 6.4vw;
}

.news-tag {
  display: flex;
  align-items: center;
  width: 89.3333333333vw;
  margin: 0 auto;
  gap: 2.6666666667vw;
}

.news-tag .news-date {
  font-size: 3.7333333333vw;
}

.news-tag .news-type {
  color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 110/30;
  background: url(../img/common/bg_category.svg) center center no-repeat;
  background-size: contain;
  white-space: nowrap;
  font-size: 3.7333333333vw;
  width: 29.3333333333vw;
}

.news-body {
  margin: 0 auto;
  width: 89.3333333333vw;
  font-size: 4.2666666667vw;
}

.news-body h1,
.news-body h2,
.news-body h3,
.news-body h4,
.news-body h5 {
  margin-bottom: 6vw;
}

.news-body h1 .heading-inner,
.news-body h2 .heading-inner,
.news-body h3 .heading-inner,
.news-body h4 .heading-inner,
.news-body h5 .heading-inner {
  display: inline-flex;
  font-weight: 700;
  line-height: 1.5;
  gap: 0.6666666667vw;
}

.news-body h1 .heading-inner::before,
.news-body h2 .heading-inner::before,
.news-body h3 .heading-inner::before,
.news-body h4 .heading-inner::before,
.news-body h5 .heading-inner::before {
  content: "";
  flex: 0 0 auto;
  aspect-ratio: 1;
  margin-top: 0.35em;
  aspect-ratio: 1;
  -webkit-mask: url(../img/common/ic_pagination.svg) no-repeat;
  -webkit-mask-size: contain;
  mask: url(../img/common/ic_pagination.svg) no-repeat;
  mask-size: contain;
  background: var(--color-light-purple);
}

.news-body h1 .heading-inner {
  font-size: 9.6vw;
}

.news-body h1 .heading-inner::before {
  width: 7.68vw;
}

.news-body h2 .heading-inner {
  font-size: 7.92vw;
}

.news-body h2 .heading-inner::before {
  width: 6.336vw;
}

.news-body h3 .heading-inner {
  font-size: 6.72vw;
}

.news-body h3 .heading-inner::before {
  width: 5.376vw;
}

.news-body h4 .heading-inner {
  font-size: 5.76vw;
}

.news-body h4 .heading-inner::before {
  width: 4.608vw;
}

.news-body h5 .heading-inner {
  font-size: 4.56vw;
}

.news-body h5 .heading-inner::before {
  width: 3.648vw;
}

.news-body img {
  width: 100% !important;
  height: auto !important;
}

.news-body div,
.news-body p,
.news-body ul,
.news-body ol {
  line-height: 1.5;
  font-size: 4.2666666667vw;
}

.news-body h6,
.news-body .caution {
  text-indent: -1em;
  margin-left: 1em;
  font-size: 3.4666666667vw;
}

.news-body a {
  border-bottom: 2px solid var(--color-white);
  font-weight: 700;
  color: var(--color-font);
}

.news-body a[target=_blank]::after {
  content: "";
  display: inline-block;
  aspect-ratio: 1;
  background: url(../img/common/ic_link.webp) no-repeat;
  background-size: contain;
  transform: translateY(0.1em);
  width: 1em;
  margin-left: 0.2em;
}

.news-body ul {
  list-style: disc;
  margin-left: 6.6666666667vw;
}

.news-body ul li::marker {
  font-size: 70%;
}

.news-body ol {
  list-style: decimal;
  margin-left: 8vw;
}

.news-body table {
  width: 100% !important;
  border-collapse: collapse;
}

.news-body table caption {
  text-align: center;
  margin-bottom: 0.5em;
  font-size: 5.76vw;
}

.news-body table th {
  white-space: nowrap;
  font-weight: 700;
  text-align: center;
}

.news-body table td {
  text-align: left;
}

.news-body table th,
.news-body table td {
  line-height: 1.5;
  font-size: 4.2666666667vw;
  border: 2px solid var(--color-white);
  vertical-align: text-top;
  padding: 2.6666666667vw 1.3333333333vw;
}

.news-body hr {
  position: relative;
  border: none;
  background: url(../img/common/hr_line.svg) no-repeat;
  background-size: 100% auto;
  margin: 0 auto;
  aspect-ratio: 328/6;
  width: 89.3333333333vw;
}

@media screen and (min-width: 768px) {
  .cmn-heading-l2::before,
  .cmn-heading-l3::before {
    aspect-ratio: 1238/121;
    background-image: url(../img/news/bg_kv@pc.webp);
    width: min(1238px, min( calc(1238 / 1280 * 100vw)));
    top: min(75px, min( calc(75 / 1280 * 100vw)));
    left: 50%;
    transform: translateX(-50%);
  }

  .cmn-grouping-l2 .cmn-grouping-section-box {
    padding-top: min(60px, min( calc(60 / 1280 * 100vw)));
  }

  .cmn-card-container {
    justify-content: flex-start;
    width: min(954px, min( calc(954 / 1280 * 100vw)));
  }

  .news-tabs {
    width: auto;
    display: flex;
    justify-content: center;
    gap: min(10px, min( calc(10 / 1280 * 100vw)));
    margin-bottom: min(70px, min( calc(70 / 1280 * 100vw)));
  }

  .news-tabs button {
    width: min(110px, min( calc(110 / 1280 * 100vw)));
    font-size: min(13px, min( calc(13 / 1280 * 100vw)));
  }

  #news-pager {
    gap: min(10px, min( calc(10 / 1280 * 100vw)));
  }

  #news-pager:has(button) {
    margin-top: min(60px, min( calc(60 / 1280 * 100vw)));
  }

  #news-pager .pager-page {
    font-size: min(18px, min( calc(18 / 1280 * 100vw)));
    width: min(48px, min( calc(48 / 1280 * 100vw)));
    filter: drop-shadow(0px min(8px, min( calc(8 / 1280 * 100vw))) 0px rgba(var(--color-font-rgb), 0.6));
    transition: filter 0.2s, transform 0.2s;
  }

  #news-pager .pager-page.is-current {
    width: min(44px, min( calc(44 / 1280 * 100vw)));
  }

  #news-pager .pager-prev,
  #news-pager .pager-next {
    width: min(67px, min( calc(67 / 1280 * 100vw)));
    filter: drop-shadow(0px min(8px, min( calc(8 / 1280 * 100vw))) 0px rgba(var(--color-font-rgb), 0.6));
    transition: filter 0.2s, transform 0.2s;
  }

  #news-pager .pager-prev {
    margin-right: min(15px, min( calc(15 / 1280 * 100vw)));
  }

  #news-pager .pager-next {
    margin-left: min(15px, min( calc(15 / 1280 * 100vw)));
  }

  .news-heading {
    margin-bottom: min(40px, min( calc(40 / 1280 * 100vw)));
  }

  .news-heading .heading-shadow {
    filter: drop-shadow(min(6px, min( calc(6 / 1280 * 100vw))) min(6px, min( calc(6 / 1280 * 100vw))) min(10px, min( calc(10 / 1280 * 100vw))) rgba(var(--color-font-rgb), 0.25));
  }

  .news-heading .heading-ill-body,
  .news-heading .heading-ill-hands {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    top: max(-25px, max( calc(-25 / 1280 * 100vw)));
    width: min(101px, min( calc(101 / 1280 * 100vw)));
    margin-left: min(135px, min( calc(135 / 1280 * 100vw)));
  }

  .news-heading .heading-frame {
    width: min(864px, min( calc(864 / 1280 * 100vw)));
    border-radius: min(30px, min( calc(30 / 1280 * 100vw)));
    padding: min(30px, min( calc(30 / 1280 * 100vw))) min(55px, min( calc(55 / 1280 * 100vw)));
  }

  .news-heading h2 {
    font-size: min(32px, min( calc(32 / 1280 * 100vw)));
  }

  .news-tag {
    width: min(640px, min( calc(640 / 1280 * 100vw)));
    gap: min(18px, min( calc(18 / 1280 * 100vw)));
  }

  .news-tag .news-date {
    font-size: min(16px, min( calc(16 / 1280 * 100vw)));
  }

  .news-tag .news-type {
    font-size: min(14px, min( calc(14 / 1280 * 100vw)));
    width: min(110px, min( calc(110 / 1280 * 100vw)));
  }

  .news-body {
    width: min(640px, min( calc(640 / 1280 * 100vw)));
    font-size: 16px;
  }

  .news-body h1,
  .news-body h2,
  .news-body h3,
  .news-body h4,
  .news-body h5 {
    margin-bottom: min(24px, min( calc(24 / 1280 * 100vw)));
  }

  .news-body h1 .heading-inner,
  .news-body h2 .heading-inner,
  .news-body h3 .heading-inner,
  .news-body h4 .heading-inner,
  .news-body h5 .heading-inner {
    gap: min(10px, min( calc(10 / 1280 * 100vw)));
  }

  .news-body h1 .heading-inner {
    font-size: 40px;
  }

  .news-body h1 .heading-inner::before {
    width: 32px;
  }

  .news-body h2 .heading-inner {
    font-size: 33px;
  }

  .news-body h2 .heading-inner::before {
    width: 26px;
  }

  .news-body h3 .heading-inner {
    font-size: 28px;
  }

  .news-body h3 .heading-inner::before {
    width: 22px;
  }

  .news-body h4 .heading-inner {
    font-size: 24px;
  }

  .news-body h4 .heading-inner::before {
    width: 19px;
  }

  .news-body h5 .heading-inner {
    font-size: 19px;
  }

  .news-body h5 .heading-inner::before {
    width: 15px;
  }

  .news-body div,
  .news-body p,
  .news-body ul,
  .news-body ol {
    font-size: 16px;
  }

  .news-body h6,
  .news-body .caution {
    font-size: 13px;
  }

  .news-body ul {
    margin-left: min(25px, min( calc(25 / 1280 * 100vw)));
  }

  .news-body ol {
    margin-left: min(30px, min( calc(30 / 1280 * 100vw)));
  }

  .news-body .cmn-image.col-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: min(24px, min( calc(24 / 1280 * 100vw)));
    width: calc(100% + min(200px, min( calc(200 / 1280 * 100vw))));
    margin-left: max(-100px, max( calc(-100 / 1280 * 100vw)));
    margin-right: max(-100px, max( calc(-100 / 1280 * 100vw)));
  }

  .news-body .cmn-image.col-2 .image {
    width: min(408px, min( calc(408 / 1280 * 100vw)));
    --gap: max(-36px, max(calc(-36 / 1280 * 100vw)));
  }

  .news-body table {
    width: calc(100% + min(200px, min( calc(200 / 1280 * 100vw)))) !important;
    margin-left: max(-100px, max( calc(-100 / 1280 * 100vw)));
    margin-right: max(-100px, max( calc(-100 / 1280 * 100vw)));
  }

  .news-body table caption {
    font-size: 24px;
  }

  .news-body table th,
  .news-body table td {
    font-size: 16px;
    padding: min(20px, min( calc(20 / 1280 * 100vw)));
  }

  .news-body hr {
    width: min(328px, min( calc(328 / 1280 * 100vw)));
  }
}

@media screen and (min-width: 768px) and (min-width: 768px) {
  .news-tabs button {
    transition: opacity 0.3s;
  }
}

@media screen and (min-width: 768px) and (min-width: 768px) and (hover: hover) {
  .news-tabs button:hover {
    opacity: 0.7;
  }
}

@media screen and (min-width: 768px) and (min-width: 768px) and (-ms-high-contrast: active), screen and (min-width: 768px) and (min-width: 768px) and (-ms-high-contrast: none) {
  .news-tabs button:hover {
    opacity: 0.7;
  }
}

@media screen and (min-width: 768px) and (hover: hover) {
  #news-pager .pager-page:hover {
    transform: translateY(min(8px, min( calc(8 / 1280 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  #news-pager .pager-prev:hover,
  #news-pager .pager-next:hover {
    transform: translateY(min(8px, min( calc(8 / 1280 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  #news-pager .pager-prev:hover {
    transform: translateY(min(8px, min( calc(8 / 1280 * 100vw)))) scale(-1, 1);
  }

  .news-body a:hover {
    border: none;
  }
}

@media screen and (min-width: 768px) and (-ms-high-contrast: active), screen and (min-width: 768px) and (-ms-high-contrast: none) {
  #news-pager .pager-page:hover {
    transform: translateY(min(8px, min( calc(8 / 1280 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  #news-pager .pager-prev:hover,
  #news-pager .pager-next:hover {
    transform: translateY(min(8px, min( calc(8 / 1280 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  #news-pager .pager-prev:hover {
    transform: translateY(min(8px, min( calc(8 / 1280 * 100vw)))) scale(-1, 1);
  }

  .news-body a:hover {
    border: none;
  }
}