.cmn-fs-m {
  font-size: 4.2666666667vw;
  line-height: 1.56;
}

.cmn-fs-s {
  font-size: 3.7333333333vw;
  line-height: 1.56;
}

.cmn-container-l2 {
  position: relative;
  z-index: 2;
}

.cmn-container-l2 .inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 92vw;
  gap: 10.6666666667vw;
  padding: 20vw 0 10.6666666667vw 0;
}

.cmn-container-l3 {
  position: relative;
  z-index: 2;
}

.cmn-container-l3::after {
  content: "";
  background: #e2cdff;
  position: absolute;
  width: 100%;
  height: 30px;
  top: -29px;
  --bg-height: 30px;
  --bg-width: 1560px;
  mask-image: url("../img/common/footer_mask.svg"), linear-gradient(to bottom, rgba(0, 0, 0, 0) var(--bg-height), rgb(0, 0, 0) var(--bg-height));
  -webkit-mask-image: url("../img/common/footer_mask.svg"), linear-gradient(to bottom, rgba(0, 0, 0, 0) var(--bg-height), rgb(0, 0, 0) var(--bg-height));
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-position: left top, bottom;
  -webkit-mask-position: left top, bottom;
  mask-size: var(--bg-width) calc(var(--bg-height) + 1px), 100% 100%;
  -webkit-mask-size: var(--bg-width) calc(var(--bg-height) + 1px), 100% 100%;
}

.cmn-container-l3 .inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 92vw;
  display: flex;
  flex-direction: column;
  gap: 10.6666666667vw;
  padding: 20vw 0 10.6666666667vw 0;
}

.cmn-container-l3.pb0 .inner {
  padding-bottom: 0;
}

.cmn-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, rgb(181, 179, 252), rgb(226, 205, 255));
}

.inner > div > .cmn-image .image,
.cmn-grouping-intro + .cmn-image .image {
  display: flex;
  flex-direction: column;
  width: 100%;
  filter: drop-shadow(1.6vw 1.6vw 2.6666666667vw rgba(var(--color-font-rgb), 0.25));
}

.inner > div > .cmn-image .image::before,
.cmn-grouping-intro + .cmn-image .image::before,
.inner > div > .cmn-image .image::after,
.cmn-grouping-intro + .cmn-image .image::after {
  content: "";
  position: relative;
  z-index: -1;
  aspect-ratio: 496/61;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.inner > div > .cmn-image .image::before,
.cmn-grouping-intro + .cmn-image .image::before {
  background-image: url(../img/common/card_top.svg);
  margin-bottom: var(--ng-mg);
}

.inner > div > .cmn-image .image::after,
.cmn-grouping-intro + .cmn-image .image::after {
  background-image: url(../img/common/card_bottom.svg);
  margin-top: var(--ng-mg);
}

.inner > div > .cmn-image .image figure,
.cmn-grouping-intro + .cmn-image .image figure,
.inner > div > .cmn-image .image picture,
.cmn-grouping-intro + .cmn-image .image picture {
  display: block;
  background: url(../img/common/card_repeat.svg) repeat-y;
  background-size: 100% auto;
  padding: 0 2vw;
}

.inner > div > .cmn-image .image figure img,
.cmn-grouping-intro + .cmn-image .image figure img,
.inner > div > .cmn-image .image picture img,
.cmn-grouping-intro + .cmn-image .image picture img {
  aspect-ratio: 932/524;
}

.cmn-image + .cmn-grouping-intro {
  padding-top: 9.3333333333vw;
}

.cmn-grouping-intro + .cmn-image {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 9.3333333333vw 3.3333333333vw 0 3.3333333333vw;
}

.cmn-grouping-intro + .cmn-image.col-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4vw;
}

.cmn-grouping-intro + .cmn-image .image {
  --ng-mg: -9.2vw;
}

.cmn-grouping-intro + .cmn-image.col-1-m .image {
  --ng-mg: -9.2vw;
}

.inner > div > .cmn-image {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  width: 92vw;
}

.inner > div > .cmn-image.col-1-l {
  width: 92vw;
}

.inner > div > .cmn-image.col-1-m {
  width: 92vw;
}

.inner > div > .cmn-image.col-1 {
  width: 92vw;
}

.inner > div > .cmn-image.col-1.mt-min {
  margin-top: -4vw;
}

.inner > div > .cmn-image.col-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4vw;
}

.inner > div > .cmn-image.col-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4vw;
}

.inner > div > .cmn-image.col-1-l:not(:last-child),
.inner > div > .cmn-image.col-1:not(:last-child),
.inner > div > .cmn-image.col-2:not(:last-child) {
  margin-bottom: 4vw;
}

