@charset "UTF-8";

.global_header .switch {
  display: none !important;
}

.lil-gui {
  inset: auto auto 0 0 !important;
  display: none !important;
}

img {
  max-width: initial;
}

main {
  /***************************************************************************************************************
    * 共通
    ***************************************************************************************************************/
  /***************************************************************************************************************
    * キービジュアル
    ***************************************************************************************************************/
  /***************************************************************************************************************
    * News
    ***************************************************************************************************************/
  /***************************************************************************************************************
    * 舞台・ストーリー
    ***************************************************************************************************************/
  /***************************************************************************************************************
    * 遊び方
    ***************************************************************************************************************/
  /***************************************************************************************************************
    * メガシンカ
    ***************************************************************************************************************/
  /***************************************************************************************************************
    * ポケモン
    ***************************************************************************************************************/
  /***************************************************************************************************************
    * 登場人物
    ***************************************************************************************************************/
  /***************************************************************************************************************
    * 商品・特典
    ***************************************************************************************************************/
  /***************************************************************************************************************
    * M次元ラッシュ バナー
    ***************************************************************************************************************/
}

main .virtual-scroll-wrapper {
  --scroll-unit: 1000px;
  --viewport-unit: 100dvh;
  --lightness: 0;
  --progress: 1000px;
  height: var(--viewport-unit);
  background: url("../img/toppage/pattern1.webp") 0 0/100vmax 100vmax repeat;
  overflow: hidden;
}

main .virtual-scroll-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-navy);
  opacity: calc(1 - var(--lightness));
}

main .virtual-scroll-content {
  --scroll-y: 0;
  position: relative;
  transform: translate3d(0, calc(-1px * var(--scroll-y)), 0);
}

main .container {
  width: 92%;
  margin: 0 auto;
}

main .sticky {
  position: relative;
  will-change: transform;
  --scroll-offset: 0;
  --scroll-height: 0;
  transform: translate3d(0, calc(1px * clamp(0, var(--scroll-y) - var(--scroll-offset), var(--scroll-height))), 0);
}

main .cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

main .title-with-arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(15px, 2.6666666667vw);
  color: var(--color-white);
  margin-bottom: min(37.5px, 6.6666666667vw);
}

main .title-with-arrows {
  transform: translateZ(0);
  filter: drop-shadow(0 0 min(2.25px, 0.4vw) #00b2e8) drop-shadow(0 0 min(4.5px, 0.8vw) #00b2e8) drop-shadow(0 0 min(22.5px, 4vw) #00b2e8);
}

main .title-with-arrows::before,
main .title-with-arrows::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;
  content: "\e901";
  font-size: min(45px, 8vw);
}

main .title-with-arrows::before {
  transform: scale(-1, 1);
}

main .title-with-arrows span {
  display: block;
  font-size: min(45px, 8vw);
  line-height: 0.75;
  padding-bottom: 0.25em;
  text-shadow: 4px 4px 0px rgba(8, 20, 59, 0.2);
}

main .sec-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: min(487.5px, 86.6666666667vw);
  margin: auto;
}

main .sec-box .sec-title-en {
  position: relative;
  width: 252px;
  height: 30px;
  background-image: linear-gradient(90deg, rgba(51, 193, 241, 0) 0%, rgba(51, 193, 241, 0.5) 20%, rgb(51, 193, 241) 50%, rgba(51, 193, 241, 0.5) 80%, rgba(51, 193, 241, 0) 100%);
}

main .sec-box .sec-title-en::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, #fff 0px, #fff 1px, transparent 1px, transparent 3px);
  background-size: 100% 3px;
  background-repeat: repeat-y;
  mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  opacity: 0.3;
}

main .sec-box .sec-title-en span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow: 2px 2px 0px rgba(8, 20, 59, 0.25);
}

main .sec-box .sec-title {
  font-size: min(63px, 11.2vw);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

main .sec-box .sec-line {
  display: grid;
  grid-template-rows: 1px;
  grid-template-columns: 1fr 19px 1fr;
  align-items: center;
  width: 100%;
}

main .sec-box .sec-line .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

main .sec-box .sec-line .icon::before {
  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;
  content: "\e905";
  color: #00b2e8;
  font-size: 21px;
}

main .sec-box .sec-line .line {
  position: relative;
  height: 100%;
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

main .sec-box .sec-line .line span {
  position: absolute;
  width: 0%;
  height: 100%;
  background: #00b2e8;
  transition: width 0ms 500ms;
}

main .sec-box .sec-line .line span::before {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  background: #00b2e8;
  border-radius: 50%;
}

main .sec-box .sec-line .line:first-child span {
  right: 0;
}

main .sec-box .sec-line .line:first-child span::before {
  left: -3px;
}

main .sec-box .sec-line .line:last-child span {
  left: 0;
}

main .sec-box .sec-line .line:last-child span::before {
  right: -3px;
}

main .sec-box .sec-text {
  color: var(--color-navy);
  font-size: min(24px, 4.2666666667vw);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
  margin: -0.25em 0;
}

main .sec-box .button_v2 {
  width: min(379.5px, 67.4666666667vw);
  height: min(88.5px, 15.7333333333vw);
}

main .sec-box .button_v2 .button-text {
  font-size: min(30px, 5.3333333333vw);
}

main .sec-box .button_v2 .button-icon::after {
  font-size: min(22.5px, 4vw);
}

main .sec-box .sec-title-en,
main .sec-box .sec-title,
main .sec-box .sec-text,
main .sec-box .button_v2 {
  opacity: 0;
  transform: translate3d(0, 50%, 0);
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 0ms 500ms;
}

main .progress {
  --progress: 0;
  position: relative;
  width: min(198px, 35.2vw);
  height: min(27px, 4.8vw);
  border: solid 1px #fff;
  border-radius: 100px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 300ms;
}

main .progress::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;
  content: "\e902";
  color: #fff;
  font-size: min(15px, 2.6666666667vw);
  position: absolute;
  top: min(4.5px, 0.8vw);
  left: min(4.5px, 0.8vw);
  transform: rotate(calc(var(--progress) * 360deg));
}

main .progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--progress) * 100%);
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 165, 161, 0.85), rgba(12, 136, 164, 0.85) 200px);
}

main .content[data-visible=true] .sec-title-en {
  opacity: 1;
  transform: none;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

main .content[data-visible=true] .sec-title {
  opacity: 1;
  transform: none;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
}

main .content[data-visible=true] .sec-line .icon {
  opacity: 1;
  transition: opacity 50ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 400ms;
}

main .content[data-visible=true] .sec-line .line {
  opacity: 1;
  transition: opacity 50ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 400ms;
}

main .content[data-visible=true] .sec-line .line span {
  width: 100%;
  transition: width 300ms cubic-bezier(0.77, 0, 0.175, 1) 450ms;
}

main .content[data-visible=true] .sec-text {
  opacity: 1;
  transform: none;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 500ms, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 500ms;
}

main .content[data-visible=true] .button_v2 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 700ms, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 700ms;
}

main .content[data-visible=true] .progress {
  opacity: 1;
}

[data-loop="1"] main .loop0 {
  display: none !important;
}

[data-loop="0"] main .loop1 {
  display: none !important;
}

main .keyvisual {
  position: relative;
  width: 100vw;
  min-height: var(--viewport-unit);
}

main .keyvisual .background {
  position: absolute;
  top: 0;
  width: 100%;
}

main .keyvisual .switch {
  position: absolute;
  top: 0;
  left: 0;
  width: min(150px, 26.6666666667vw);
}

main .keyvisual .inner {
  color: var(--color-white);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: min(78px, 10.4vw);
}

