#scene4 .title,
#scene3 h2,
#scene2 .scene2-title h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.1em;
  font-weight: 900;
  color: var(--color-white);
  text-shadow: 2px 2px 0px var(--color-font-shadow);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/toppage/bg_title@sp.webp);
  aspect-ratio: 473/180;
  width: 63.0666666667vw;
  font-size: 8.5333333333vw;
  padding-bottom: 2.6666666667vw;
}

#scene3 .scene3-1 .release-wrap,
#scene3 .scene3-2 .release-wrap,
#scene2 .scene2-title .release-wrap {
  position: relative;
  aspect-ratio: 440/140;
  width: 93.3333333333vw;
}

#scene3 .scene3-1 .release,
#scene3 .scene3-2 .release,
#scene2 .scene2-title .release {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-white);
  color: var(--color-purple);
  aspect-ratio: 400/78;
  font-weight: 900;
  letter-spacing: 0.05em;
  filter: drop-shadow(1.6vw 1.6vw 2.6666666667vw rgba(var(--color-font-rgb), 0.25));
  border-radius: 10.6666666667vw;
  width: 85.3333333333vw;
  font-size: 7.2vw;
}

#scene3 .scene3-1 .balloon,
#scene3 .scene3-2 .balloon,
#scene2 .scene2-title .balloon {
  position: relative;
  width: 100%;
  height: 100%;
}

#scene3 .scene3-1 .balloon svg,
#scene3 .scene3-2 .balloon svg,
#scene2 .scene2-title .balloon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

main {
  position: relative;
}

header .toplogo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

header #menu-check:checked ~ .toplogo {
  opacity: 1;
  pointer-events: auto;
}

#kv {
  position: relative;
  z-index: 90;
  width: 100vw;
  height: 100vw;
}

#kv .bg {
  position: relative;
  --bg-height: 30px;
  --bg-width: 1960px;
  mask-image: url("../img/toppage/kv_mask.svg"), linear-gradient(to top, rgba(0, 0, 0, 0) var(--bg-height), rgb(0, 0, 0) var(--bg-height));
  -webkit-mask-image: url("../img/toppage/kv_mask.svg"), linear-gradient(to top, 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 bottom, top;
  -webkit-mask-position: left bottom, top;
  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%;
  padding-top: 13.3333333333vw;
}

#kv .bg img {
  width: 100%;
  object-fit: cover;
  height: 100vw;
}

#kv .switch {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  background: #e60012;
  width: 100vw;
  height: 13.3333333333vw;
}

#kv .switch img {
  width: 13.3333333333vw;
}

#kv .logo {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  filter: drop-shadow(1.6vw 1.6vw 2.6666666667vw rgba(var(--color-font-rgb), 0.25));
  top: 40.6666666667vw;
  width: 48.2666666667vw;
}

.is-loaded #kv .logo img {
  animation: poyon 0.8s linear 0.5s;
}

#kv .ill {
  position: absolute;
  left: 2.1333333333vw;
  top: 14.6666666667vw;
  width: 41.8666666667vw;
}

#kv .release-wrap {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  top: 93.3333333333vw;
  width: 120vw;
  aspect-ratio: 443/324;
}

#kv .release {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-white);
  color: var(--color-purple);
  font-weight: 900;
  letter-spacing: 0.05em;
  aspect-ratio: 722/430;
  filter: drop-shadow(1.6vw 1.6vw 2.6666666667vw rgba(var(--color-font-rgb), 0.25));
  border-radius: 26.6666666667vw;
  width: 96.2666666667vw;
  gap: 2.9333333333vw;
}

#kv .release:has(.cmn-button) {
  padding-bottom: 1.6vw;
}

#kv .title-sub {
  position: relative;
  font-size: 4.8vw;
}

#kv .title-sub::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  width: 100%;
  background-image: linear-gradient(90deg, rgb(193, 233, 94), rgb(229, 245, 115));
  height: 4vw;
  bottom: -0.8vw;
}

#kv .title {
  line-height: 1.25;
  font-size: 6.4vw;
}

#kv .line {
  width: 74.6666666667vw;
}

[lang=ja] #kv .status1 {
  line-height: 1.25;
  font-size: 6.4vw;
}

[lang=zh-cmn-Hans] #kv .status1 {
  font-size: 7.2vw;
}

[lang=zh-cmn-Hant] #kv .status1 {
  font-size: 7.2vw;
}

#kv .status2 {
  font-size: 7.2vw;
}

#kv .cmn-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -11.3333333333vw;
  width: 65.3333333333vw;
}

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

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

#kv .cmn-button .button-body {
  padding: 4vw 0.8vw;
  gap: 1.6vw;
}

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

#kv .cmn-button .button-icon::after {
  font-size: 4.8vw;
}

#kv .balloon {
  position: relative;
  width: 100%;
  height: 100%;
}

#kv .balloon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#kv #release-balloon {
  fill: url(#grad);
  fill-rule: evenodd;
}

#kv .fluffy {
  background: url(../img/toppage/kv_ill_01.webp) no-repeat;
  background-size: contain;
  position: absolute;
  aspect-ratio: 110/304;
  position: absolute;
  width: 14.6666666667vw;
  top: -4vw;
  left: 13.3333333333vw;
  animation: fluffy 3s infinite;
}

video,
.bg {
  transform: translateZ(0);
  backface-visibility: hidden;
}

#scene1 {
  position: relative;
  z-index: 20;
  margin-top: -5vh;
  height: 280vh;
}

#scene1 .bg {
  position: fixed;
  inset: 0;
  transform: translateY(100%);
  will-change: transform;
  overflow: hidden;
}

#scene1 .video-wrap,
#scene1 video {
  position: relative;
  width: 100%;
  height: 100%;
}

#scene1 video {
  object-fit: cover;
}

#scene2 {
  position: relative;
  z-index: 80;
  padding-bottom: 100vh;
}