.inner > div > .cmn-image.mb0 {
  margin-bottom: 0 !important;
}

.inner > div > .cmn-image .image {
  --ng-mg: -9.2vw;
}

.inner > div > .cmn-image .caption {
  margin-top: 0.5em;
  font-size: 3.7333333333vw;
  line-height: 1.56;
}

.cmn-text-link {
  border-bottom: 2px solid var(--color-white);
  font-weight: 700;
  color: var(--color-font);
}

.cmn-text-link[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;
}

.cmn-indent {
  text-indent: -1em;
  margin-left: 1em;
}

.cmn-fs-ss {
  font-size: 3.7333333333vw;
  line-height: 1.56;
}

.fw-700 {
  font-weight: 700;
}

.cmn-list-no li {
  counter-increment: cnt;
}

.cmn-list-no li::before {
  content: counter(cnt) ". ";
}

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

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

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

.cmn-heading-l2 h1,
.cmn-heading-l3 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: 74.9333333333vw;
}

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

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

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

.cmn-grouping-heading .heading-ill-body,
.cmn-grouping-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;
}

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

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

.cmn-grouping-heading .heading-frame {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cmn-grouping-heading .heading-frame.width-s {
  width: 92vw;
}

.cmn-grouping-heading .heading-frame.width-l {
  width: 92vw;
}

.cmn-grouping-heading .heading-frame.row-1 {
  height: 24vw;
}

.cmn-grouping-heading .heading-frame.row-2 {
  height: 38.6666666667vw;
}

.cmn-grouping-heading .heading-frame.row-2-pc {
  height: 38.6666666667vw;
}

.cmn-grouping-heading .heading-frame.row-3 {
  height: 56.8vw;
}

.cmn-grouping-heading .heading-frame.width-s.row-1 {
  background-image: url(../img/common/bg_cloud_row1.webp), url(../img/common/bg_cloud_row1.webp);
  background-repeat: no-repeat;
  background-position: left top, right top;
  background-size: auto 100%;
}

.cmn-grouping-heading .heading-frame.width-l.row-1 {
  background-image: url(../img/common/bg_cloud_row1.webp), url(../img/common/bg_cloud_row1.webp);
  background-repeat: no-repeat;
  background-position: left top, right top;
  background-size: auto 100%;
}

.cmn-grouping-heading .heading-frame.width-l.row-2 {
  background-image: url(../img/common/bg_cloud_row2.webp), url(../img/common/bg_cloud_row2.webp);
  background-repeat: no-repeat;
  background-position: left top, right top;
  background-size: auto 100%;
}

.cmn-grouping-heading .heading-frame.width-l.row-2-pc {
  background-image: url(../img/common/bg_cloud_row2.webp), url(../img/common/bg_cloud_row2.webp);
  background-repeat: no-repeat;
  background-position: left top, right top;
  background-size: auto 100%;
}

.cmn-grouping-heading .heading-frame.width-l.row-3 {
  background-image: url(../img/common/bg_cloud_row3.webp), url(../img/common/bg_cloud_row3.webp);
  background-repeat: no-repeat;
  background-position: left top, right top;
  background-size: auto 100%;
}

.cmn-grouping-heading .heading-frame.normal {
  background: var(--color-white);
  width: 92vw;
  border-radius: 4vw;
  padding: 8vw;
}

.cmn-grouping-heading h2,
.cmn-grouping-heading h3 {
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
  margin-block: calc((1em - 1lh) / 2);
  letter-spacing: 0.05em;
  font-size: 6.4vw;
}

.cmn-heading {
  font-weight: 700;
}

.cmn-heading.type-h3 {
  position: relative;
  line-height: 1.56;
  font-size: 4.8vw;
  padding-left: 6vw;
}

.cmn-heading.type-h3::before {
  content: "";
  position: absolute;
  left: 0;
  aspect-ratio: 1;
  -webkit-mask: url(../img/common/ic_heading.svg) no-repeat;
  -webkit-mask-size: contain;
  mask: url(../img/common/ic_heading.svg) no-repeat;
  mask-size: contain;
  background: var(--color-light-purple);
  top: 1.8666666667vw;
  width: 4vw;
}

.cmn-heading.pos-center {
  display: inline-flex;
  margin-block: var(--leading-trim);
  font-size: 4.8vw;
  line-height: 1.56;
  gap: 2vw;
}

.cmn-heading.pos-center::before {
  content: "";
  flex: 0 0 auto;
  aspect-ratio: 1;
  margin-top: 0.35em;
  aspect-ratio: 1;
  width: 4vw;
  -webkit-mask: url(../img/common/ic_heading.svg) no-repeat;
  -webkit-mask-size: contain;
  mask: url(../img/common/ic_heading.svg) no-repeat;
  mask-size: contain;
  background: var(--color-light-purple);
}

.cmn-grouping-section-box {
  background: rgba(var(--color-white-rgb), 0.25);
  margin-left: -2vw;
  margin-right: -2vw;
  margin-top: -16vw;
  border-radius: 4vw;
  padding: 16vw 0 10.6666666667vw 0;
}

.cmn-grouping-intro {
  display: flex;
  flex-direction: column;
  gap: 6.6666666667vw;
  padding-inline: 3.3333333333vw;
}

.cmn-grouping-intro.mt {
  margin-top: 6vw;
}

.cmn-grouping-intro.gap-l {
  gap: 10.6666666667vw;
}

.cmn-grouping-detail {
  display: flex;
  flex-direction: column;
  gap: 5.3333333333vw;
}

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

.cmn-button {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 92vw;
}

.cmn-button .button {
  width: 100%;
  filter: drop-shadow(0px 1.6vw 0px rgba(var(--color-font-rgb), 0.6));
  transform: translateZ(0);
}

.cmn-button .button-frame {
  display: flex;
}

.cmn-button .button-frame::before,
.cmn-button .button-frame::after {
  content: "";
  background: url(../img/common/btn_frame.webp) no-repeat;
  background-size: auto 100%;
  aspect-ratio: 74/190;
  width: 9.3333333333vw;
}

.cmn-button .button-frame::before {
  transform: translateX(1px);
}

.cmn-button .button-frame::after {
  transform: translateX(-1px) scale(-1, 1);
}

.cmn-button .button-body {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  background: url(../img/common/btn_body.webp) no-repeat;
  background-size: 100% 100%;
  gap: 4vw;
}

.cmn-button .button-icon {
  filter: drop-shadow(2px 2px 0px var(--color-purple));
}

.cmn-button .button-icon::before {
  content: "";
  display: block;
  background: var(--color-white);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  aspect-ratio: 8/12;
  width: 2.6666666667vw;
}

.cmn-button .button-text {
  text-shadow: 2px 2px 0px var(--color-purple);
  font-weight: 900;
  letter-spacing: 0.05em;
  font-size: 6.4vw;
}

.cmn-button .button[target=_blank] .button-body .button-icon::before {
  display: none;
}

.cmn-button .button[target=_blank] .button-body .button-icon::after {
  content: "";
  display: block;
  background: url(../img/common/ic_link.svg) no-repeat center/contain;
  background-size: 1em;
  width: 1em;
  height: 1em;
}

.cmn-button .button.button-slim .button-frame::before,
.cmn-button .button.button-slim .button-frame::after {
  width: 6.6666666667vw;
}

.cmn-button .button.button-slim .button-text {
  font-size: 4.8vw;
}

.cmn-button .button.button-back .button-body {
  flex-direction: row-reverse;
}

.cmn-button .button.button-back .button-icon::before {
  transform: scale(-1, 1);
}

.cmn-button-block {
  display: flex;
  justify-content: center;
  gap: 6vw;
}

.cmn-button-icon {
  width: 12.8vw;
}

.cmn-button-icon .button {
  display: block;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  filter: drop-shadow(0px 1.6vw 0px rgba(var(--color-font-rgb), 0.6));
}

.cmn-button-icon .button.prev {
  background-image: url(../img/common/ic_next.webp);
  transform: scale(-1, 1);
}

.cmn-button-icon .button.list {
  background-image: url(../img/common/ic_list.webp);
}

.cmn-button-icon .button.next {
  background-image: url(../img/common/ic_next.webp);
}

.button-s-wrap {
  display: flex;
  justify-content: center;
  gap: 2.6666666667vw;
}

.cmn-button-s {
  display: flex;
  justify-content: center;
  width: 44.2666666667vw;
}

.cmn-button-s .button {
  position: relative;
  width: 100%;
  border: 2px solid var(--color-white);
  border-radius: 10.6666666667vw;
  overflow: hidden;
  filter: drop-shadow(0px 0.8vw 0px rgba(var(--color-font-rgb), 0.6));
  transform: translateZ(0);
}

.cmn-button-s .button-body {
  width: 100%;
  color: var(--color-white);
  background: #c49aff;
  padding: 2.6666666667vw 0;
}

.cmn-button-s .button-icon {
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  filter: drop-shadow(2px 2px 0px var(--color-purple));
  background: url(../img/common/ic_link.svg) no-repeat center/contain;
  background-size: contain;
  width: 1em;
  height: 1em;
  font-size: 4.2666666667vw;
}

.cmn-button-s .button-text {
  text-align: center;
  text-shadow: 2px 2px 0px var(--color-purple);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 4.2666666667vw;
}

.global_header {
  position: relative;
  z-index: 9999;
}

.global_header .toplogo {
  position: fixed;
  z-index: 10;
  top: min(7.5px, 1.3333333333vw);
  left: min(15px, 2.6666666667vw);
}

[lang=ja] .global_header .toplogo {
  width: min(90px, 16vw);
}

[lang=zh-cmn-Hans] .global_header .toplogo {
  width: min(105px, 18.6666666667vw);
}

[lang=zh-cmn-Hant] .global_header .toplogo {
  width: min(105px, 18.6666666667vw);
}

.global_header .toplogo img {
  transition: transform 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.global_header .toplogo[data-visible=false] img {
  transform: translate3d(0, -120px, 0);
}

.global_header #menu-check {
  display: none;
}

main:has(.purchase) + footer .banner {
  padding-top: 18.6666666667vw;
}

footer {
  background: var(--color-bg);
  position: relative;
  z-index: 90;
}

footer .banner {
  display: flex;
  justify-content: center;
}

footer .banner a {
  filter: drop-shadow(0px 1.6vw 0px rgba(var(--color-font-rgb), 0.6));
  transform: translateZ(0);
  width: 92vw;
}

footer .banner a .release {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  margin: 0 auto;
  background: var(--color-white);
  padding: 1.6vw 5.3333333333vw;
  border-radius: 8vw;
  gap: 2.6666666667vw;
  margin-bottom: -4vw;
}

footer .banner a .text {
  font-weight: 900;
  color: var(--color-purple);
  font-size: 3.7333333333vw;
}

footer .banner a .icon {
  transform: translateY(0.5333333333vw);
  width: 5.3333333333vw;
}

footer .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9.3333333333vw;
  padding: 12vw 0 21.3333333333vw 0;
}