main .keyvisual .inner .catchcopy {
  font-size: min(67.5px, 7.2vw);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  text-shadow: 4px 4px rgba(8, 20, 59, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: min(687.5px, 73.3333333333vw);
}

main .keyvisual .inner .catchcopy {
  transform: translateZ(0);
  filter: drop-shadow(0 0 min(2.25px, 0.4vw) #00b2e8) drop-shadow(0 0 min(4.5px, 0.8vw) #00b2e8) drop-shadow(0 0 min(22.5px, 4vw) #00b2e8);
}

main .keyvisual .inner .catchcopy .small {
  font-size: 55.5555555556%;
  line-height: 1.5333333333;
}

main .keyvisual .inner .maintitle {
  width: min(574px, 76.5333333333vw);
  margin-bottom: min(33px, 5.8666666667vw);
}

main .keyvisual .inner .information {
  position: relative;
}

main .keyvisual .inner .information > div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

main .keyvisual .inner .release {
  position: relative;
  z-index: 1;
  font-size: min(54px, 9.6vw);
  font-weight: 900;
  line-height: 1.125;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: min(36px, 6.4vw);
}

main .keyvisual .inner .release small {
  font-size: 64.7058823529%;
}

main .keyvisual .inner .reserve {
  width: min(487.5px, 86.6666666667vw);
  margin-bottom: min(45px, 8vw);
}

main .keyvisual .inner .reserve dl:not(:last-child) {
  margin-bottom: min(33.75px, 6vw);
}

main .keyvisual .inner .reserve dt {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr min(171px, 30.4vw) 1fr;
  width: 100%;
  margin-bottom: min(33.75px, 6vw);
  font-size: min(18px, 3.2vw);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.07em;
  text-align: center;
}

main .keyvisual .inner .reserve dt::before,
main .keyvisual .inner .reserve dt::after {
  content: "";
  height: 1px;
  background: var(--color-white);
}

main .keyvisual .inner .reserve dt::before,
main .keyvisual .inner .reserve dt::after {
  transform: translateZ(0);
  filter: drop-shadow(0 0 min(2.25px, 0.4vw) #00b2e8) drop-shadow(0 0 min(4.5px, 0.8vw) #00b2e8) drop-shadow(0 0 min(22.5px, 4vw) #00b2e8);
}

main .keyvisual .inner .reserve dt {
  transform: translateZ(0);
  filter: drop-shadow(0 0 min(2.25px, 0.4vw) #00b2e8) drop-shadow(0 0 min(4.5px, 0.8vw) #00b2e8) drop-shadow(0 0 min(22.5px, 4vw) #00b2e8);
}

main .keyvisual .inner .reserve dd {
  position: relative;
}

main .keyvisual .inner .reserve dd .button_v2 {
  width: min(335.25px, 59.6vw);
  height: min(87.75px, 15.6vw);
  margin: 0 auto;
}

main .keyvisual .inner .reserve dd .button_v2 .button-text {
  font-size: min(36px, 6.4vw);
  font-weight: 900;
  letter-spacing: 0.05em;
}

[lang=zh-cmn-Hant] main .keyvisual .inner .reserve dd .button_v2 .button-text {
  font-size: min(30px, 5.3333333333vw);
  margin-right: min(15px, 2.6666666667vw);
}

main .keyvisual .inner .reserve dd .button_v2 .button-icon::after {
  font-size: min(15.75px, 2.8vw);
}

main .keyvisual .inner .reserve dd .reserve_text {
  position: relative;
  z-index: 1;
  font-size: min(36px, 6.4vw);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}

main .keyvisual .inner .reserve dd .reserve_text small {
  font-size: 50%;
}

main .keyvisual .inner .reserve dd .reserve_caution {
  margin-top: 0.5em;
  font-size: min(18px, 3.2vw);
  line-height: 1.5;
}

main .keyvisual .inner .kvplayer {
  position: relative;
  aspect-ratio: 690/388;
  width: min(517.5px, 92vw);
  margin-bottom: min(56.25px, 10vw);
  border-radius: min(7.5px, 1.3333333333vw) min(45px, 8vw);
  background: #808080;
  overflow: hidden;
}

main .keyvisual .inner .kvplayer .icon {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(90px, 16vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("../img/common/ic_slide.png") center/contain no-repeat;
  transition: filter 300ms;
}

main .keyvisual .inner .kvplayer .icon {
  transform: translateZ(0);
  filter: drop-shadow(0 0 min(2.25px, 0.4vw) rgba(66, 175, 227, 0.8)) drop-shadow(0 0 min(4.5px, 0.8vw) rgba(66, 175, 227, 0.8)) drop-shadow(0 0 min(22.5px, 4vw) rgba(66, 175, 227, 0.8));
}

main .keyvisual .inner .kvplayer .icon::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;
  content: "\e906";
  color: #fff;
  font-size: min(20.25px, 3.6vw);
  margin-left: 0.2em;
  transition: color 300ms, filter 300ms;
}

main .keyvisual .inner .kvplayer .icon::after {
  transform: translateZ(0);
  filter: drop-shadow(0 0 min(2.25px, 0.4vw) #42afe3) drop-shadow(0 0 min(4.5px, 0.8vw) #42afe3) drop-shadow(0 0 min(22.5px, 4vw) #42afe3);
}

main #news {
  position: relative;
  margin-bottom: 200px;
}

main #news .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

main #news .bottom {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

main #news .button_v2 {
  width: min(335.25px, 59.6vw);
  height: min(87.75px, 15.6vw);
}

main #news .button_v2 .button-text {
  font-size: min(30px, 5.3333333333vw);
}

main #news .button_v2 .button-icon::after {
  font-size: min(22.5px, 4vw);
}

main #news .event {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

main #news .event a {
  position: relative;
  font-size: min(24px, 4.2666666667vw);
  line-height: 1.3125;
  letter-spacing: 0.1em;
}

main #news .event a .frame {
  --border-width: 2px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1px;
  width: 17.4375em;
  height: 5.21875em;
  transform: translate3d(0, 0, 0);
  filter: drop-shadow(0 0 5px #00b2e8) drop-shadow(0 0 10px #00b2e8);
  transition: filter 500ms;
}

main #news .event a .frame::before,
main #news .event a .frame::after {
  content: "";
  width: 1px;
  height: 100%;
  border-left: solid var(--border-width) var(--color-white);
  border-right: solid var(--border-width) var(--color-white);
  mask-image: linear-gradient(0deg, #fff 0%, #fff 32%, transparent 32%, transparent 68%, #fff 68%, #fff 100%);
}

main #news .event a .frame .center {
  grid-column: 2/3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-white);
  text-align: center;
}

main #news .event a .frame .center::before,
main #news .event a .frame .center::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  border-top: solid var(--border-width) var(--color-white);
  border-bottom: solid var(--border-width) var(--color-white);
}

main #news .event a .frame .center::before {
  top: 0;
}

main #news .event a .frame .center::after {
  bottom: 0;
}

main #news .event a .inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(30px, 5.3333333333vw);
  transition: filter 500ms;
  transform: translate3d(0, 0, 0);
  text-shadow: 1px 1px 0px rgba(8, 20, 59, 0.25);
  filter: drop-shadow(0 0 4px #00b2e8) drop-shadow(0 0 8px #00b2e8);
}

main #news .event a .inner .text {
  color: var(--color-white);
  font-weight: 700;
  text-align: center;
}

main #news .event a .inner .text br {
  display: block;
}

main #news .event a .inner .icon {
  width: 0px;
}

main #news .event a .inner .icon::after {
  content: "\e900";
  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;
  color: var(--color-white);
  font-size: min(24px, 4.2666666667vw);
  line-height: 1;
}