#scene2 .bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100lvh + 40px);
  -webkit-clip-path: url(#scene2ClipSp);
  clip-path: url(#scene2ClipSp);
  --bg-height: 30px;
  --bg-width: 1960px;
  -webkit-mask-image: url("../img/toppage/kv_mask.svg"), linear-gradient(to top, rgba(0, 0, 0, 0) var(--bg-height), rgb(0, 0, 0) var(--bg-height));
  mask-image: url("../img/toppage/kv_mask.svg"), linear-gradient(to top, rgba(0, 0, 0, 0) var(--bg-height), rgb(0, 0, 0) var(--bg-height));
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: left bottom, top;
  mask-position: left bottom, top;
  -webkit-mask-size: var(--bg-width) calc(var(--bg-height) + 1px), 100% 100%;
  mask-size: var(--bg-width) calc(var(--bg-height) + 1px), 100% 100%;
}

#scene2 .bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

#scene2 .bg picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#scene2 .bg-mask-svg {
  position: absolute;
  width: 100vw;
  height: 100lvh;
  pointer-events: none;
  opacity: 0;
}

#scene2 .inner {
  position: relative;
  z-index: 35;
  width: min(1200px, 90%);
  margin-inline: auto;
  margin-bottom: 30vh;
  padding-top: 100vh;
}

#scene2 .scene2-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: min(120px, min( calc(120 / 1440 * 100vw)));
}

#scene2 .scene2-title .logo {
  width: 90.6666666667vw;
  margin-bottom: 7.3333333333vw;
}

#scene2 .scene2-title #scene2-balloon {
  fill: url(#scene2-grad);
  fill-rule: evenodd;
  opacity: 0.9;
}

#scene2 .scene2-title .ill {
  width: 65.8666666667vw;
  margin-top: 2.6666666667vw;
  margin-right: auto;
}

#scene2 .scene2-lead {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  margin-bottom: 17.3333333333vw;
}

#scene2 .scene2-lead .image-wrap {
  position: relative;
  transform: rotate(-5deg);
}

#scene2 .scene2-lead .image {
  --ng-mg: -9.2vw;
  display: flex;
  flex-direction: column;
  width: 100%;
}

#scene2 .scene2-lead .image::before,
#scene2 .scene2-lead .image::after {
  content: "";
  position: relative;
  z-index: -1;
  aspect-ratio: 496/61;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#scene2 .scene2-lead .image::before {
  background-image: url(../img/common/card_top.svg);
  margin-bottom: var(--ng-mg);
}

#scene2 .scene2-lead .image::after {
  background-image: url(../img/common/card_bottom.svg);
  margin-top: var(--ng-mg);
}

#scene2 .scene2-lead .image figure,
#scene2 .scene2-lead .image picture {
  display: block;
  background: url(../img/common/card_repeat.svg) repeat-y;
  background-size: 100% auto;
  padding: 0 2vw;
}

#scene2 .scene2-lead .image figure img,
#scene2 .scene2-lead .image picture img {
  aspect-ratio: 1920/1080;
}

#scene2 .scene2-lead .image {
  will-change: transform;
  filter: drop-shadow(0 1.0666666667vw 2.6666666667vw rgba(0, 0, 0, 0.25)) drop-shadow(0 2.6666666667vw 8vw rgba(64, 98, 164, 0.45)) drop-shadow(0 1.0666666667vw 2.6666666667vw rgba(0, 0, 0, 0.25)) drop-shadow(0 2.6666666667vw 8vw rgba(64, 98, 164, 0.45));
}

#scene2 .scene2-lead .lead {
  position: relative;
  z-index: 1;
}

[lang=ja] #scene2 .scene2-lead .lead {
  width: 36.5333333333vw;
}

[lang=zh-cmn-Hans] #scene2 .scene2-lead .lead {
  width: 26.8vw;
}

[lang=zh-cmn-Hant] #scene2 .scene2-lead .lead {
  width: 26.8vw;
}

#scene2 .scene2-1,
#scene2 .scene2-2,
#scene2 .scene2-shadow {
  will-change: transform;
  filter: drop-shadow(0 1.0666666667vw 2.6666666667vw rgba(0, 0, 0, 0.25)) drop-shadow(0 2.6666666667vw 8vw rgba(64, 98, 164, 0.45)) drop-shadow(0 1.0666666667vw 2.6666666667vw rgba(0, 0, 0, 0.25)) drop-shadow(0 2.6666666667vw 8vw rgba(64, 98, 164, 0.45));
}

#scene2 .scene2-1,
#scene2 .scene2-2,
#scene2 .scene2-3 {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  justify-content: flex-end;
  margin-bottom: 13.3333333333vw;
}

#scene2 .scene2-1 .image,
#scene2 .scene2-2 .image,
#scene2 .scene2-3 .image {
  --ng-mg: -7.2vw;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  width: 73.3333333333vw;
}

#scene2 .scene2-1 .image::before,
#scene2 .scene2-1 .image::after,
#scene2 .scene2-2 .image::before,
#scene2 .scene2-2 .image::after,
#scene2 .scene2-3 .image::before,
#scene2 .scene2-3 .image::after {
  content: "";
  position: relative;
  z-index: -1;
  aspect-ratio: 496/61;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#scene2 .scene2-1 .image::before,
#scene2 .scene2-2 .image::before,
#scene2 .scene2-3 .image::before {
  background-image: url(../img/common/card_top.svg);
  margin-bottom: var(--ng-mg);
}

#scene2 .scene2-1 .image::after,
#scene2 .scene2-2 .image::after,
#scene2 .scene2-3 .image::after {
  background-image: url(../img/common/card_bottom.svg);
  margin-top: var(--ng-mg);
}

#scene2 .scene2-1 .image figure,
#scene2 .scene2-1 .image picture,
#scene2 .scene2-2 .image figure,
#scene2 .scene2-2 .image picture,
#scene2 .scene2-3 .image figure,
#scene2 .scene2-3 .image picture {
  display: block;
  background: url(../img/common/card_repeat.svg) repeat-y;
  background-size: 100% auto;
  padding: 0 2vw;
}

