@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(min(-20px, min(calc(-20 / 768 * 100vh), calc(-20 / 1440 * 100vw))));
  }
}

.cmn-grouping-l2:not(:has(.cmn-grouping-heading)) {
  margin-top: 16vw;
}

.cmn-heading-l2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

.cmn-heading-l2 .heading-bg-img {
  position: absolute;
  inset: 0;
}

.cmn-heading-l2 .heading-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.cmn-heading-l2 h1 {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--color-white);
  text-shadow: 4px 4px 0 rgba(88, 88, 88, 0.6);
  font-weight: 900;
  line-height: 1.25;
  margin-block: calc((1em - 1lh) / 2);
  letter-spacing: 0.05em;
  padding: 0 5.3333333333vw;
  font-size: 8.2666666667vw;
}

.cmn-heading-l2 {
  height: 62.6666666667vw;
}

.cmn-grouping-l2 .cmn-grouping-section-box {
  background: rgba(var(--color-white-rgb), 0.4);
}

.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: 123/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[data-term="6"] {
  background: #82b5df;
}

.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-purple);
  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-purple);
  color: var(--color-white);
  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_play.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: 123/30;
  background: url(../img/common/bg_category.svg) center center no-repeat;
  background-size: contain;
  white-space: nowrap;
  font-size: 3.3333333333vw;
  width: 26.4vw;
}

[lang=ja] .news-tag .news-type[data-term="6"],
[lang=ja] .news-tag .news-type[data-term-sub="6"] {
  aspect-ratio: 160/30;
  background: url(../img/common/bg_category_l.svg) center center no-repeat;
  background-size: contain;
  width: 38.4vw;
}

[lang=zh-cmn-Hans] .news-tag .news-type[data-term="6"],
[lang=zh-cmn-Hans] .news-tag .news-type[data-term-sub="6"] {
  background: #82b5df;
  -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;
}

[lang=zh-cmn-Hant] .news-tag .news-type[data-term="6"],
[lang=zh-cmn-Hant] .news-tag .news-type[data-term-sub="6"] {
  background: #82b5df;
  -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;
}

@media screen and (min-width: 768px) {
  .cmn-grouping-l2:not(:has(.cmn-grouping-heading)) {
    margin-top: min(120px, min( calc(120 / 1440 * 100vw)));
  }

  .cmn-heading-l2 h1 {
    padding: 0 12vw;
    font-size: min(45px, min( calc(45 / 1440 * 100vw)));
  }

  .cmn-heading-l2 {
    height: min(310px, min( calc(310 / 1440 * 100vw)));
  }

  .cmn-card-container {
    justify-content: flex-start;
  }

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

  .news-tabs button {
    width: min(123px, min( calc(123 / 1440 * 100vw)));
    font-size: min(14px, min( calc(14 / 1440 * 100vw)));
  }

  [lang=ja] .news-tabs button[data-term="6"] {
    -webkit-mask: url(../img/common/bg_category_l.svg) no-repeat;
    -webkit-mask-size: contain;
    mask: url(../img/common/bg_category_l.svg) no-repeat;
    mask-size: contain;
    aspect-ratio: 160/30;
    width: min(160px, min( calc(160 / 1440 * 100vw)));
  }

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

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

  #news-pager .pager-page {
    font-size: min(18px, min( calc(18 / 1440 * 100vw)));
    width: min(48px, min( calc(48 / 1440 * 100vw)));
    filter: drop-shadow(0px min(8px, min( calc(8 / 1440 * 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 / 1440 * 100vw)));
  }

  #news-pager .pager-prev,
  #news-pager .pager-next {
    width: min(67px, min( calc(67 / 1440 * 100vw)));
    filter: drop-shadow(0px min(8px, min( calc(8 / 1440 * 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 / 1440 * 100vw)));
  }

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

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

  .news-heading .heading-shadow {
    filter: drop-shadow(min(6px, min( calc(6 / 1440 * 100vw))) min(6px, min( calc(6 / 1440 * 100vw))) min(10px, min( calc(10 / 1440 * 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 / 1440 * 100vw)));
    width: min(101px, min( calc(101 / 1440 * 100vw)));
    margin-left: min(135px, min( calc(135 / 1440 * 100vw)));
  }

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

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

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

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

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

  [lang=ja] .news-tag .news-type[data-term="6"],
  [lang=ja] .news-tag .news-type[data-term-sub="6"] {
    width: min(160px, min( calc(160 / 1440 * 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 / 1440 * 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 / 1440 * 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 / 1440 * 100vw)))) scale(-1, 1);
  }
}

@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 / 1440 * 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 / 1440 * 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 / 1440 * 100vw)))) scale(-1, 1);
  }
}