main #stage {
  position: relative;
  height: calc(var(--viewport-unit) + var(--scroll-unit) * 3 + var(--progress) + var(--scroll-unit) * 1.7 + 100px);
}

main #stage[data-visible=false] .sticky {
  visibility: hidden;
}

main #stage .sticky {
  position: relative;
  height: var(--viewport-unit);
}

main #stage .panel {
  --seek: 0;
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}

main #stage .panel[data-visible=true] {
  visibility: visible;
}

main #stage .panel video {
  transform: scale(calc(1.5 - 0.5 * var(--seek)));
}

main #stage .content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--viewport-unit);
}

main #stage .content .grid {
  --seek: 0;
  --shift: 0;
  --unit: 0px;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-columns: repeat(8, calc((100vw - 45px) / 4));
  gap: 15px;
  transform: translate3d(calc((100vw - 45px) / -4 - 15px + var(--shift) * (var(--unit) * -1 - 15px)), 0, 0);
  min-width: 100%;
  min-height: var(--viewport-unit);
  transform-style: preserve-3d;
  perspective: 1000px;
  perspective-origin: 75% 30%;
  visibility: hidden;
}

main #stage .content .grid[data-visible=true] {
  visibility: visible;
}

main #stage .content .grid .cell {
  aspect-ratio: 16/9;
  width: calc((100vw - 15px) * 0.5);
  transform-style: preserve-3d;
}

main #stage .content .grid .center {
  aspect-ratio: initial;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 273.5px;
}

main #stage .content .grid .center .sec-box {
  position: absolute;
  transform: translate3d(calc(var(--shift) * (var(--unit) + 15px)), 0, 0);
}

main #stage .content .grid picture {
  display: block;
}

main #stage .content .grid .m1,
main #stage .content .grid .e1,
main #stage .content .grid .m3 {
  grid-row: 1/span 1;
}

main #stage .content .grid .n1,
main #stage .content .grid .d1,
main #stage .content .grid .n3,
main #stage .content .grid .d3 {
  grid-row: 2/span 1;
}

main #stage .content .grid .center {
  grid-row: 3/span 1;
  grid-column: 2/span 4;
}

main #stage .content .grid .n2,
main #stage .content .grid .d2,
main #stage .content .grid .n4,
main #stage .content .grid .d4 {
  grid-row: 4/span 1;
}

main #stage .content .grid .m2,
main #stage .content .grid .e2,
main #stage .content .grid .m4 {
  grid-row: 5/span 1;
}

main #stage .content .grid .m1,
main #stage .content .grid .m2 {
  grid-column: 2/span 2;
}

main #stage .content .grid .e1,
main #stage .content .grid .e2 {
  grid-column: 4/span 2;
}

main #stage .content .grid .m3,
main #stage .content .grid .m4 {
  grid-column: 6/span 2;
}

main #stage .content .grid .n1,
main #stage .content .grid .n2 {
  grid-column: 1/span 2;
}

main #stage .content .grid .d1,
main #stage .content .grid .d2 {
  grid-column: 3/span 2;
}

main #stage .content .grid .n3,
main #stage .content .grid .n4 {
  grid-column: 5/span 2;
}

main #stage .content .grid .d3,
main #stage .content .grid .d4 {
  grid-column: 7/span 2;
}

main #stage .content .grid .e3 {
  display: none;
}

main #stage .content .grid .d1 {
  --opacity: 0;
  opacity: var(--opacity);
}

main #stage .content .grid .m1 picture {
  transform: translate3d(0, 0, calc(1500px * (1 - var(--seek))));
}

main #stage .content .grid .e1 picture {
  transform: translate3d(0, 0, calc(1500px * (1 - var(--seek))));
}

main #stage .content .grid .n1 picture {
  transform: translate3d(0, 0, calc(1500px * (1 - var(--seek))));
}

main #stage .content .grid .n3 picture {
  transform: translate3d(0, 0, calc(1500px * (1 - var(--seek))));
}

main #stage .content .grid .n2 picture {
  transform: translate3d(0, 0, calc(1500px * (1 - var(--seek))));
}

main #stage .content .grid .d2 picture {
  transform: translate3d(0, 0, calc(1500px * (1 - var(--seek))));
}

main #stage .content .grid .n4 picture {
  transform: translate3d(0, 0, calc(1500px * (1 - var(--seek))));
}

main #stage .content .grid .m2 picture {
  transform: translate3d(0, 0, calc(1500px * (1 - var(--seek))));
}

main #stage .content .grid .e2 picture {
  transform: translate3d(0, 0, calc(1500px * (1 - var(--seek))));
}

main #stage .content > .progress {
  display: none;
}

main #stage .content[data-visible=true] .progress {
  opacity: 1;
}

main #stage .slide {
  --opacity: 0;
  position: absolute;
  inset: 0;
  opacity: var(--opacity);
  pointer-events: none;
}

main #stage .slide .slide-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms;
}

main #stage .slide .slide-item:first-child {
  opacity: 1;
}

main #stage .slide .slide-item[data-visible=true] {
  opacity: 1;
}

main #howtoplay {
  height: calc(var(--viewport-unit) + var(--scroll-unit) * 1.2 + var(--progress) + var(--viewport-unit));
  margin-top: calc(var(--viewport-unit) * -1);
  opacity: 0;
  pointer-events: none;
}

main #howtoplay[data-visible=true] {
  opacity: 1;
  pointer-events: auto;
}

html:has(main #howtoplay[data-visible=true]) #stage {
  opacity: 0;
}

main #howtoplay[data-visible=false] .sticky {
  display: none;
}

main #howtoplay .sticky {
  height: var(--viewport-unit);
}

main #howtoplay .panel {
  --rounded: 1;
  --rotateX: 0;
  --translateZ: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(var(--rounded) * 6vmin) calc(var(--rounded) * 3vmin);
  transform: perspective(1000px) translateZ(calc(var(--translateZ) * -1000px)) rotateX(calc(var(--rotateX) * 1rad));
}

main #howtoplay .panel .frontside,
main #howtoplay .panel .backside {
  position: absolute;
  inset: 0;
}

main #howtoplay .panel .backside {
  visibility: hidden;
  transform: scale(1, -1);
}

main #howtoplay .panel[data-flipped=true] .frontside {
  visibility: hidden;
}

main #howtoplay .panel[data-flipped=true] .backside {
  visibility: visible;
}

main #howtoplay .panel .backside::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, #000 0px, #000 1px, transparent 1px, transparent 3px);
  background-size: 100% 3px;
  background-repeat: repeat-y;
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

main #howtoplay .content {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--viewport-unit);
}

main #howtoplay .sec-title,
main #howtoplay .sec-text {
  color: var(--color-white);
}

main #howtoplay:has(.content[data-visible=true]) .panel .backside::after {
  opacity: 0.4;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

main #megaevolution {
  height: calc(var(--viewport-unit) + var(--progress) + var(--scroll-unit) * 0.5);
  margin-top: calc(var(--viewport-unit) * -1);
}

main #megaevolution .sticky {
  height: var(--viewport-unit);
}

main #megaevolution[data-visible=false] .sticky {
  display: none;
}

main #megaevolution .filter {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 40px rgba(8, 20, 59, 0.15));
  transform: translateZ(0);
}

main #megaevolution .filter .panel {
  position: absolute;
  inset: 0;
  background: url("../img/common/pattern_triangles.png") repeat;
  background-size: 320px;
}

main #megaevolution .filter .panel[data-flipped=true] video {
  opacity: 0;
}

main #megaevolution .filter .panel[data-flipped=true]::after {
  opacity: 0;
}