#scene2 .scene2-1 .image figure img,
#scene2 .scene2-1 .image picture img,
#scene2 .scene2-2 .image figure img,
#scene2 .scene2-2 .image picture img,
#scene2 .scene2-3 .image figure img,
#scene2 .scene2-3 .image picture img {
  aspect-ratio: 1920/1080;
}

#scene2 .scene2-1 .text-wrap,
#scene2 .scene2-2 .text-wrap,
#scene2 .scene2-3 .text-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/toppage/bg_cloud@sp.svg);
  aspect-ratio: 690/402;
  width: 92vw;
  margin-top: -13.3333333333vw;
}

#scene2 .scene2-1 .text-wrap .text,
#scene2 .scene2-2 .text-wrap .text,
#scene2 .scene2-3 .text-wrap .text {
  text-align: center;
  font-size: 4.8vw;
}

#scene2 .scene2-1 .image {
  transform: rotate(5deg);
}

#scene2 .scene2-1 .ill {
  position: absolute;
  left: 2vw;
  bottom: -3.3333333333vw;
  width: 17.2vw;
}

#scene2 .scene2-2 .image {
  transform: translateX(1.3333333333vw) rotate(-5deg);
}

#scene2 .scene2-2 .ill {
  position: absolute;
  right: 4.6666666667vw;
  bottom: 6vw;
  width: 11.6vw;
}

#scene2 .scene2-3 {
  margin-bottom: 8vw;
}

#scene2 .scene2-3 .image {
  transform: rotate(5deg);
}

#scene2 .scene2-3 .ill {
  position: absolute;
  left: 0;
  bottom: -4vw;
  width: 22.6666666667vw;
}

#scene2 .scene2-button {
  position: relative;
  z-index: 1;
}

#scene2 .scene2-button .cmn-button .button-body {
  width: 74.6666666667vw;
  overflow: hidden;
}

#scene2 .scene2-button .cmn-button .button-icon,
#scene2 .scene2-button .cmn-button .button-text {
  flex-shrink: 0;
}

#scene2 .scene2-button .cmn-button .button-text {
  font-size: 6.4vw;
}

#scene2 .scene2-caution {
  margin-bottom: 13.3333333333vw;
}

#scene2 .scene2-caution .caution {
  color: var(--color-white);
  line-height: 1.8;
  font-size: 3.7333333333vw;
}

#scene3 {
  position: relative;
  min-height: 600vh;
  z-index: 40;
}

#scene3 .bg1,
#scene3 .bg2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100lvh;
}

#scene3 .bg1 img,
#scene3 .bg2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 0;
}

#scene3 .bg1 {
  z-index: 40;
}

#scene3 .bg2 {
  z-index: 45;
}

#scene3 .inner1,
#scene3 .inner2 {
  position: fixed;
  inset: 0;
  opacity: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100lvh;
  padding-inline: 5vw;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}

#scene3 .scene3-1,
#scene3 .scene3-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#scene3 .scene3-1 .release-wrap,
#scene3 .scene3-2 .release-wrap {
  margin-bottom: 2.6666666667vw;
}

#scene3 .scene3-1 #scene3-1-balloon {
  fill: url(#scene3-1-grad);
  fill-rule: evenodd;
  opacity: 0.9;
}

#scene3 .scene3-2 #scene3-2-balloon {
  fill: url(#scene3-2-grad);
  fill-rule: evenodd;
  opacity: 0.9;
}

#scene3 .scene3-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#scene3 .scene3-text .ill1,
#scene3 .scene3-text .ill2 {
  position: absolute;
  z-index: 1;
}

#scene3 .scene3-text .ill1 {
  width: 24.2666666667vw;
  top: 20.6666666667vw;
  left: -14.6666666667vw;
}

#scene3 .scene3-text .ill2 {
  width: 23.2vw;
  top: 32.6666666667vw;
  right: -13.0666666667vw;
}

#scene3 .scene3-text .text {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  aspect-ratio: 1;
  color: var(--color-purple);
  font-weight: 900;
  width: 56vw;
  font-size: 6.4vw;
}

#scene3 .scene3-text .text::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url(../img/toppage/s3_bg_spin.webp) no-repeat;
  background-size: contain;
  animation: spin 8s linear infinite;
}

#scene3 .scene3-text .caution {
  text-align: center;
  color: var(--color-purple);
  font-size: 3.7333333333vw;
  margin-top: 2.6666666667vw;
}

#scene4 {
  position: relative;
  z-index: 100;
  background-image: linear-gradient(0deg, rgb(181, 179, 252), rgb(226, 205, 255));
  --bg-height: 30px;
  --bg-width: 1960px;
  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%;
  margin-bottom: -1px;
  padding-bottom: 18.6666666667vw;
}

#scene4:has(.purchase) {
  padding-bottom: 1.6vw !important;
}

#scene4 .inner {
  position: relative;
}

#scene4 .button-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.6666666667vw;
  padding-top: 26.6666666667vw;
  margin-bottom: 37.3333333333vw;
}

#scene4 .button-wrap .button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 496/130;
  background: url(../img/toppage/bg_button.svg) no-repeat;
  background-size: 100% auto;
  width: 92vw;
  gap: 4vw;
  filter: drop-shadow(0px 1.6vw 0px rgba(var(--color-font-rgb), 0.6));
}

#scene4 .button-wrap .button .button-text-sub,
#scene4 .button-wrap .button .button-text {
  color: var(--color-purple);
  text-align: center;
  font-weight: 900;
  -webkit-text-stroke: 1.3333333333vw var(--color-white);
  text-stroke: 1.3333333333vw var(--color-white);
  paint-order: stroke;
}

#scene4 .button-wrap .button .button-text-sub {
  font-size: 3.7333333333vw;
}

#scene4 .button-wrap .button .button-text {
  font-size: 6.4vw;
}

#scene4 .button-wrap .button .button-icon {
  width: 4vw;
}

#scene4 .button-wrap .button .button-ill1,
#scene4 .button-wrap .button .button-ill2 {
  position: absolute;
}