footer .shares {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 8vw;
}

footer .shares a {
  width: 15.4666666667vw;
}

footer .language {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 4vw;
}

footer .language a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-light-purple);
  border-radius: 100px;
  border: 2px solid var(--color-white);
  width: 28vw;
  padding: 2.4vw 0;
  overflow: hidden;
}

footer .language a::after {
  font-family: "icon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  color: var(--color-white);
  font-size: 3.7333333333vw;
  transition: all 200ms;
}

footer .language a[hreflang=ja]::after {
  content: "\e900";
}

footer .language a[hreflang=zh-cmn-Hans]::after {
  content: "\e901";
}

footer .language a[hreflang=zh-cmn-Hant]::after {
  content: "\e902";
}

[lang=ja] footer .language a[hreflang=ja] {
  pointer-events: none;
  background: #fff;
}

[lang=ja] footer .language a[hreflang=ja]::after {
  color: var(--color-font);
}

[lang=zh-cmn-Hans] footer .language a[hreflang=zh-cmn-Hans] {
  pointer-events: none;
  background: #fff;
}

[lang=zh-cmn-Hans] footer .language a[hreflang=zh-cmn-Hans]::after {
  color: var(--color-font);
}

[lang=zh-cmn-Hant] footer .language a[hreflang=zh-cmn-Hant] {
  pointer-events: none;
  background: #fff;
}