main #megaevolution .filter .panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, #000 0px, #000 1px, transparent 1px, transparent 3px);
  background-size: 100% 3px;
  background-repeat: repeat-y;
  opacity: 0;
}

main #megaevolution .content {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--viewport-unit);
  max-width: 1366px;
  margin: 0 auto;
}

main #megaevolution .content .pokebox {
  position: relative;
}

main #megaevolution .sec-title,
main #megaevolution .sec-text {
  color: var(--color-white);
}

main #megaevolution:has(.content[data-visible=true]) .filter .panel::after {
  opacity: 0.5;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

main #pokemon {
  --size: min(73.0666666667vw, 80vh, 480px);
  position: relative;
  height: calc(var(--viewport-unit) + var(--scroll-unit) * 0.5 + var(--progress) + var(--scroll-unit) * 1);
  margin-top: calc(var(--viewport-unit) * -1);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

main #pokemon .sticky {
  height: var(--viewport-unit);
}

main #pokemon[data-visible=true] {
  opacity: 1;
  pointer-events: auto;
}

html:has(main #pokemon[data-visible=true]) #megaevolution {
  opacity: 0;
}

main #pokemon[data-visible=true] .sticky {
  visibility: visible;
}

main #pokemon .filter {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 40px rgba(8, 20, 59, 0.15));
  transform: translateZ(0);
}

main #pokemon .filter .panel {
  position: absolute;
  inset: 0;
  background: url("../img/common/pattern_triangles.png") repeat;
  background-size: 160px;
}

main #pokemon .filter .pokebox {
  position: absolute;
  aspect-ratio: 1;
}

main #pokemon .filter .pokebox .poke1,
main #pokemon .filter .pokebox .poke2,
main #pokemon .filter .pokebox .poke3 {
  position: absolute;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 0ms 300ms;
}

main #pokemon .filter .pokebox .poke1[data-visible=true],
main #pokemon .filter .pokebox .poke2[data-visible=true],
main #pokemon .filter .pokebox .poke3[data-visible=true] {
  opacity: 1;
  transform: none;
  transition: opacity 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

main #pokemon .filter .pokebox .poke1 {
  top: -25.9124087591%;
  right: -22.8102189781%;
  width: 106.9343065693%;
  transform: translate3d(-5%, 15%, 0);
}

main #pokemon .filter .pokebox .poke2 {
  top: -6.0218978102%;
  left: -1.2110726644%;
  width: 89.446366782%;
  transform: translate3d(-20%, 0%, 0);
}

main #pokemon .filter .pokebox .poke3 {
  top: 4.4982698962%;
  left: 18.5121107266%;
  width: 78.7197231834%;
  transform: translate3d(0%, 20%, 0);
}

main #pokemon .content {
  --seek: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 45px;
  height: var(--viewport-unit);
  padding: 10vh 0 5vh;
}

main #pokemon .content .placeholder {
  aspect-ratio: 1;
  width: var(--size);
  margin: auto auto 0;
}

main #pokemon .content .sec-box {
  margin: 0 auto auto;
  --overflow-height: 0px;
  transform: translateY(0);
  transition: transform 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

main #pokemon .content .sec-box[data-scrolled=true] {
  transform: translateY(calc(-1 * var(--overflow-height)));
}

main #characters {
  --size: min(47.1105527638vw, 80vh, 480px);
  position: relative;
  height: calc(var(--viewport-unit) + var(--scroll-unit) * 1.5 + var(--progress) + var(--scroll-unit) * 0.5 + var(--scroll-unit) * 0.35);
  margin-top: calc(var(--viewport-unit) * -1);
  opacity: 0;
  pointer-events: none;
}

main #characters .sticky {
  height: var(--viewport-unit);
  visibility: hidden;
}

main #characters[data-visible=true] {
  opacity: 1;
  pointer-events: auto;
}

main #characters[data-visible=true] .sticky {
  visibility: visible;
}

main #characters .filter {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 40px rgba(8, 20, 59, 0.15));
  transform: translateZ(0);
}

main #characters .filter.layer3 {
  display: none;
}

main #characters .filter .panel {
  --seek: 0;
  --opacity: 1;
  opacity: var(--opacity);
  position: absolute;
  inset: 0;
  background: url("../img/common/pattern_triangles.png") repeat;
  background-size: 160px;
}

main #characters .filter.layer1 .panel {
  background-position: 0 0;
}

main #characters .filter.layer2 .panel {
  background-position: 50px 0;
}

main #characters .filter.layer3 .panel {
  background-position: 100px 0;
}

main #characters .filter .charabox {
  position: absolute;
  aspect-ratio: 375/398;
  display: flex;
  align-items: flex-end;
}

main #characters .filter .charabox img {
  position: absolute;
  top: 0;
  left: 0;
}

main #characters .filter .chara1,
main #characters .filter .chara2 {
  position: absolute;
  width: 50%;
  height: 100%;
}

main #characters .filter .chara1 {
  --seek: 0;
  right: 50%;
}

main #characters .filter .chara1 img {
  opacity: clamp(0, 4 * var(--seek), 1);
  transform-origin: 100% 50%;
  transform: translateX(calc(-20% * (1 - var(--seek)))) scale(calc(1 + 0.2 * (1 - var(--seek))));
  width: 180.6763285024%;
  margin-top: -6.2801932367%;
  margin-left: -24.6376811594%;
}

main #characters .filter .chara2 {
  --seek: 0;
  left: 50%;
}

main #characters .filter .chara2 img {
  opacity: clamp(0, 4 * var(--seek), 1);
  transform-origin: 0% 50%;
  transform: translateX(calc(20% * (1 - var(--seek)))) scale(calc(1 + 0.2 * (1 - var(--seek))));
  width: 197.1014492754%;
  margin-top: 2.8985507246%;
  margin-left: -29.4685990338%;
}

main #characters .filter .chara3,
main #characters .filter .chara4 {
  position: absolute;
  width: 57.6%;
  height: 93.216080402%;
}

main #characters .filter .chara3 {
  --seek: 0;
  left: 0;
  margin-left: -49.8666666667%;
}

main #characters .filter .chara3 img {
  opacity: clamp(0, 4 * var(--seek), 1);
  width: 97.4683544304%;
  margin-top: -25.3164556962%;
  margin-left: -6.3291139241%;
  transform: translateX(calc(-20% * (1 - var(--seek)))) scale(calc(1 + 0.2 * (1 - var(--seek))));
}

main #characters .filter .chara4 {
  --seek: 0;
  right: 0;
  margin-right: -49.8666666667%;
}

main #characters .filter .chara4 img {
  opacity: clamp(0, 4 * var(--seek), 1);
  width: 113.5021097046%;
  margin-top: -5.4852320675%;
  margin-left: 8.0168776371%;
  transform: translateX(calc(20% * (1 - var(--seek)))) scale(calc(1 + 0.2 * (1 - var(--seek))));
}

main #characters .filter .chara5,
main #characters .filter .chara6 {
  position: absolute;
}

main #characters .filter .chara5 {
  --seek: 0;
  left: 0;
}

main #characters .filter .chara5 img {
  opacity: clamp(0, 4 * var(--seek), 1);
  width: 271.0144927536%;
  margin-top: -35.2657004831%;
  margin-left: -105.3140096618%;
  transform: translateX(calc(-20% * (1 - var(--seek)))) scale(calc(1 + 0.2 * (1 - var(--seek))));
}

main #characters .filter .chara6 {
  --seek: 0;
  right: 0;
}

main #characters .filter .chara6 img {
  opacity: clamp(0, 4 * var(--seek), 1);
  width: 79.2270531401%;
  margin-top: -7.729468599%;
  margin-left: 20.7729468599%;
  transform: translateX(calc(20% * (1 - var(--seek)))) scale(calc(1 + 0.2 * (1 - var(--seek))));
}