#scene4 .button-wrap .button .button-ill1 {
  top: -5.3333333333vw;
  left: 4vw;
  width: 15.2vw;
}

#scene4 .button-wrap .button .button-ill2 {
  right: -2.6666666667vw;
  bottom: -2vw;
  width: 13.8666666667vw;
}

#scene4 .outline {
  position: relative;
  background: rgba(var(--color-white-rgb), 0.9);
  margin: 0 auto;
  border-radius: 4vw;
  width: 97.3333333333vw;
  padding: 21.3333333333vw 2.6666666667vw 14.6666666667vw 2.6666666667vw;
}

#scene4 .outline h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto;
  text-shadow: 2px 2px 0px var(--color-font-shadow);
  aspect-ratio: 713/200;
  background-image: url(../img/toppage/ol_bg_title@sp.webp);
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-white);
  width: 95.0666666667vw;
  font-size: 8.5333333333vw;
  top: -13.3333333333vw;
}

#scene4 .package-wrap {
  display: flex;
  flex-direction: column;
  gap: 9.3333333333vw;
  margin-bottom: 10.6666666667vw;
}

#scene4 .package-wrap .logo {
  margin: 0 auto;
  filter: drop-shadow(8px 8px 10px rgba(var(--color-font-rgb), 0.25));
  width: 40.8vw;
}

#scene4 .package-wrap dl {
  flex: 1;
  position: relative;
  line-height: 2;
  letter-spacing: 0.05em;
  font-size: 3.7333333333vw;
}

#scene4 .package-wrap dl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7.6em;
  background-position: left top;
  background-repeat: repeat-y;
  background-image: radial-gradient(circle, var(--color-light-purple) 0.6666666667vw, transparent 0.6666666667vw);
  background-size: 1.3333333333vw 2.1333333333vw;
  width: 1.3333333333vw;
  height: 100%;
}

#scene4 .package-wrap dl div {
  display: flex;
  gap: 6.6666666667vw;
}

#scene4 .package-wrap dl div dt {
  width: 7em;
  text-align: right;
}

#scene4 .package-wrap dl div dd {
  flex: 1;
}

#scene4 .package-wrap dl div dd .indent {
  display: block;
  text-indent: -1.05em;
  margin-left: 1.05em;
}

#scene4 .caution {
  line-height: 1.8;
  font-size: 3.7333333333vw;
}

#scene4 div[class^=ill] {
  position: absolute;
  filter: drop-shadow(8px 8px 10px rgba(var(--color-font-rgb), 0.25));
}

#scene4 .ill1 {
  width: min(100px, min( calc(100 / 1440 * 100vw)));
  top: min(100px, min( calc(100 / 1440 * 100vw)));
  right: max(-80px, max( calc(-80 / 1440 * 100vw)));
}

#scene4 .ill2 {
  width: min(102px, min( calc(102 / 1440 * 100vw)));
  bottom: min(230px, min( calc(230 / 1440 * 100vw)));
  left: max(-40px, max( calc(-40 / 1440 * 100vw)));
}

#scene4 .ill3 {
  width: min(102px, min( calc(102 / 1440 * 100vw)));
  bottom: max(-60px, max( calc(-60 / 1440 * 100vw)));
  right: max(-50px, max( calc(-50 / 1440 * 100vw)));
}

#scene4 .purchase-wrap {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 92vw;
}

#scene4 .purchase-frame {
  display: flex;
  flex-direction: column;
  position: relative;
  transform: translateZ(0);
  filter: drop-shadow(0px 1.6vw 0px rgba(var(--color-font-rgb), 0.6));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% calc(100% - 13.3333333333vw + 2px);
  background-image: url(../img/toppage/bg_purchase_body@sp.webp);
  margin-top: 21.3333333333vw;
}

#scene4 .purchase-frame::before,
#scene4 .purchase-frame::after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: 100% auto;
  aspect-ratio: 690/50;
}

#scene4 .purchase-frame::before {
  background-image: url(../img/toppage/bg_purchase_top@sp.webp);
}

#scene4 .purchase-frame::after {
  background-image: url(../img/toppage/bg_purchase_bottom@sp.webp);
}

#scene4 .purchase {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color-purple);
  font-weight: 900;
  letter-spacing: 0.05em;
  gap: 3.4666666667vw;
  padding: 4.6666666667vw 3.4666666667vw 2vw 3.4666666667vw;
}

#scene4 .cmn-button {
  width: 100%;
}

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

#scene4 .cmn-button .button-frame::before,
#scene4 .cmn-button .button-frame::after {
  width: 9.3333333333vw;
}

#scene4 .cmn-button .button-body {
  padding: 4vw 0.8vw;
  gap: 1.6vw;
}

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

#scene4 .cmn-button .button-icon::after {
  font-size: 4.8vw;
}

#scene4 .title-sub span {
  display: inline;
  background-image: linear-gradient(90deg, rgb(193, 233, 94), rgb(229, 245, 115));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 4vw;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.1em;
  font-size: 6.4vw;
}

#scene4 .title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -7.7333333333vw;
  width: 42.6666666667vw;
  font-size: 4.8vw;
}

#scene4 .lead {
  font-size: 4.8vw;
}

#scene4 .caution {
  font-size: 3.7333333333vw;
}

#scene4 .caution a {
  position: relative;
}

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

  100% {
    width: 100%;
  }
}

#scene4 .caution a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 2px;
  width: 100%;
  background: var(--color-purple);
}

#scene4 .caution a::after {
  content: "";
  display: inline-block;
  aspect-ratio: 1;
  background: url(../img/common/ic_link.webp) no-repeat;
  background-size: contain;
  transform: translateY(0.2em);
  width: 1.5em;
}

#scene4 .fluffy {
  background: url(../img/toppage/kv_ill_01.webp) no-repeat;
  background-size: contain;
  position: absolute;
  aspect-ratio: 110/304;
  position: absolute;
  width: 9.3333333333vw;
  top: -13.3333333333vw;
  left: 1.3333333333vw;
  animation: fluffy 3s infinite;
}