[lang=zh-cmn-Hant] footer .language a[hreflang=zh-cmn-Hant]::after {
  color: var(--color-font);
}

footer .official {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 5.3333333333vw;
  width: 73.3333333333vw;
  margin: 0 auto;
}

footer .official a {
  position: relative;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1em;
  color: var(--color-font);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 3.7333333333vw;
}

@keyframes width100 {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

footer .official a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 2px;
  width: 100%;
  background: var(--color-white);
}

footer .official a::after {
  content: "";
  display: block;
  aspect-ratio: 1;
  background: url(../img/common/ic_link.webp) no-repeat;
  background-size: contain;
  width: 5.3333333333vw;
}

footer .copyright,
footer .caution {
  font-weight: 700;
  font-size: 3.7333333333vw;
  line-height: 1.56;
  letter-spacing: 0.1em;
}

footer .caution {
  margin-top: -1em;
}

.pagetop {
  position: fixed;
  z-index: 800;
  aspect-ratio: 1;
  background: url("../img/common/ic_pagetop.webp") center no-repeat;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0px 1.6vw 0px rgba(var(--color-font-rgb), 0.8));
  right: 2.1333333333vw;
  bottom: 2.1333333333vw;
  width: 11.4666666667vw;
}

.pagetop[data-visible=true] {
  opacity: 1;
  pointer-events: auto;
}

:where(body) {
  overflow-x: clip;
  color: var(--color-font);
  background-color: var(--color-bg);
  background-repeat: repeat;
  background-position: center -10.6666666667vw;
  background-size: 29.3333333333vw auto;
}

.anywhere {
  overflow-wrap: anywhere;
}