main #characters .content {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  gap: 45px;
  height: var(--viewport-unit);
  padding: 10vh 0 5vh;
}

main #characters .content .placeholder {
  aspect-ratio: 375/398;
  width: var(--size);
  margin: auto auto 0;
}

main #characters .content .sec-box {
  margin: 0 auto auto;
  --overflow-height: 0px;
  transform: translateY(0);
  transition: transform 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

main #characters .content .sec-box[data-scrolled=true] {
  transform: translateY(calc(-1 * var(--overflow-height)));
}

main #outline {
  position: relative;
  height: calc(var(--viewport-unit) + var(--scroll-unit) * 4 + 100px);
  margin-top: calc(var(--viewport-unit) * -1);
  opacity: 0;
  pointer-events: none;
}

main #outline[data-visible=true] {
  opacity: 1;
  pointer-events: auto;
}

main #outline .sticky {
  height: var(--viewport-unit);
}

main #outline .panel {
  position: absolute;
  inset: 0;
}

main #outline .panel .frontside {
  position: absolute;
  inset: 0;
}

main #outline .panel .frontside .frame {
  position: absolute;
  inset: 0;
  display: none;
}

main #outline .panel .frontside .frame[data-visible=true] {
  display: block;
}

main #outline .panel .backside {
  visibility: hidden;
  position: absolute;
  inset: 0;
}

main #outline .panel[data-flipped=true] .frontside {
  visibility: hidden;
}

main #outline .panel[data-flipped=true] .backside {
  visibility: visible;
}

main #outline .content {
  position: relative;
  height: calc(var(--viewport-unit) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
}

main #outline .content .box {
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr 1fr;
  width: min(517.5px, 92vw);
  background: rgba(8, 20, 59, 0.2);
  border-radius: min(7.5px, 1.3333333333vw);
  backdrop-filter: blur(10px);
  transform: translateZ(0);
}

main #outline .content .box .switch,
main #outline .content .box .switch2 {
  position: relative;
  grid-row: 1/4;
  display: grid;
  gap: min(15px, 2.6666666667vw);
  grid-template-rows: subgrid;
  padding-top: min(22.5px, 4vw);
  padding-inline: min(26.25px, 4.6666666667vw);
  padding-bottom: min(18.75px, 3.3333333333vw);
}

main #outline .content .box .switch::before,
main #outline .content .box .switch2::before {
  content: "";
  position: absolute;
  top: min(3.75px, 0.6666666667vw);
  left: min(3.75px, 0.6666666667vw);
  width: min(15px, 2.6666666667vw);
  aspect-ratio: 1;
  background: var(--color-green);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

main #outline .content .box .switch .logo,
main #outline .content .box .switch2 .logo {
  align-self: center;
  text-align: center;
}

main #outline .content .box .switch .package,
main #outline .content .box .switch2 .package {
  align-self: center;
}

main #outline .content .box .switch .package img,
main #outline .content .box .switch2 .package img {
  width: 100%;
  height: auto;
}

main #outline .content .box .switch .button .button_v2,
main #outline .content .box .switch2 .button .button_v2 {
  width: 100%;
  height: min(66px, 11.7333333333vw);
}

main #outline .content .box .switch .button .button_v2 .button-text,
main #outline .content .box .switch2 .button .button_v2 .button-text {
  font-size: min(18px, 3.2vw);
  padding-right: 1em;
}

[lang=zh-cmn-Hans] main #outline .content .box .switch .button .button_v2 .button-text,
[lang=zh-cmn-Hans] main #outline .content .box .switch2 .button .button_v2 .button-text {
  font-size: min(15px, 2.6666666667vw);
}

main #outline .content .box .switch .button .button_v2 .button-icon,
main #outline .content .box .switch2 .button .button_v2 .button-icon {
  right: min(11.25px, 2vw);
}

main #outline .content .box .switch .button .button_v2 .button-icon::after,
main #outline .content .box .switch2 .button .button_v2 .button-icon::after {
  font-size: min(16.5px, 2.9333333333vw);
}

main #outline .content .box .switch {
  grid-column: 1/2;
}

main #outline .content .box .switch .logo img {
  width: 90.9090909091%;
}

main #outline .content .box .switch::after {
  content: "";
  position: absolute;
  top: 0;
  right: -2px;
  width: 4px;
  height: 100%;
  background: url("../img/toppage/outline/dot.svg") repeat-y;
  background-size: 4px;
  opacity: 0.2;
}

main #outline .content .box .switch2 {
  grid-column: 2/3;
}

main #outline .content .box .switch2 .logo img {
  width: 79.2727272727%;
}

main #outline .content .box .bottom {
  grid-row: 4/5;
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  padding-top: min(39px, 6.9333333333vw);
  padding-bottom: min(45px, 8vw);
}

main #outline .content .box .bottom .button_v2 {
  width: 73.4782608696%;
  height: min(88.5px, 15.7333333333vw);
}

main #outline .content .box .bottom .button_v2 .button-text {
  font-size: min(30px, 5.3333333333vw);
}

main #outline .content .box .bottom .button_v2 .button-icon::after {
  font-size: min(22.5px, 4vw);
}

main .mega_banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  width: 250px;
  height: 90px;
  margin: auto;
}

main .mega_banner[data-visible=false] {
  transform: translateY(calc(100% + 40px));
  transition: transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

main .mega_banner a {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 18px;
  width: 100%;
  height: 100%;
  border: solid 2px #fff;
  border-radius: 10px;
  overflow: hidden;
  background: #000 url("../img/toppage/banner/background@sp.png") center/cover no-repeat;
  transition: filter 500ms;
  filter: drop-shadow(0 0 5px var(--color-glow)) drop-shadow(0 0 10px var(--color-glow));
}

main .mega_banner .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

[lang=ja] main .mega_banner .logo img {
  width: 118.5px;
}

[lang=zh-cmn-Hans] main .mega_banner .logo img {
  width: 117.5px;
}

[lang=zh-cmn-Hant] main .mega_banner .logo img {
  width: 118px;
}

main .mega_banner .text {
  grid-row: 2;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0.1em;
  background: linear-gradient(90deg, #2ba1d1, #d079ff);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
}

main .mega_banner .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: var(--color-navy);
  border: solid 1px var(--color-cyan);
  border-radius: 50%;
  transform: translate(50%, -50%) rotate(45deg);
  --size: 13px;
}

main .mega_banner .close::before,
main .mega_banner .close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: background-color 200ms;
}

main .mega_banner .close::before {
  width: var(--size);
  height: 2px;
}

main .mega_banner .close::after {
  width: 2px;
  height: var(--size);
}

@media screen and (min-width: 540px) {
  main #news .cards {
    gap: 20px;
  }
}