@keyframes poyon {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }

  15% {
    transform: scale(0.9, 0.9) translate(0%, 5%);
  }

  30% {
    transform: scale(1.3, 0.8) translate(0%, 10%);
  }

  50% {
    transform: scale(0.8, 1.3) translate(0%, -10%);
  }

  70% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }

  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}

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

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 768px) {
  #scene4 .title,
  #scene3 h2,
  #scene2 .scene2-title h2 {
    background-image: url(../img/toppage/bg_title@pc.webp);
    aspect-ratio: 261/91;
    width: min(261px, min( calc(261 / 1440 * 100vw)));
    font-size: min(32px, min( calc(32 / 1440 * 100vw)));
    padding-bottom: min(10px, min( calc(10 / 1440 * 100vw)));
  }

  #scene3 .scene3-1 .release-wrap,
  #scene3 .scene3-2 .release-wrap,
  #scene2 .scene2-title .release-wrap {
    width: min(440px, min( calc(440 / 1440 * 100vw)));
  }

  #scene3 .scene3-1 .release,
  #scene3 .scene3-2 .release,
  #scene2 .scene2-title .release {
    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));
    border-radius: min(40px, min( calc(40 / 1440 * 100vw)));
    width: min(400px, min( calc(400 / 1440 * 100vw)));
    font-size: min(32px, min( calc(32 / 1440 * 100vw)));
  }

  #kv {
    height: 100vh;
  }

  #kv .bg {
    --bg-height: calc(30 / 1440 * 100vw);
    --bg-width: calc(1960 / 1440 * 100vw);
    padding-top: 0;
  }

  #kv .bg img {
    height: calc(100vh + 40px);
  }

  #kv .switch {
    height: min(60px, min(calc(60 / 768 * 100vh), calc(60 / 1440 * 100vw)));
  }

  #kv .switch img {
    width: min(60px, min(calc(60 / 768 * 100vh), calc(60 / 1440 * 100vw)));
  }

  #kv .logo {
    filter: drop-shadow(min(6px, min(calc(6 / 768 * 100vh), calc(6 / 1440 * 100vw))) min(6px, min(calc(6 / 768 * 100vh), calc(6 / 1440 * 100vw))) min(10px, min(calc(10 / 768 * 100vh), calc(10 / 1440 * 100vw))) rgba(var(--color-font-rgb), 0.25));
    top: min(220px, min(calc(220 / 768 * 100vh), calc(220 / 1440 * 100vw)));
    width: 35.3472222222vw;
  }

  #kv .ill {
    left: auto;
    right: 50%;
    margin-right: min(150px, min(calc(150 / 768 * 100vh), calc(150 / 1440 * 100vw)));
    top: min(100px, min(calc(100 / 768 * 100vh), calc(100 / 1440 * 100vw)));
    width: min(542px, min(calc(542 / 768 * 100vh), calc(542 / 1440 * 100vw)));
  }

  #kv .release-wrap {
    transform: translateX(0);
    left: auto;
    top: auto;
    right: max(-22px, max(calc(-22 / 768 * 100vh), calc(-22 / 1440 * 100vw)));
    bottom: min(20px, min(calc(20 / 768 * 100vh), calc(20 / 1440 * 100vw)));
    width: min(443px, min(calc(443 / 768 * 100vh), calc(443 / 1440 * 100vw)));
  }

  #kv .release {
    aspect-ratio: 360/218;
    filter: drop-shadow(min(6px, min(calc(6 / 768 * 100vh), calc(6 / 1440 * 100vw))) min(6px, min(calc(6 / 768 * 100vh), calc(6 / 1440 * 100vw))) min(10px, min(calc(10 / 768 * 100vh), calc(10 / 1440 * 100vw))) rgba(var(--color-font-rgb), 0.25));
    border-radius: min(150px, min(calc(150 / 768 * 100vh), calc(150 / 1440 * 100vw)));
    width: min(360px, min(calc(360 / 768 * 100vh), calc(360 / 1440 * 100vw)));
    gap: min(9px, min(calc(9 / 768 * 100vh), calc(9 / 1440 * 100vw)));
  }

  #kv .release:has(.cmn-button) {
    padding-bottom: min(10px, min(calc(10 / 768 * 100vh), calc(10 / 1440 * 100vw)));
  }

  #kv .title-sub {
    font-size: min(18px, min(calc(18 / 768 * 100vh), calc(18 / 1440 * 100vw)));
  }

  #kv .title-sub::before {
    height: min(15px, min(calc(15 / 768 * 100vh), calc(15 / 1440 * 100vw)));
    bottom: max(-2px, max(calc(-2 / 768 * 100vh), calc(-2 / 1440 * 100vw)));
  }

  #kv .title {
    font-size: min(24px, min(calc(24 / 768 * 100vh), calc(24 / 1440 * 100vw)));
  }

  #kv .line {
    width: min(280px, min(calc(280 / 768 * 100vh), calc(280 / 1440 * 100vw)));
  }

  [lang=ja] #kv .status1 {
    font-size: min(24px, min(calc(24 / 768 * 100vh), calc(24 / 1440 * 100vw)));
  }

  [lang=zh-cmn-Hans] #kv .status1 {
    font-size: min(32px, min(calc(32 / 768 * 100vh), calc(32 / 1440 * 100vw)));
  }

  [lang=zh-cmn-Hant] #kv .status1 {
    font-size: min(32px, min(calc(32 / 768 * 100vh), calc(32 / 1440 * 100vw)));
  }

  #kv .status2 {
    font-size: min(32px, min(calc(32 / 768 * 100vh), calc(32 / 1440 * 100vw)));
  }

  #kv .cmn-button {
    bottom: max(-30px, max(calc(-30 / 768 * 100vh), calc(-30 / 1440 * 100vw)));
    width: min(212px, min(calc(212 / 768 * 100vh), calc(212 / 1440 * 100vw)));
  }

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

  #kv .cmn-button .button-frame::before,
  #kv .cmn-button .button-frame::after {
    width: min(21px, min(calc(21 / 768 * 100vh), calc(21 / 1440 * 100vw)));
  }

  #kv .cmn-button .button-body {
    padding: min(15px, min(calc(15 / 768 * 100vh), calc(15 / 1440 * 100vw))) min(8px, min(calc(8 / 768 * 100vh), calc(8 / 1440 * 100vw)));
    gap: min(7px, min(calc(7 / 768 * 100vh), calc(7 / 1440 * 100vw)));
  }

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

  #kv .cmn-button .button-icon::after {
    font-size: min(18px, min(calc(18 / 768 * 100vh), calc(18 / 1440 * 100vw)));
  }

  #kv #release-balloon {
    opacity: 0.9;
  }

  #kv .fluffy {
    width: min(55px, min(calc(55 / 768 * 100vh), calc(55 / 1440 * 100vw)));
    top: max(-10px, max(calc(-10 / 768 * 100vh), calc(-10 / 1440 * 100vw)));
    left: min(45px, min(calc(45 / 768 * 100vh), calc(45 / 1440 * 100vw)));
  }

  #scene2 .bg {
    --bg-height: calc(30 / 1440 * 100vw);
    --bg-width: calc(1960 / 1440 * 100vw);
    -webkit-clip-path: url(#scene2ClipPc);
    clip-path: url(#scene2ClipPc);
  }

  #scene2 .scene2-title .logo {
    width: min(680px, min( calc(680 / 1440 * 100vw)));
    margin-top: max(-20px, max( calc(-20 / 1440 * 100vw)));
    margin-bottom: min(40px, min( calc(40 / 1440 * 100vw)));
  }

  #scene2 .scene2-title .ill {
    position: absolute;
    right: 50%;
    margin-top: 0;
    margin-right: min(150px, min( calc(150 / 1440 * 100vw)));
    top: max(-150px, max( calc(-150 / 1440 * 100vw)));
    width: min(542px, min( calc(542 / 1440 * 100vw)));
  }

  #scene2 .scene2-lead {
    flex-direction: row;
    gap: min(150px, min( calc(150 / 1440 * 100vw)));
    margin-bottom: min(100px, min( calc(100 / 1440 * 100vw)));
  }

  #scene2 .scene2-lead .image {
    --ng-mg: max(-55px, max(calc(-55 / 1440 * 100vw)));
    width: min(600px, min( calc(600 / 1440 * 100vw)));
  }

  #scene2 .scene2-lead .image figure,
  #scene2 .scene2-lead .image picture {
    padding: 0 min(15px, min( calc(15 / 1440 * 100vw)));
  }

  #scene2 .scene2-lead .image {
    filter: drop-shadow(0 min(8px, min( calc(8 / 1440 * 100vw))) min(20px, min( calc(20 / 1440 * 100vw))) rgba(0, 0, 0, 0.25)) drop-shadow(0 min(20px, min( calc(20 / 1440 * 100vw))) min(60px, min( calc(60 / 1440 * 100vw))) rgba(64, 98, 164, 0.45)) drop-shadow(0 min(8px, min( calc(8 / 1440 * 100vw))) min(20px, min( calc(20 / 1440 * 100vw))) rgba(0, 0, 0, 0.25)) drop-shadow(0 min(20px, min( calc(20 / 1440 * 100vw))) min(60px, min( calc(60 / 1440 * 100vw))) rgba(64, 98, 164, 0.45));
  }

  [lang=ja] #scene2 .scene2-lead .lead {
    width: min(257px, min( calc(257 / 1440 * 100vw)));
  }

  [lang=zh-cmn-Hans] #scene2 .scene2-lead .lead {
    width: min(184px, min( calc(184 / 1440 * 100vw)));
  }

  [lang=zh-cmn-Hant] #scene2 .scene2-lead .lead {
    width: min(184px, min( calc(184 / 1440 * 100vw)));
  }

  #scene2 .scene2-1,
  #scene2 .scene2-2,
  #scene2 .scene2-shadow {
    filter: drop-shadow(0 min(8px, min( calc(8 / 1440 * 100vw))) min(20px, min( calc(20 / 1440 * 100vw))) rgba(0, 0, 0, 0.25)) drop-shadow(0 min(20px, min( calc(20 / 1440 * 100vw))) min(60px, min( calc(60 / 1440 * 100vw))) rgba(64, 98, 164, 0.45)) drop-shadow(0 min(8px, min( calc(8 / 1440 * 100vw))) min(20px, min( calc(20 / 1440 * 100vw))) rgba(0, 0, 0, 0.25)) drop-shadow(0 min(20px, min( calc(20 / 1440 * 100vw))) min(60px, min( calc(60 / 1440 * 100vw))) rgba(64, 98, 164, 0.45));
  }

  #scene2 .scene2-1,
  #scene2 .scene2-2,
  #scene2 .scene2-3 {
    flex-direction: row;
    margin-bottom: min(70px, min( calc(70 / 1440 * 100vw)));
  }

  #scene2 .scene2-1 .image,
  #scene2 .scene2-2 .image,
  #scene2 .scene2-3 .image {
    --ng-mg: max(-40px, max(calc(-40 / 1440 * 100vw)));
    width: min(460px, min( calc(460 / 1440 * 100vw)));
  }

  #scene2 .scene2-1 .image figure,
  #scene2 .scene2-1 .image picture,
  #scene2 .scene2-2 .image figure,
  #scene2 .scene2-2 .image picture,
  #scene2 .scene2-3 .image figure,
  #scene2 .scene2-3 .image picture {
    padding: 0 min(15px, min( calc(15 / 1440 * 100vw)));
  }

  #scene2 .scene2-1 .text-wrap,
  #scene2 .scene2-2 .text-wrap,
  #scene2 .scene2-3 .text-wrap {
    background-image: url(../img/toppage/bg_cloud@pc.svg);
    aspect-ratio: 544/242;
    width: min(544px, min( calc(544 / 1440 * 100vw)));
    margin-top: 0;
  }

  #scene2 .scene2-1 .text-wrap .text,
  #scene2 .scene2-2 .text-wrap .text,
  #scene2 .scene2-3 .text-wrap .text {
    line-height: 1.8;
    font-size: min(18px, min( calc(18 / 1440 * 100vw)));
  }

  #scene2 .scene2-1 {
    transform: translateX(min(100px, min( calc(100 / 1440 * 100vw))));
  }

  #scene2 .scene2-1 .image {
    transform: translate(max(-100px, max( calc(-100 / 1440 * 100vw))), max(-30px, max( calc(-30 / 1440 * 100vw)))) rotate(5deg);
  }

  #scene2 .scene2-1 .ill {
    left: 0;
    bottom: min(10px, min( calc(10 / 1440 * 100vw)));
    width: min(100px, min( calc(100 / 1440 * 100vw)));
  }

  #scene2 .scene2-2 {
    flex-direction: row-reverse;
  }

  #scene2 .scene2-2 .image {
    transform: translate(min(80px, min( calc(80 / 1440 * 100vw))), max(-30px, max( calc(-30 / 1440 * 100vw)))) rotate(-5deg);
  }

  #scene2 .scene2-2 .ill {
    right: min(35px, min( calc(35 / 1440 * 100vw)));
    bottom: min(30px, min( calc(30 / 1440 * 100vw)));
    width: min(54px, min( calc(54 / 1440 * 100vw)));
  }

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

  #scene2 .scene2-3 .image {
    transform: translate(max(-50px, max( calc(-50 / 1440 * 100vw))), max(-30px, max( calc(-30 / 1440 * 100vw)))) rotate(5deg);
  }

  #scene2 .scene2-3 .ill {
    left: auto;
    right: min(60px, min( calc(60 / 1440 * 100vw)));
    bottom: 0;
    width: min(114px, min( calc(114 / 1440 * 100vw)));
  }

  #scene2 .scene2-button .cmn-button .button-body {
    width: min(368px, min( calc(368 / 1440 * 100vw)));
    padding-left: 0;
    padding-right: 0;
  }

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

  #scene2 .scene2-caution {
    margin-bottom: min(100px, min( calc(100 / 1440 * 100vw)));
  }

  #scene2 .scene2-caution .caution {
    text-align: center;
    font-size: min(18px, min( calc(18 / 1440 * 100vw)));
  }

  #scene3 .scene3-1 .release-wrap,
  #scene3 .scene3-2 .release-wrap {
    margin-top: min(15px, min( calc(15 / 1440 * 100vw)));
    margin-bottom: min(5px, min( calc(5 / 1440 * 100vw)));
  }

  #scene3 .scene3-text .ill1 {
    width: min(182px, min( calc(182 / 1440 * 100vw)));
    top: 0;
    left: max(-210px, max( calc(-210 / 1440 * 100vw)));
  }

  #scene3 .scene3-text .ill2 {
    width: min(174px, min( calc(174 / 1440 * 100vw)));
    top: min(20px, min( calc(20 / 1440 * 100vw)));
    right: max(-150px, max( calc(-150 / 1440 * 100vw)));
  }

  #scene3 .scene3-text .text {
    width: min(230px, min( calc(230 / 1440 * 100vw)));
    font-size: min(24px, min( calc(24 / 1440 * 100vw)));
  }

  #scene3 .scene3-text .caution {
    font-size: min(14px, min( calc(14 / 1440 * 100vw)));
    margin-top: min(15px, min( calc(15 / 1440 * 100vw)));
  }

  #scene4 {
    --bg-height: calc(30 / 1440 * 100vw);
    --bg-width: calc(1960 / 1440 * 100vw);
    padding-bottom: min(100px, min( calc(100 / 1440 * 100vw)));
  }

  #scene4:has(.purchase) {
    padding-bottom: min(8px, min( calc(8 / 1440 * 100vw))) !important;
  }

  #scene4 .button-wrap {
    justify-content: center;
    flex-direction: row;
    gap: min(30px, min( calc(30 / 1440 * 100vw)));
    padding-top: min(180px, min( calc(180 / 1440 * 100vw)));
    margin-bottom: min(130px, min( calc(130 / 1440 * 100vw)));
  }

  #scene4 .button-wrap .button {
    width: min(496px, min( calc(496 / 1440 * 100vw)));
    gap: min(15px, min( calc(15 / 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;
  }

  #scene4 .button-wrap .button .button-text-sub,
  #scene4 .button-wrap .button .button-text {
    -webkit-text-stroke: 6px var(--color-white);
    text-stroke: 6px var(--color-white);
  }

  #scene4 .button-wrap .button .button-text-sub {
    font-size: min(20px, min( calc(20 / 1440 * 100vw)));
  }

  #scene4 .button-wrap .button .button-text {
    font-size: min(32px, min( calc(32 / 1440 * 100vw)));
  }

  #scene4 .button-wrap .button .button-icon {
    width: min(20px, min( calc(20 / 1440 * 100vw)));
  }

  #scene4 .button-wrap .button .button-ill1 {
    top: max(-20px, max( calc(-20 / 1440 * 100vw)));
    left: max(-55px, max( calc(-55 / 1440 * 100vw)));
    width: min(114px, min( calc(114 / 1440 * 100vw)));
  }

  #scene4 .button-wrap .button:has(.button-ill1) .button-text-wrap {
    padding-left: min(30px, min( calc(30 / 1440 * 100vw)));
  }

  #scene4 .button-wrap .button .button-ill2 {
    right: max(-55px, max( calc(-55 / 1440 * 100vw)));
    bottom: max(-18px, max( calc(-18 / 1440 * 100vw)));
    width: min(104px, min( calc(104 / 1440 * 100vw)));
  }

  #scene4 .outline {
    border-radius: min(30px, min( calc(30 / 1440 * 100vw)));
    width: min(1024px, min( calc(1024 / 1440 * 100vw)));
    padding: min(120px, min( calc(120 / 1440 * 100vw))) min(30px, min( calc(30 / 1440 * 100vw))) min(55px, min( calc(55 / 1440 * 100vw))) min(40px, min( calc(40 / 1440 * 100vw)));
  }

  #scene4 .outline h2 {
    aspect-ratio: 1182/202;
    background-image: url(../img/toppage/ol_bg_title@pc.webp);
    width: min(591px, min( calc(591 / 1440 * 100vw)));
    font-size: min(32px, min( calc(32 / 1440 * 100vw)));
    top: max(-50px, max( calc(-50 / 1440 * 100vw)));
  }

  #scene4 .package-wrap {
    flex-direction: row;
    gap: min(30px, min( calc(30 / 1440 * 100vw)));
    margin-bottom: min(50px, min( calc(50 / 1440 * 100vw)));
  }

  #scene4 .package-wrap .logo {
    width: min(300px, min( calc(300 / 1440 * 100vw)));
  }

  #scene4 .package-wrap dl {
    font-size: min(14px, min( calc(14 / 1440 * 100vw)));
  }

  #scene4 .package-wrap dl::before {
    left: 8.4em;
    width: min(4px, min( calc(4 / 1440 * 100vw)));
    background-image: radial-gradient(circle, var(--color-light-purple) min(2px, min( calc(2 / 1440 * 100vw))), transparent min(2px, min( calc(2 / 1440 * 100vw))));
    background-size: min(4px, min( calc(4 / 1440 * 100vw))) min(8px, min( calc(8 / 1440 * 100vw)));
  }

  #scene4 .package-wrap dl div {
    gap: 40px;
  }

  #scene4 .caution {
    font-size: min(14px, min( calc(14 / 1440 * 100vw)));
  }

  #scene4 .purchase-wrap {
    width: min(676px, min( calc(676 / 1440 * 100vw)));
  }

  #scene4 .purchase-frame {
    filter: drop-shadow(0px min(8px, min( calc(8 / 1440 * 100vw))) 0px rgba(var(--color-font-rgb), 0.6));
    background-size: 100% calc(100% - min(48px, min( calc(48 / 1440 * 100vw))) + 2px);
    background-image: url(../img/toppage/bg_purchase_body@pc.webp);
    margin-top: min(120px, min( calc(120 / 1440 * 100vw)));
  }

  #scene4 .purchase-frame::before,
  #scene4 .purchase-frame::after {
    aspect-ratio: 676/24;
  }

  #scene4 .purchase-frame::before {
    background-image: url(../img/toppage/bg_purchase_top@pc.webp);
  }

  #scene4 .purchase-frame::after {
    background-image: url(../img/toppage/bg_purchase_bottom@pc.webp);
  }

  #scene4 .purchase {
    gap: min(15px, min( calc(15 / 1440 * 100vw)));
    padding: min(34px, min( calc(34 / 1440 * 100vw))) min(40px, min( calc(40 / 1440 * 100vw))) min(14px, min( calc(14 / 1440 * 100vw))) min(40px, min( calc(40 / 1440 * 100vw)));
  }

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

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

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

  #scene4 .cmn-button .button-body {
    padding: min(15px, min( calc(15 / 1440 * 100vw))) min(8px, min( calc(8 / 1440 * 100vw)));
    gap: min(7px, min( calc(7 / 1440 * 100vw)));
  }

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

  #scene4 .cmn-button .button-icon::after {
    font-size: min(18px, min( calc(18 / 1440 * 100vw)));
  }

  #scene4 .title-sub span {
    background-size: 100% min(15px, min( calc(15 / 1440 * 100vw)));
    font-size: min(24px, min( calc(24 / 1440 * 100vw)));
  }

  #scene4 .title {
    top: min(-28px, min( calc(-28 / 1440 * 100vw)));
    width: min(205px, min( calc(205 / 1440 * 100vw)));
    font-size: min(24px, min( calc(24 / 1440 * 100vw)));
  }

  #scene4 .lead {
    font-size: min(18px, min( calc(18 / 1440 * 100vw)));
  }

  #scene4 .caution {
    font-size: min(14px, min( calc(14 / 1440 * 100vw)));
  }

  #scene4 .fluffy {
    width: min(55px, min( calc(55 / 1440 * 100vw)));
    top: min(-30px, min( calc(-30 / 1440 * 100vw)));
    left: min(60px, min( calc(60 / 1440 * 100vw)));
  }
}