main:has(.cmn-heading-l2),
main:has(.cmn-heading-l3) {
  padding-bottom: 1.3333333333vw;
}

@media screen and (min-width: 768px) {
  .cmn-fs-m {
    font-size: min(18px, min( calc(18 / 1440 * 100vw)));
  }

  .cmn-fs-s {
    font-size: min(16px, min( calc(16 / 1440 * 100vw)));
  }

  .cmn-container-l2 .inner {
    width: min(1024px, min( calc(1024 / 1440 * 100vw)));
    gap: min(80px, min( calc(80 / 1440 * 100vw)));
    padding: min(80px, min( calc(80 / 1440 * 100vw))) 0;
  }

  .cmn-container-l3::after {
    --bg-height: calc(30 / 1440 * 100vw);
    --bg-width: calc(1960 / 1440 * 100vw);
  }

  .cmn-container-l3 .inner {
    width: min(1024px, min( calc(1024 / 1440 * 100vw)));
    gap: min(80px, min( calc(80 / 1440 * 100vw)));
    padding: min(120px, min( calc(120 / 1440 * 100vw))) 0 min(80px, min( calc(80 / 1440 * 100vw))) 0;
  }

  .cmn-container-l3.pb0 .inner {
    padding-bottom: 0;
  }

  .inner > div > .cmn-image .image,
  .cmn-grouping-intro + .cmn-image .image {
    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));
  }

  .inner > div > .cmn-image .image figure,
  .cmn-grouping-intro + .cmn-image .image figure,
  .inner > div > .cmn-image .image picture,
  .cmn-grouping-intro + .cmn-image .image picture {
    padding: 0 min(15px, min( calc(15 / 1440 * 100vw)));
  }

  .cmn-image + .cmn-grouping-intro {
    padding-top: min(80px, min( calc(80 / 1440 * 100vw)));
  }

  .cmn-grouping-intro + .cmn-image {
    padding: min(80px, min( calc(80 / 1440 * 100vw))) min(90px, min( calc(90 / 1440 * 100vw))) 0 min(90px, min( calc(90 / 1440 * 100vw)));
  }

  .cmn-grouping-intro + .cmn-image.col-1-m {
    width: min(640px, min( calc(640 / 1440 * 100vw)));
  }

  .cmn-grouping-intro + .cmn-image.col-2 {
    grid-template-columns: 1fr 1fr;
    gap: min(30px, min( calc(30 / 1440 * 100vw)));
  }

  .cmn-grouping-intro + .cmn-image .image {
    --ng-mg: max(-35px, max(calc(-35 / 1440 * 100vw)));
  }

  .cmn-grouping-intro + .cmn-image.col-1-m .image {
    --ng-mg: max(-40px, max(calc(-40 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image {
    width: min(1028px, min( calc(1028 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.col-1-l {
    width: min(1028px, min( calc(1028 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.col-1-m {
    width: min(640px, min( calc(640 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.col-1 {
    width: min(499px, min( calc(499 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.col-1.mt-min {
    margin-top: max(-10px, max( calc(-10 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.col-2 {
    grid-template-columns: 1fr 1fr;
    gap: min(30px, min( calc(30 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.col-3 {
    width: min(864px, min( calc(864 / 1440 * 100vw)));
    grid-template-columns: 1fr 1fr 1fr;
    gap: min(30px, min( calc(30 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.col-1-l:not(:last-child),
  .inner > div > .cmn-image.col-1:not(:last-child),
  .inner > div > .cmn-image.col-2:not(:last-child) {
    margin-bottom: min(30px, min( calc(30 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.narrow.col-2 {
    width: min(868px, min( calc(868 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.narrow.col-2 .image {
    --ng-mg: max(-36px, max(calc(-36 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.narrow.col-1 {
    width: min(419px, min( calc(419 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.narrow.col-1 .image {
    --ng-mg: max(-36px, max(calc(-36 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image .image {
    --ng-mg: max(-45px, max(calc(-45 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.col-1-l .image {
    --ng-mg: max(-108px, max(calc(-108 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.col-1-m .image {
    --ng-mg: max(-62px, max(calc(-62 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.col-3 .image {
    --ng-mg: max(-22px, max(calc(-22 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image.col-3 figure,
  .inner > div > .cmn-image.col-3 picture {
    padding: 0 min(10px, min( calc(10 / 1440 * 100vw)));
  }

  .inner > div > .cmn-image .caption {
    font-size: min(16px, min( calc(16 / 1440 * 100vw)));
  }

  .cmn-fs-ss {
    font-size: min(14px, min( calc(14 / 1440 * 100vw)));
  }

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

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

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

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

  .cmn-grouping-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));
  }

  .cmn-grouping-heading .heading-ill-body,
  .cmn-grouping-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)));
  }

  .cmn-grouping-heading .heading-frame.width-s {
    width: min(383px, min( calc(383 / 1440 * 100vw)));
  }

  .cmn-grouping-heading .heading-frame.width-l {
    width: min(855px, min( calc(855 / 1440 * 100vw)));
  }

  .cmn-grouping-heading .heading-frame.row-1 {
    height: min(100px, min( calc(100 / 1440 * 100vw)));
  }

  .cmn-grouping-heading .heading-frame.row-2 {
    height: min(100px, min( calc(100 / 1440 * 100vw)));
  }

  .cmn-grouping-heading .heading-frame.row-2-pc {
    height: min(136px, min( calc(136 / 1440 * 100vw)));
  }

  .cmn-grouping-heading .heading-frame.row-3 {
    height: min(171px, min( calc(171 / 1440 * 100vw)));
  }

  .cmn-grouping-heading .heading-frame.width-s.row-1 {
    background-size: min(223px, min( calc(223 / 1440 * 100vw))) auto;
  }

  .cmn-grouping-heading .heading-frame.width-l.row-1 {
    background-image: url(../img/common/bg_cloud_row1.webp), url(../img/common/bg_cloud_row1.webp), url(../img/common/bg_cloud_row1.webp), url(../img/common/bg_cloud_row1.webp), url(../img/common/bg_cloud_row1.webp);
    background-position: left top, min(158px, min( calc(158 / 1440 * 100vw))) top, min(316px, min( calc(316 / 1440 * 100vw))) top, min(474px, min( calc(474 / 1440 * 100vw))) top, right top;
    background-size: min(223px, min( calc(223 / 1440 * 100vw))) auto;
  }

  .cmn-grouping-heading .heading-frame.width-l.row-2 {
    background-image: url(../img/common/bg_cloud_row1.webp), url(../img/common/bg_cloud_row1.webp), url(../img/common/bg_cloud_row1.webp), url(../img/common/bg_cloud_row1.webp), url(../img/common/bg_cloud_row1.webp);
    background-position: left top, min(158px, min( calc(158 / 1440 * 100vw))) top, min(316px, min( calc(316 / 1440 * 100vw))) top, min(474px, min( calc(474 / 1440 * 100vw))) top, right top;
    background-size: min(223px, min( calc(223 / 1440 * 100vw))) auto;
  }

  .cmn-grouping-heading .heading-frame.width-l.row-2-pc {
    background-image: url(../img/common/bg_cloud_row2.webp), url(../img/common/bg_cloud_row2.webp), url(../img/common/bg_cloud_row2.webp), url(../img/common/bg_cloud_row2.webp), url(../img/common/bg_cloud_row2.webp);
    background-position: left top, min(158px, min( calc(158 / 1440 * 100vw))) top, min(316px, min( calc(316 / 1440 * 100vw))) top, min(474px, min( calc(474 / 1440 * 100vw))) top, right top;
    background-size: min(223px, min( calc(223 / 1440 * 100vw))) auto;
  }

  .cmn-grouping-heading .heading-frame.width-l.row-3 {
    background-image: url(../img/common/bg_cloud_row3.webp), url(../img/common/bg_cloud_row3.webp), url(../img/common/bg_cloud_row3.webp), url(../img/common/bg_cloud_row3.webp), url(../img/common/bg_cloud_row3.webp);
    background-position: left top, min(158px, min( calc(158 / 1440 * 100vw))) top, min(316px, min( calc(316 / 1440 * 100vw))) top, min(474px, min( calc(474 / 1440 * 100vw))) top, right top;
    background-size: min(223px, min( calc(223 / 1440 * 100vw))) auto;
  }

  .cmn-grouping-heading .heading-frame.normal {
    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)));
  }

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

  .cmn-heading.type-h3 {
    font-size: min(24px, min( calc(24 / 1440 * 100vw)));
    padding-left: min(30px, min( calc(30 / 1440 * 100vw)));
  }

  .cmn-heading.type-h3::before {
    top: min(8px, min( calc(8 / 1440 * 100vw)));
    width: min(20px, min( calc(20 / 1440 * 100vw)));
  }

  .cmn-heading.pos-center {
    justify-content: center;
    font-size: min(24px, min( calc(24 / 1440 * 100vw)));
    gap: min(10px, min( calc(10 / 1440 * 100vw)));
  }

  .cmn-heading.pos-center::before {
    width: min(20px, min( calc(20 / 1440 * 100vw)));
  }

  .cmn-grouping-section-box {
    margin-left: 0;
    margin-right: 0;
    margin-top: max(-90px, max( calc(-90 / 1440 * 100vw)));
    border-radius: min(30px, min( calc(30 / 1440 * 100vw)));
    padding: min(90px, min( calc(90 / 1440 * 100vw))) 0 min(80px, min( calc(80 / 1440 * 100vw))) 0;
  }

  .cmn-grouping-intro {
    gap: min(40px, min( calc(40 / 1440 * 100vw)));
    padding-inline: min(90px, min( calc(90 / 1440 * 100vw)));
  }

  .cmn-grouping-intro.mt {
    margin-top: min(45px, min( calc(45 / 1440 * 100vw)));
  }

  .cmn-grouping-intro.gap-s {
    gap: min(30px, min( calc(30 / 1440 * 100vw)));
  }

  .cmn-grouping-intro.gap-l {
    gap: min(50px, min( calc(50 / 1440 * 100vw)));
  }

  .cmn-grouping-detail {
    gap: min(25px, min( calc(25 / 1440 * 100vw)));
  }

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

  .cmn-button {
    width: auto;
  }

  .cmn-button .button {
    width: auto;
    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;
  }

  .cmn-button .button-frame::before,
  .cmn-button .button-frame::after {
    width: min(37px, min( calc(37 / 1440 * 100vw)));
  }

  .cmn-button .button-body {
    gap: min(15px, min( calc(15 / 1440 * 100vw)));
    padding: 0 min(55px, min( calc(55 / 1440 * 100vw)));
  }

  .cmn-button .button-icon::before {
    width: min(8px, min( calc(8 / 1440 * 100vw)));
  }

  .cmn-button .button-text {
    font-size: min(24px, min( calc(24 / 1440 * 100vw)));
  }

  .cmn-button .button.button-slim .button-frame::before,
  .cmn-button .button.button-slim .button-frame::after {
    width: min(28px, min( calc(28 / 1440 * 100vw)));
  }

  .cmn-button .button.button-slim .button-body {
    min-width: min(180px, min( calc(180 / 1440 * 100vw)));
    padding: 0 min(20px, min( calc(20 / 1440 * 100vw)));
  }

  .cmn-button .button.button-slim .button-text {
    font-size: min(18px, min( calc(18 / 1440 * 100vw)));
  }

  .cmn-button-block {
    gap: min(50px, min( calc(50 / 1440 * 100vw)));
  }

  .cmn-button-icon {
    width: min(76px, min( calc(76 / 1440 * 100vw)));
  }

  .cmn-button-icon .button {
    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;
  }

  .button-s-wrap {
    gap: min(30px, min( calc(30 / 1440 * 100vw)));
  }

  .cmn-button-s {
    width: min(180px, min( calc(180 / 1440 * 100vw)));
  }

  .cmn-button-s .button {
    border-radius: min(40px, min( calc(40 / 1440 * 100vw)));
    filter: drop-shadow(0px min(4px, min( calc(4 / 1440 * 100vw))) 0px rgba(var(--color-font-rgb), 0.6));
    transition: filter 0.2s, transform 0.2s;
  }

  .cmn-button-s .button-body {
    padding: min(10px, min( calc(10 / 1440 * 100vw))) 0;
  }

  .cmn-button-s .button-icon {
    font-size: min(16px, min( calc(16 / 1440 * 100vw)));
  }

  .cmn-button-s .button-text {
    font-size: min(16px, min( calc(16 / 1440 * 100vw)));
  }

  .global_header .toplogo {
    top: 10px;
    left: 20px;
  }

  [lang=ja] .global_header .toplogo {
    width: 118px;
  }

  [lang=zh-cmn-Hans] .global_header .toplogo {
    width: 140px;
  }

  [lang=zh-cmn-Hant] .global_header .toplogo {
    width: 140px;
  }

  main:has(.purchase) + footer .banner {
    padding-top: min(100px, min( calc(100 / 1440 * 100vw)));
  }

  footer .banner a {
    width: 684px;
    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;
  }

  footer .banner a .release {
    padding: 10px 30px;
    border-radius: 60px;
    gap: 10px;
    margin-bottom: -26px;
  }

  footer .banner a .text {
    font-size: 20px;
  }

  footer .banner a .icon {
    transform: translateY(2px);
    width: 20px;
  }

  footer .inner {
    gap: min(40px, min( calc(40 / 1440 * 100vw)));
    padding: 50px 0 80px 0;
  }

  footer .shares {
    gap: 30px;
  }

  footer .shares a {
    width: 58px;
    transition: transform 0.2s;
  }

  footer .language {
    gap: 30px;
  }

  footer .language a {
    width: 180px;
    padding: 12px 0;
  }

  footer .language a::after {
    font-size: 14px;
  }

  footer .official {
    flex-direction: row;
    gap: 30px;
    width: auto;
  }

  footer .official a {
    font-size: 14px;
    gap: 6px;
  }

  footer .official a::after {
    width: 20px;
  }

  footer .copyright,
  footer .caution {
    font-size: 14px;
    text-align: center;
  }

  .pagetop {
    filter: drop-shadow(0px min(8px, min( calc(8 / 1440 * 100vw))) 0px rgba(var(--color-font-rgb), 0.8));
    right: 20px;
    bottom: 20px;
    width: 64px;
    transition: opacity 0.3s, filter 0.2s, transform 0.2s;
  }

  :where(body) {
    background-position: center bottom;
    background-size: 158px auto;
  }

  ._only_sp {
    display: none;
  }

  main:has(.cmn-heading-l2),
  main:has(.cmn-heading-l3) {
    padding-bottom: 10px;
  }
}

@media screen and (min-width: 768px) and (hover: hover) {
  .cmn-text-link:hover {
    border: none;
  }

  .cmn-button .button:hover {
    transform: translateY(min(8px, min( calc(8 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  .cmn-button-icon .button:hover {
    transform: translateY(min(8px, min( calc(8 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  .cmn-button-icon .button:hover.prev {
    transform: translateY(min(8px, min( calc(8 / 1440 * 100vw)))) scale(-1, 1);
  }

  .cmn-button-s .button:hover {
    transform: translateY(min(4px, min( calc(4 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  footer .banner a:hover {
    transform: translateY(min(8px, min( calc(8 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  footer .shares a:hover {
    transform: scale(1.1);
  }

  footer .official a:hover::before {
    animation: width100 0.4s linear;
  }

  .pagetop:hover {
    transform: translateY(min(8px, min( calc(8 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.8));
  }
}

@media screen and (min-width: 768px) and (-ms-high-contrast: active), screen and (min-width: 768px) and (-ms-high-contrast: none) {
  .cmn-text-link:hover {
    border: none;
  }

  .cmn-button .button:hover {
    transform: translateY(min(8px, min( calc(8 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  .cmn-button-icon .button:hover {
    transform: translateY(min(8px, min( calc(8 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  .cmn-button-icon .button:hover.prev {
    transform: translateY(min(8px, min( calc(8 / 1440 * 100vw)))) scale(-1, 1);
  }

  .cmn-button-s .button:hover {
    transform: translateY(min(4px, min( calc(4 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  footer .banner a:hover {
    transform: translateY(min(8px, min( calc(8 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

  footer .shares a:hover {
    transform: scale(1.1);
  }

  footer .official a:hover::before {
    animation: width100 0.4s linear;
  }

  .pagetop:hover {
    transform: translateY(min(8px, min( calc(8 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.8));
  }
}

@media screen and (min-width: 768px) and (min-width: 1024px) {
  .cmn-grouping-section-box {
    margin-left: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 767.8px) {
  .cmn-container-l3::after {
    mask-position: -100px top, bottom;
    -webkit-mask-position: -100px top, bottom;
  }

  .inner > div > .cmn-image.narrow {
    margin-left: -1.3333333333vw;
    margin-right: -1.3333333333vw;
  }

  .cmn-list-dot li {
    text-indent: -0.5em;
    margin-left: 0.5em;
  }

  .cmn-list-no li {
    text-indent: -1.2em;
    margin-left: 1.2em;
  }

  .cmn-list-caution li {
    text-indent: -1em;
    margin-left: 1em;
  }

  .cmn-grouping-intro .cmn-button {
    width: 100%;
  }

  .cmn-button .button.button-slim.row3-sp .button-frame::before,
  .cmn-button .button.button-slim.row3-sp .button-frame::after {
    width: 8.6666666667vw;
  }

  .cmn-button .button.button-slim.row3-sp .button-text {
    text-align: center;
    line-height: 1.2;
    font-size: 4.5333333333vw;
  }

  footer .copyright,
  footer .caution {
    padding-left: 4vw;
    padding-right: 4vw;
  }

  ._only_pc {
    display: none;
  }
}

@media (hover: hover) {
  .global_header .toplogo:hover img {
    transform: none;
  }

  footer .language a:hover {
    background: #fff;
  }

  footer .language a:hover::after {
    color: var(--color-font);
  }

  footer .language:has(a:hover) a:not(:hover) {
    background: var(--color-light-purple);
  }

  footer .language:has(a:hover) a:not(:hover)::before {
    opacity: 0.2;
  }

  footer .language:has(a:hover) a:not(:hover)::after {
    color: var(--color-white);
  }
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .global_header .toplogo:hover img {
    transform: none;
  }

  footer .language a:hover {
    background: #fff;
  }

  footer .language a:hover::after {
    color: var(--color-font);
  }
}