@media screen and (min-width: 768px) {
  main #news .bottom {
    margin-top: 60px;
  }

  main #news .event {
    margin-top: 60px;
  }

  main #news .event a {
    font-size: 20px;
    line-height: 1.5;
  }

  main #news .event a .frame {
    --border-width: 3px;
    width: 640px;
    height: 100px;
    filter: drop-shadow(0 0 5px #00b2e8) drop-shadow(0 0 11px #00b2e8);
  }

  main #news .event a .inner {
    text-shadow: 2px 2px 0px rgba(8, 20, 59, 0.25);
    filter: drop-shadow(0 0 6px #00b2e8) drop-shadow(0 0 12px #00b2e8);
  }

  main #news .event a .inner .text br {
    display: none;
  }

  main #news .event a .inner .icon {
    position: absolute;
    right: 47px;
  }

  main #stage .content .grid {
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(5, var(--unit));
    gap: 20px;
    min-width: auto;
    min-height: max(768px, var(--viewport-unit), 60vw);
    transform: translate3d(calc(var(--shift) * (var(--unit) * -1 - 30px)), 0, 0);
    perspective-origin: 50% 20%;
  }

  main #stage .content .grid .cell {
    width: auto;
  }

  main #stage .content .grid .center {
    aspect-ratio: 16/9;
    min-height: 245px;
  }

  main #stage .content .grid .center .sec-box {
    width: 100%;
    max-width: initial;
    transform: none;
  }

  main #stage .content .grid .center .sec-box .progress {
    display: none;
  }

  main #stage .content .grid .d3,
  main #stage .content .grid .m1,
  main #stage .content .grid .d1,
  main #stage .content .grid .e1,
  main #stage .content .grid .n1 {
    grid-row: 1/2;
  }

  main #stage .content .grid .d4,
  main #stage .content .grid .m2,
  main #stage .content .grid .center,
  main #stage .content .grid .e2,
  main #stage .content .grid .n2 {
    grid-row: 2/3;
  }

  main #stage .content .grid .m4,
  main #stage .content .grid .m3,
  main #stage .content .grid .d2,
  main #stage .content .grid .e3,
  main #stage .content .grid .n3 {
    grid-row: 3/4;
  }

  main #stage .content .grid .d3,
  main #stage .content .grid .d4,
  main #stage .content .grid .m4 {
    grid-column: 1/2;
  }

  main #stage .content .grid .m1,
  main #stage .content .grid .m2,
  main #stage .content .grid .m3 {
    grid-column: 2/3;
  }

  main #stage .content .grid .d1,
  main #stage .content .grid .center,
  main #stage .content .grid .d2 {
    grid-column: 3/4;
  }

  main #stage .content .grid .e1,
  main #stage .content .grid .e2,
  main #stage .content .grid .e3 {
    grid-column: 4/5;
  }

  main #stage .content .grid .n1,
  main #stage .content .grid .n2,
  main #stage .content .grid .n3 {
    grid-column: 5/6;
  }

  main #stage .content .grid .e3 {
    display: block;
  }

  main #stage .content .grid .n4 {
    display: none;
  }

  main #stage .content .grid .d3 picture,
  main #stage .content .grid .m1 picture {
    transform: translate3d(0, 0, calc(1500px * (1 - var(--seek))));
  }

  main #stage .content .grid .e1 picture,
  main #stage .content .grid .n1 picture {
    transform: translate3d(0, 0, calc(1300px * (1 - var(--seek))));
  }

  main #stage .content .grid .d4 picture,
  main #stage .content .grid .m2 picture {
    transform: translate3d(0, 0, calc(1800px * (1 - var(--seek))));
  }

  main #stage .content .grid .e2 picture,
  main #stage .content .grid .n2 picture {
    transform: translate3d(0, 0, calc(1700px * (1 - var(--seek))));
  }

  main #stage .content .grid .m4 picture,
  main #stage .content .grid .m3 picture {
    transform: translate3d(0, 0, calc(1000px * (1 - var(--seek))));
  }

  main #stage .content .grid .d2 picture {
    transform: translate3d(0, 0, calc(1600px * (1 - var(--seek))));
  }

  main #stage .content .grid .e3 picture,
  main #stage .content .grid .n3 picture {
    transform: translate3d(0, 0, calc(1300px * (1 - var(--seek))));
  }

  main #stage .content > .progress {
    display: block;
    position: absolute;
    right: 30px;
    bottom: 30px;
  }

  main #megaevolution .content .progress {
    position: fixed;
    right: 30px;
    bottom: 30px;
  }

  main #pokemon .filter .panel {
    background-size: 240px;
  }

  main #characters .filter .panel {
    background-size: 240px;
  }
}

@media screen and (hover: hover) and (min-width: 768px) {
  main #news .event a:hover .frame {
    filter: drop-shadow(0 0 2px #00b2e8) drop-shadow(0 0 5px #00b2e8);
  }

  main #news .event a:hover .inner {
    filter: drop-shadow(0 0 2px #00b2e8) drop-shadow(0 0 4px #00b2e8);
  }
}

@media screen and (-ms-high-contrast: active) and (min-width: 768px), screen and (-ms-high-contrast: none) and (min-width: 768px) {
  main #news .event a:hover .frame {
    filter: drop-shadow(0 0 2px #00b2e8) drop-shadow(0 0 5px #00b2e8);
  }

  main #news .event a:hover .inner {
    filter: drop-shadow(0 0 2px #00b2e8) drop-shadow(0 0 4px #00b2e8);
  }
}