@media screen and (min-width: 768px) and (hover: hover) {
  #kv .cmn-button .button:hover {
    transform: translateY(min(4px, min(calc(4 / 768 * 100vh), calc(4 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

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

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

  #scene4 .caution a:hover::before {
    animation: width100 0.4s linear;
  }
}

@media screen and (min-width: 768px) and (-ms-high-contrast: active), screen and (min-width: 768px) and (-ms-high-contrast: none) {
  #kv .cmn-button .button:hover {
    transform: translateY(min(4px, min(calc(4 / 768 * 100vh), calc(4 / 1440 * 100vw))));
    filter: drop-shadow(0px 0px 0px rgba(var(--color-font-rgb), 0.6));
  }

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

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

  #scene4 .caution a:hover::before {
    animation: width100 0.4s linear;
  }
}

@media screen and (max-width: 767.8px) {
  #scene2 .scene2-title h2 {
    margin-bottom: 5.3333333333vw;
  }

  #scene2 .scene2-lead .image-wrap {
    margin-top: -8vw;
  }

  #scene2 .scene2-2 {
    align-items: flex-start;
    justify-content: flex-start;
  }

  #scene2 .scene2-button .cmn-button .button {
    width: auto;
  }

  #scene3 h2 {
    margin-bottom: 5.3333333333vw;
  }

  #scene4 div[class^=ill] {
    display: none !important;
  }

  #scene4 .lead {
    padding-left: 3.2vw;
    padding-right: 3.2vw;
    line-height: 1.8;
    text-align: left;
  }

  [lang=zh-cmn-Hant] #scene4 .lead {
    text-align: center;
  }

  [lang=zh-cmn-Hans] #scene4 .lead {
    text-align: center;
  }

  #scene4 .caution {
    padding-left: 3.2vw;
    padding-right: 3.2vw;
    line-height: 1.5;
    text-align: left;
  }
}