@media screen and (min-width: 960px) {
  main #news .cards {
    gap: 15px;
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  main .container {
    width: 84.2814371257%;
    max-width: 1348.502994012px;
  }

  main .title-with-arrows {
    filter: drop-shadow(0 0 3px #00b2e8) drop-shadow(0 0 6px #00b2e8) drop-shadow(0 0 30px #00b2e8);
  }

  main .title-with-arrows {
    margin-bottom: 30px;
  }

  main .title-with-arrows::before,
  main .title-with-arrows::after {
    font-size: 45px;
  }

  main .title-with-arrows span {
    font-size: 40px;
  }

  main .sec-box .sec-title-en {
    width: 304px;
    height: 38px;
  }

  main .sec-box .sec-title-en span {
    font-size: 16px;
  }

  main .sec-box .sec-title {
    font-size: 56px;
    letter-spacing: 0.05em;
  }

  main .sec-box .sec-line {
    grid-template-rows: 2px;
    grid-template-columns: 1fr 38px 1fr;
  }

  main .sec-box .sec-line .icon::before {
    font-size: 30px;
  }

  main .sec-box .sec-line .line span::before {
    top: -2px;
    width: 6px;
    height: 6px;
  }

  main .sec-box .sec-text {
    font-size: 16px;
  }

  main .sec-box .button_v2 {
    width: 301px;
    height: 70px;
  }

  main .sec-box .button_v2 .button-text {
    font-size: 24px;
  }

  main .sec-box .button_v2 .button-icon::after {
    font-size: 20px;
  }

  main .progress {
    width: 200px;
    height: 30px;
    border-width: 2px;
  }

  main .progress::after {
    font-size: 20px;
    top: 3px;
    left: 3px;
  }

  main .keyvisual .switch {
    width: 180px;
  }

  main .keyvisual .inner .catchcopy {
    filter: drop-shadow(0 0 3px #00b2e8) drop-shadow(0 0 6px #00b2e8) drop-shadow(0 0 30px #00b2e8);
  }

  main .keyvisual .inner .reserve dt::before,
  main .keyvisual .inner .reserve dt::after {
    filter: drop-shadow(0 0 3px #00b2e8) drop-shadow(0 0 6px #00b2e8) drop-shadow(0 0 30px #00b2e8);
  }

  main .keyvisual .inner .reserve dt {
    filter: drop-shadow(0 0 3px #00b2e8) drop-shadow(0 0 6px #00b2e8) drop-shadow(0 0 30px #00b2e8);
  }

  main .keyvisual .inner .kvplayer .icon {
    filter: drop-shadow(0 0 3px rgba(66, 175, 227, 0.8)) drop-shadow(0 0 6px rgba(66, 175, 227, 0.8)) drop-shadow(0 0 30px rgba(66, 175, 227, 0.8));
  }

  main .keyvisual .inner .kvplayer .icon::after {
    filter: drop-shadow(0 0 3px #42afe3) drop-shadow(0 0 6px #42afe3) drop-shadow(0 0 30px #42afe3);
  }

  main #news .button_v2 {
    width: 301px;
    height: 70px;
  }

  main #news .button_v2 .button-text {
    font-size: 24px;
  }

  main #news .button_v2 .button-icon::after {
    font-size: 20px;
  }

  main #news .event a .inner .icon::after {
    font-size: 20px;
  }

  main #howtoplay .panel .backside::after {
    width: 50%;
    mask-image: linear-gradient(90deg, transparent 0px, #000 120px);
    transform: translate3d(100%, 0, 0);
    transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 0ms 500ms;
  }

  main #howtoplay .content {
    justify-content: flex-end;
    max-width: 1366px;
    margin: 0 auto;
  }

  main #howtoplay .content .sec-box {
    width: 432px;
    margin: 0 120px;
  }

  main #howtoplay .content .progress {
    position: fixed;
    right: 30px;
    bottom: 30px;
  }

  main #howtoplay:has(.content[data-visible=true]) .panel .backside::after {
    transform: none;
    transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  main #megaevolution .filter .panel::after {
    width: 50%;
    mask-image: linear-gradient(270deg, transparent 0px, #000 120px);
    transform: translate3d(-100%, 0, 0);
  }

  main #megaevolution .content {
    justify-content: flex-start;
  }

  main #megaevolution .content .sec-box {
    width: 432px;
    margin: 0 120px;
  }

  main #megaevolution:has(.content[data-visible=true]) .filter .panel::after {
    transform: none;
    transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  main #pokemon .filter .panel {
    background-size: 320px;
  }

  main #pokemon .content {
    align-items: center;
    grid-template-rows: auto;
    grid-template-columns: minmax(480px, 578px) min(35vw, 422px);
    justify-content: center;
    gap: 60px;
    padding: 0 80px 0 80px;
    max-width: 1366px;
    margin: 0 auto;
  }

  main #pokemon .content .placeholder {
    width: 100%;
    margin: auto;
  }

  main #pokemon .content .sec-box {
    transform: none !important;
    width: 100%;
    max-width: initial;
    margin: 0 80px 0 0;
  }

  main #pokemon .content .progress {
    position: fixed;
    right: 30px;
    bottom: 30px;
  }

  main #characters .filter.layer3 {
    display: block;
  }

  main #characters .filter .panel {
    background-size: 320px;
  }

  main #characters .filter .chara3,
  main #characters .filter .chara4 {
    width: 57.2463768116%;
    height: 93.1662870159%;
  }

  main #characters .filter .chara3 {
    margin-left: -50%;
  }

  main #characters .filter .chara4 {
    margin-right: -50%;
  }

  main #characters .filter .chara5,
  main #characters .filter .chara6 {
    width: 50%;
    height: 86.3325740319%;
  }

  main #characters .filter .chara5 {
    margin-left: -85.9903381643%;
  }

  main #characters .filter .chara6 {
    margin-right: -85.9903381643%;
  }

  main #characters .content {
    max-width: 1366px;
    margin: 0 auto;
  }

  main #characters .content .placeholder {
    width: 30.3074670571vw;
    max-width: 414px;
  }

  main #characters .content .placeholder {
    margin: 0 auto auto;
  }

  main #characters .content .sec-box {
    transform: none !important;
    grid-row: 1/2;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 280px 280px 1fr;
    width: auto;
    max-width: initial;
    margin: auto 120px 0 80px;
  }

  main #characters .content .sec-box .sec-title-en {
    width: 100%;
    grid-row: 1/2;
    grid-column: 1/3;
  }

  main #characters .content .sec-box .sec-title {
    grid-row: 2/3;
    grid-column: 1/2;
    text-align: right;
  }

  main #characters .content .sec-box .sec-line {
    display: none;
  }

  main #characters .content .sec-box .sec-text {
    grid-row: 2;
    grid-column: 2/3;
    text-align: left;
  }

  main #characters .content .sec-box .sec-button {
    grid-row: 2/3;
    grid-column: 3/4;
    display: flex;
    justify-content: flex-end;
  }

  main #characters .content .progress {
    position: fixed;
    right: 30px;
    bottom: 30px;
  }

  main #outline .content .box {
    width: 742px;
    border-radius: 10px;
  }

  main #outline .content .box .switch,
  main #outline .content .box .switch2 {
    gap: 20px;
    padding: 26px 50px 20px;
  }

  main #outline .content .box .switch::before,
  main #outline .content .box .switch2::before {
    top: 10px;
    left: 10px;
    width: 20px;
  }

  main #outline .content .box .switch .button .button_v2,
  main #outline .content .box .switch2 .button .button_v2 {
    height: 64px;
  }

  main #outline .content .box .switch .button .button_v2 .button-text,
  main #outline .content .box .switch2 .button .button_v2 .button-text {
    font-size: 16px;
    padding-right: 0;
  }

  [lang=zh-cmn-Hans] main #outline .content .box .switch .button .button_v2 .button-text,
  [lang=zh-cmn-Hans] main #outline .content .box .switch2 .button .button_v2 .button-text {
    font-size: 16px;
  }

  main #outline .content .box .switch .button .button_v2 .button-icon,
  main #outline .content .box .switch2 .button .button_v2 .button-icon {
    right: 20px;
  }

  main #outline .content .box .switch .button .button_v2 .button-icon::after,
  main #outline .content .box .switch2 .button .button_v2 .button-icon::after {
    font-size: 14px;
  }

  main #outline .content .box .switch::after {
    right: -4px;
    width: 8px;
    background-size: 8px;
  }

  main #outline .content .box .bottom {
    padding: 60px 0;
  }

  main #outline .content .box .bottom .button_v2 {
    width: 300px;
    height: 70px;
  }

  main #outline .content .box .bottom .button_v2 .button-text {
    font-size: 24px;
  }

  main #outline .content .box .bottom .button_v2 .button-icon::after {
    font-size: 20px;
  }
}

@media screen and (orientation: landscape) and (min-width: 1024px) {
  main .keyvisual {
    aspect-ratio: 1366/806;
  }

  main .keyvisual .inner {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 260px 1fr;
    height: var(--viewport-unit);
    min-height: 820px;
    padding-top: 0;
  }

  main .keyvisual .inner .catchcopy {
    grid-row: 2/3;
    grid-column: 1/2;
    font-size: 38px;
    margin-top: 18px;
    margin-bottom: auto;
  }

  main .keyvisual .inner .catchcopy .small {
    font-size: 20px;
    line-height: 1.5;
  }

  main .keyvisual .inner .maintitle {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    width: 409px;
    margin: auto;
  }

  main .keyvisual .inner .information {
    grid-row: 1/2;
    grid-column: 1/2;
    background: var(--color-navy);
    border-radius: 0 30px 10px 0;
    padding: 20px;
    overflow: hidden;
    margin-top: auto;
  }

  main .keyvisual .inner .information::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.3;
    background-image: linear-gradient(0deg, #fff 0px, #fff 1px, transparent 1px, transparent 3px);
    background-size: 100% 3px;
    background-repeat: repeat-y;
    mask-image: linear-gradient(90deg, #fff 0%, transparent 40%, transparent 60%, #fff 100%);
  }

  main .keyvisual .inner .release {
    white-space: pre;
    flex-direction: column;
    align-items: center;
    font-size: 38px;
    margin-bottom: 22px;
  }

  main .keyvisual .inner .release small {
    font-size: 52.1739130435%;
  }

  main .keyvisual .inner .reserve {
    width: 100%;
    margin-bottom: 16px;
  }

  main .keyvisual .inner .reserve dl:not(:last-child) {
    margin-bottom: 30px;
  }

  main .keyvisual .inner .reserve dt {
    font-size: 12px;
    grid-template-columns: 1fr 96px 1fr;
    margin-bottom: 16px;
  }

  main .keyvisual .inner .reserve dd .button_v2 {
    width: 100%;
    height: 64px;
  }

  main .keyvisual .inner .reserve dd .button_v2 .button-text {
    font-size: 24px;
    margin-right: 15px;
  }

  [lang=zh-cmn-Hant] main .keyvisual .inner .reserve dd .button_v2 .button-text {
    font-size: 20px;
    margin-right: 20px;
  }

  main .keyvisual .inner .reserve dd .button_v2 .button-icon {
    right: 15px;
  }

  main .keyvisual .inner .reserve dd .button_v2 .button-icon::after {
    font-size: 13px;
  }

  main .keyvisual .inner .reserve dd .reserve_text {
    font-size: 24px;
  }

  main .keyvisual .inner .reserve dd .reserve_text small {
    font-size: 40%;
  }

  main .keyvisual .inner .reserve dd .reserve_caution {
    font-size: 12px;
  }

  main .keyvisual .inner .kvplayer {
    width: 100%;
    margin-bottom: 0;
    border-radius: 5px 30px;
  }

  main .keyvisual .inner .kvplayer .icon {
    width: 50px;
  }

  main .keyvisual .inner .kvplayer .icon::after {
    font-size: 11px;
  }

  main .mega_banner {
    left: auto;
    right: -10px;
    bottom: 230px;
    width: 220px;
    height: 140px;
  }

  main .mega_banner[data-visible=false] {
    transform: translateX(calc(100% + 20px));
  }

  main .mega_banner a {
    grid-template-rows: 1fr 23px;
    background-image: url("../img/toppage/banner/background@pc.png");
    filter: drop-shadow(0 0 10px var(--color-glow)) drop-shadow(0 0 20px var(--color-glow));
  }

  [lang=ja] main .mega_banner .logo img {
    width: 164px;
  }

  [lang=zh-cmn-Hans] main .mega_banner .logo img {
    width: 159px;
  }

  [lang=zh-cmn-Hant] main .mega_banner .logo img {
    width: 158px;
  }

  main .mega_banner .text {
    font-size: 14px;
  }

  main .mega_banner .close {
    --size: 16px;
    left: 0;
    right: auto;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

@media screen and (hover: hover) and (min-width: 1024px) {
  main .keyvisual .inner .kvplayer:hover .icon {
    filter: drop-shadow(0 0 1px rgba(66, 175, 227, 0.8)) drop-shadow(0 0 2px rgba(66, 175, 227, 0.8)) drop-shadow(0 0 10px rgba(66, 175, 227, 0.8));
  }

  main .keyvisual .inner .kvplayer:hover .icon::after {
    filter: drop-shadow(0 0 1px #42afe3) drop-shadow(0 0 2px #42afe3) drop-shadow(0 0 10px #42afe3);
  }
}

@media screen and (-ms-high-contrast: active) and (min-width: 1024px), screen and (-ms-high-contrast: none) and (min-width: 1024px) {
  main .keyvisual .inner .kvplayer:hover .icon {
    filter: drop-shadow(0 0 1px rgba(66, 175, 227, 0.8)) drop-shadow(0 0 2px rgba(66, 175, 227, 0.8)) drop-shadow(0 0 10px rgba(66, 175, 227, 0.8));
  }

  main .keyvisual .inner .kvplayer:hover .icon::after {
    filter: drop-shadow(0 0 1px #42afe3) drop-shadow(0 0 2px #42afe3) drop-shadow(0 0 10px #42afe3);
  }
}

@media screen and (orientation: landscape) and (min-width: 1024px) and (hover: hover) {
  main .mega_banner a:hover {
    filter: drop-shadow(0 0 5px var(--color-glow)) drop-shadow(0 0 10px var(--color-glow)) !important;
  }
}

@media screen and (orientation: landscape) and (min-width: 1024px) and (-ms-high-contrast: active), screen and (orientation: landscape) and (min-width: 1024px) and (-ms-high-contrast: none) {
  main .mega_banner a:hover {
    filter: drop-shadow(0 0 5px var(--color-glow)) drop-shadow(0 0 10px var(--color-glow)) !important;
  }
}

@media screen and (min-width: 1280px) {
  main #news .cards {
    gap: 30px;
  }

  main #stage .content .grid {
    gap: 30px;
  }

  main #pokemon .content {
    gap: 86px;
    padding: 0 160px 0 120px;
  }

  main #pokemon .content .sec-box {
    margin: 0 160px 0 0;
  }
}

@media (hover: hover) {
  main .keyvisual .inner .kvplayer:hover .icon {
    transform: translateZ(0);
    filter: drop-shadow(0 0 min(0.75px, 0.1333333333vw) rgba(66, 175, 227, 0.8)) drop-shadow(0 0 min(1.5px, 0.2666666667vw) rgba(66, 175, 227, 0.8)) drop-shadow(0 0 min(7.5px, 1.3333333333vw) rgba(66, 175, 227, 0.8));
  }

  main .keyvisual .inner .kvplayer:hover .icon::after {
    color: var(--color-cyan);
  }

  main .keyvisual .inner .kvplayer:hover .icon::after {
    transform: translateZ(0);
    filter: drop-shadow(0 0 min(0.75px, 0.1333333333vw) #42afe3) drop-shadow(0 0 min(1.5px, 0.2666666667vw) #42afe3) drop-shadow(0 0 min(7.5px, 1.3333333333vw) #42afe3);
  }

  main #news .event a:hover .frame {
    filter: drop-shadow(0 0 2px #00b2e8) drop-shadow(0 0 5px #00b2e8);
  }

  main #news .event a:hover .inner {
    filter: drop-shadow(0 0 2px #00b2e8) drop-shadow(0 0 4px #00b2e8);
  }

  main .mega_banner a:hover {
    filter: drop-shadow(0 0 2px var(--color-glow)) drop-shadow(0 0 5px var(--color-glow));
  }

  main .mega_banner .close:hover::before,
  main .mega_banner .close:hover::after {
    background: var(--color-cyan);
  }
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  main .keyvisual .inner .kvplayer:hover .icon {
    transform: translateZ(0);
    filter: drop-shadow(0 0 min(0.75px, 0.1333333333vw) rgba(66, 175, 227, 0.8)) drop-shadow(0 0 min(1.5px, 0.2666666667vw) rgba(66, 175, 227, 0.8)) drop-shadow(0 0 min(7.5px, 1.3333333333vw) rgba(66, 175, 227, 0.8));
  }

  main .keyvisual .inner .kvplayer:hover .icon::after {
    color: var(--color-cyan);
  }

  main .keyvisual .inner .kvplayer:hover .icon::after {
    transform: translateZ(0);
    filter: drop-shadow(0 0 min(0.75px, 0.1333333333vw) #42afe3) drop-shadow(0 0 min(1.5px, 0.2666666667vw) #42afe3) drop-shadow(0 0 min(7.5px, 1.3333333333vw) #42afe3);
  }

  main #news .event a:hover .frame {
    filter: drop-shadow(0 0 2px #00b2e8) drop-shadow(0 0 5px #00b2e8);
  }

  main #news .event a:hover .inner {
    filter: drop-shadow(0 0 2px #00b2e8) drop-shadow(0 0 4px #00b2e8);
  }

  main .mega_banner a:hover {
    filter: drop-shadow(0 0 2px var(--color-glow)) drop-shadow(0 0 5px var(--color-glow));
  }

  main .mega_banner .close:hover::before,
  main .mega_banner .close:hover::after {
    background: var(--color-cyan);
  }
}