#news .tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 60px;
}

#news .tags label {
  --border-width: 2px;
  --border-radius: 5px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 20px 0.15em;
  border-radius: var(--border-radius);
  background: var(--color-purple);
  overflow: hidden;
}

#news .tags label input {
  display: none;
}

#news .tags label span {
  position: relative;
}

#news .tags label::before,
#news .tags label::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms;
}

#news .tags label::before {
  transition: opacity 200ms;
  background: linear-gradient(90deg, var(--color-lightblue) 0%, #8e8ed8 35%, #c97bdf 80%, var(--color-purple) 100%);
}

#news .tags label::after {
  border: solid var(--border-width) var(--color-white);
  border-radius: var(--border-radius);
}

#news .tags label:has(input:checked) {
  pointer-events: none;
  color: var(--color-purple);
  background: var(--color-white);
}

#news .tags label:has(input:checked)::before,
#news .tags label:has(input:checked)::after {
  opacity: 0 !important;
}

#news .page-list .colorbox-inner {
  overflow: initial;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 22.5px 7.5px 20px;
}

#news .page-list .colorbox-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border: solid 4px var(--color-white);
  opacity: 0;
  border-radius: 6px;
  overflow: hidden;
  transition: opacity 0.3s;
}

#news .page-list .img {
  position: relative;
  aspect-ratio: 295/165;
  overflow: hidden;
  background: #000;
}

#news .page-list .img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#news .page-list .img .cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#news .page-list .info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#news .page-list .info .date {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
}

#news .page-list .info .type {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 17.5px;
  padding-bottom: 0.25em;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  background: var(--color-purple);
  border-radius: 5px;
}

#news .page-list h2,
#news .page-list .title {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

#news .page-list a .diamond .icon,
#news .page-list button .diamond .icon {
  font-size: 13px;
  margin-left: 0.2em;
  transition: transform 300ms;
}

#news .page-list a[target=_blank] .date {
  display: flex;
  align-items: center;
  gap: 8px;
}

#news .page-list button .img img {
  opacity: 0.6;
}

#news .page-list .outerlink-icon {
  position: absolute;
  right: 13px;
  bottom: 8px;
  width: 15px;
  height: 10px;
}

#news .page-list .outerlink-icon::before,
#news .page-list .outerlink-icon::after {
  width: 11.5px;
  height: 6.5px;
}

main {
  opacity: 0.4;
  transition: opacity 600ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

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

main > .background::after {
  display: none;
}

.mainvisual {
  position: relative;
  top: 0;
  height: calc(100vh + 100px);
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.mainvisual[data-visible=false] {
  opacity: 0;
  pointer-events: none;
}

.mainvisual .sticky {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow-x: clip;
}

.mainvisual .content {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
}

.mainvisual .switch {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  z-index: 1;
  transform: translate3d(-100%, 0, 0);
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mainvisual .switch[data-visible=true] {
  transform: none;
}

.mainvisual .center {
  position: absolute;
  top: 38.2308845577vh;
  left: 50%;
}

.mainvisual .center div {
  position: absolute;
  top: 0;
  left: 0;
}

.mainvisual .hoopa {
  width: min(585.75px, 104.1333333333vw);
  margin-left: max(-313.5px, -55.7333333333vw);
  margin-top: max(-322.5px, -57.3333333333vw);
}

.mainvisual .raichu_x {
  width: min(660px, 117.3333333333vw);
  margin-left: max(-273px, -48.5333333333vw);
  margin-top: max(-498.75px, -88.6666666667vw);
}

.mainvisual .raichu_y {
  width: min(514.5px, 91.4666666667vw);
  margin-left: max(-160.5px, -28.5333333333vw);
  margin-top: max(-34.5px, -6.1333333333vw);
}

.mainvisual .logos {
  width: min(0px, 0vw);
  margin-left: min(113.25px, 20.1333333333vw);
  margin-top: max(-212.25px, -37.7333333333vw);
}

.mainvisual .logo_za {
  width: min(207.75px, 36.9333333333vw);
  margin-left: max(-102.75px, -18.2666666667vw);
  margin-top: max(-104.25px, -18.5333333333vw);
}

[lang=ja] .mainvisual .logo_mega {
  width: min(315.75px, 56.1333333333vw);
  margin-left: max(-156.75px, -27.8666666667vw);
  margin-top: min(6.75px, 1.2vw);
}

[lang=zh-cmn-Hans] .mainvisual .logo_mega {
  width: min(300px, 53.3333333333vw);
  margin-left: max(-141.75px, -25.2vw);
  margin-top: min(6.75px, 1.2vw);
}

[lang=zh-cmn-Hant] .mainvisual .logo_mega {
  width: min(300px, 53.3333333333vw);
  margin-left: max(-141.75px, -25.2vw);
  margin-top: min(6.75px, 1.2vw);
}

.mainvisual .logos {
  opacity: 0;
  transform: scale(3);
  transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mainvisual .logos[data-visible=true] {
  opacity: 1;
  transform: none;
}

.mainvisual .bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  justify-content: center;
  width: 94.6666666667%;
  max-width: 480px;
  margin: auto;
  opacity: 0;
  transform: translate3d(0, calc(100% + 30px), 0);
  transition: transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 700ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.mainvisual .bottom[data-visible=true] {
  transform: none;
  opacity: 1;
}

.mainvisual .bottom .info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mainvisual .bottom .info .stripetext {
  margin: 0;
}

.mainvisual .bottom .info .stripetext .line-bg {
  margin: 0;
  filter: blur(1px);
}

.mainvisual .bottom .info .stripetext .line-bg::before {
  inset: 0;
}

.mainvisual .bottom .info .stripetext .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
}

.mainvisual .bottom .info .stripetext .text img {
  display: block;
  width: auto;
  height: min(6.6666666667vw, 34px);
  height: 25px;
}

.mainvisual .bottom .info .button_eshop {
  width: 100%;
  max-width: 490px;
  margin: 0 auto;
  height: 40px;
}

.mainvisual .bottom .pv {
  display: none;
}

.mainvisual .bottom .pv .pv_movie .colorbox-content::before {
  margin: -5px;
}

.player {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}

.player:focus-visible .diamond .icon {
  transform: translate3d(0.4em, 0, 0);
}

.player picture {
  position: absolute;
  inset: 0;
  opacity: 0.6;
}

.player picture img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.player .diamond .icon {
  font-size: 13px;
  margin-left: 0.2em;
  transition: transform 300ms;
}

.pv_sp {
  width: 94.6666666667%;
  max-width: 360px;
  margin: 0 auto;
}

#news {
  padding: 30vh 0 30vh;
}

#news .arrow-button {
  width: 100%;
  margin-top: 40px;
}

#about {
  position: relative;
}

#about .text-wrap {
  position: relative;
  padding: 50vh 0 30vh;
}

#about .text-wrap .text-inner {
  position: relative;
}

#about .text-wrap .text-base {
  color: #666;
  font-size: 27px;
  font-weight: 900;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
}

#about .text-wrap .text-base[data-visible=true] {
  color: var(--color-white);
  transition: color 800ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

#about .text-wrap .pc_only {
  display: none;
}

#about .text-wrap .sp_only {
  display: block;
}

#about .about-img {
  margin-top: 60px;
  margin-bottom: 40px;
}

#about .arrow-button {
  width: 100%;
}

#about .grid {
  display: grid;
  gap: 40px;
  margin: 0 auto;
}

#about .grid .block2 {
  display: grid;
}

#about .grid .colorbox .colorbox-inner {
  width: 94.2249240122%;
  padding: 40px 0;
  margin: 0 auto;
}

#about .grid .colorbox .title {
  text-align: center;
  margin-bottom: 40px;
}

#about .grid .colorbox .text {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

#about .grid .rel {
  position: relative;
}

#about .grid .hoopa {
  display: block;
  position: relative;
  width: 90.7042253521%;
  margin-left: auto;
  margin-bottom: -13.5211267606%;
  z-index: 1;
}

#about .grid .cardbox .cardbox-inner {
  padding: 30px;
}

#about .grid .cardbox .title {
  color: var(--color-white);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
}

#about .grid .cardbox .title .name {
  font-size: 27px;
  margin-bottom: 10px;
}

#about .grid .cardbox .title .type {
  font-size: 18px;
}

#about .grid .cardbox .info {
  display: grid;
  gap: 5px;
  margin-top: 20px;
}

#about .grid .cardbox .info dl {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

#about .grid .cardbox .info dt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 65px;
  height: 35px;
  background: var(--color-purple);
  border-radius: 5px;
}

#raichu {
  position: relative;
}

#raichu .colorbox {
  max-width: 672px;
  margin: 0 auto;
}

#raichu .colorbox .title {
  text-align: center;
  padding: 40px 0;
}

#raichu .colorbox .title .pc_only {
  display: none;
}

#raichu .colorbox .title .sp_only {
  display: block;
}

#raichu .grid {
  position: relative;
  display: grid;
  gap: 57.5px;
}

#raichu .grid .raichu_x,
#raichu .grid .raichu_y {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#raichu .grid .raichu_x .button-wrap,
#raichu .grid .raichu_y .button-wrap {
  display: flex;
  justify-content: center;
}

#raichu .grid .raichu_x .arrow-button,
#raichu .grid .raichu_y .arrow-button {
  width: 263px;
}

#raichu .grid .raichu_x .arrow-button .arrow-button-text,
#raichu .grid .raichu_y .arrow-button .arrow-button-text {
  font-size: 27px;
  gap: 13px;
}

#raichu .grid .raichu_x .arrow-button .arrow-button-text::before,
#raichu .grid .raichu_x .arrow-button .arrow-button-text::after,
#raichu .grid .raichu_y .arrow-button .arrow-button-text::before,
#raichu .grid .raichu_y .arrow-button .arrow-button-text::after {
  font-size: 18px;
}

#raichu .grid .raichu_x picture,
#raichu .grid .raichu_y picture {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
}

#raichu .grid .raichu_x .button-wrap,
#raichu .grid .raichu_y .button-wrap {
  opacity: 0;
  transform: translate3d(-100px, 0, 0);
}

#raichu .grid .raichu_x .slidein[data-visible=true] picture,
#raichu .grid .raichu_y .slidein[data-visible=true] picture {
  opacity: 1;
  transform: none !important;
  transition: opacity 720ms cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#raichu .grid .raichu_x .slidein[data-visible=true] .button-wrap,
#raichu .grid .raichu_y .slidein[data-visible=true] .button-wrap {
  opacity: 1;
  transform: none !important;
  transition: opacity 720ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 500ms, transform 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 500ms;
}

#raichu .grid .raichu_x {
  gap: 13px;
}

#raichu .grid .raichu_x picture {
  display: block;
  width: 82.9577464789%;
  margin: 0 auto;
}

#raichu .grid .raichu_y {
  gap: 25px;
}

#raichu .grid .raichu_y picture {
  display: block;
  width: 73.0985915493%;
  margin: 0 auto;
}

#raichu .bottom .arrow-button {
  width: 100%;
  margin-top: 40px;
}

#characters .slidein {
  max-width: 672px;
  margin: 0 auto;
}

#characters .colorbox-inner {
  padding: 40px 0;
  text-align: center;
}

#characters .charas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

#characters .charas > div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#characters .charas .visual {
  position: relative;
  width: 100%;
  aspect-ratio: 339/689;
}

#characters .charas .visual img {
  position: absolute;
}

#characters .charas .chara1 img {
  bottom: 5.6603773585%;
  left: 31.2684365782%;
  width: 41.8879056047%;
}

#characters .charas .chara2 img {
  bottom: 5.3701015965%;
  left: 5.8997050147%;
  width: 75.2212389381%;
}

#characters .charas .arrow-button {
  width: 100%;
  max-width: 225px;
}

#characters .slidein:has(.charas) .chara1 img {
  opacity: 0;
  transform: translate3d(-80px, 0, 0);
}

#characters .slidein:has(.charas) .chara1 .arrow-button {
  opacity: 0;
}

#characters .slidein:has(.charas) .chara2 img {
  opacity: 0;
  transform: translate3d(120px, 0, 0);
}

#characters .slidein:has(.charas) .chara2 .arrow-button {
  opacity: 0;
}

#characters .slidein:has(.charas)[data-visible=true] .chara1 img,
#characters .slidein:has(.charas)[data-visible=true] .chara2 img {
  opacity: 1;
  transform: none;
  transition: opacity 720ms cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#characters .slidein:has(.charas)[data-visible=true] .chara1 .arrow-button,
#characters .slidein:has(.charas)[data-visible=true] .chara2 .arrow-button {
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 600ms;
}

#lineup {
  position: relative;
  padding-bottom: 80px;
}

#lineup .title {
  text-align: center;
  margin-bottom: 77px;
}

#lineup .box {
  position: relative;
}

#lineup .box .logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  position: absolute;
  top: -47px;
  width: 100%;
  z-index: 1;
}

#lineup .box .logos .logo_za {
  width: 114.5px;
}

[lang=ja] #lineup .box .logos .logo_mega {
  width: 195.5px;
}

[lang=zh-cmn-Hant] #lineup .box .logos .logo_mega {
  width: 195px;
}

[lang=zh-cmn-Hans] #lineup .box .logos .logo_mega {
  width: 195px;
}

#lineup .box .colorbox-inner {
  padding: 80px 0 40px;
}

#lineup .box .buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

#lineup .box .buttons .arrow-button {
  width: 297px;
  opacity: 0;
  transform: translate3d(-100px, 0, 0);
}

#lineup .box .slidein[data-visible=true] .buttons .arrow-button {
  opacity: 1;
  transform: none;
}

#lineup .box .slidein[data-visible=true] .buttons .arrow-button:nth-child(1) {
  opacity: 1;
  transform: none !important;
  transition: opacity 720ms cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#lineup .box .slidein[data-visible=true] .buttons .arrow-button:nth-child(2) {
  opacity: 1;
  transform: none !important;
  transition: opacity 720ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 120ms, transform 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 120ms;
}

@media screen and (min-width: 540px) {
  .mainvisual .bottom .info .stripetext .text img {
    height: 32px;
  }
}

@media screen and (min-width: 768px) {
  #news .tags {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  #news .tags label {
    --border-width: 3px;
    --border-radius: 8px;
  }

  #news .tags label {
    height: 44px;
  }

  #news .page-list .colorbox-inner {
    gap: 10px;
    padding: 24px 10px 35px;
  }

  #news .page-list .colorbox-inner::before {
    border-radius: 9px;
  }

  #news .page-list .info .type {
    height: 25px;
    border-radius: 3px;
  }

  #news .page-list .outerlink-icon {
    right: 15px;
    bottom: 10px;
    width: 13px;
    height: 9px;
  }

  #news .page-list .outerlink-icon::before,
  #news .page-list .outerlink-icon::after {
    width: 10px;
    height: 6px;
  }

  .mainvisual .switch {
    width: 160px;
  }

  .mainvisual .bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    width: auto;
    max-width: initial;
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .mainvisual .bottom .info .stripetext .text img {
    height: 39px;
  }

  .mainvisual .bottom .pv {
    display: block;
    width: 30vw;
    max-width: 272px;
    grid-column: 2/-1;
    margin-left: auto;
  }

  .mainvisual .bottom .pv .pv_movie .colorbox-content::before {
    margin: -10px;
  }

  .pv_sp {
    display: none;
  }

  #news .arrow-button {
    max-width: 320px;
    margin-top: 48px;
    margin-inline: auto;
  }

  #about .text-wrap {
    max-width: 676px;
    margin: 0 auto;
  }

  #about .text-wrap .text-base {
    font-size: 32px;
  }

  #about .text-wrap .pc_only {
    display: block;
  }

  #about .text-wrap .sp_only {
    display: none;
  }

  #about .about-img {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  #about .arrow-button {
    max-width: 320px;
    margin-inline: auto;
  }

  #about .grid .cardbox .cardbox-inner {
    padding: 36px;
  }

  #about .grid .cardbox .title .name {
    font-size: 36px;
    margin-bottom: 12px;
  }

  #about .grid .cardbox .info {
    gap: 10px 4px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
  }

  #about .grid .cardbox .info dl {
    gap: 10px;
  }

  #about .grid .cardbox .info dt {
    width: 90px;
    height: 40px;
    border-radius: 10px;
  }

  #raichu .bottom .arrow-button {
    max-width: 320px;
    margin-top: 48px;
    margin-inline: auto;
  }

  #characters .colorbox-inner {
    padding: 50px 0;
  }
}

@media screen and (min-width: 1024px) {
  #news .tags {
    display: flex;
    justify-content: center;
    gap: 32px;
  }

  #news .tags label {
    --border-width: 4px;
    --border-radius: 10px;
  }

  #news .tags label {
    width: 150px;
    height: 40px;
  }

  #news .page-list .colorbox-inner {
    padding: 30px 10px 30px;
  }

  #news .page-list .colorbox-inner::before {
    border-radius: 12px;
  }

  #news .page-list a .diamond .icon,
  #news .page-list button .diamond .icon {
    font-size: 18px;
  }

  .mainvisual .bottom .info .stripetext .line-bg {
    filter: blur(1.5px);
  }

  .mainvisual .bottom .info .stripetext .text {
    gap: 7px;
  }

  .mainvisual .bottom .info .stripetext .text img {
    height: 48px;
  }

  .mainvisual .bottom .info .button_eshop {
    height: 48px;
  }

  .player .diamond .icon {
    font-size: 18px;
  }

  #about .text-wrap .text-base {
    font-size: 36px;
  }

  #about .grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  #about .grid .block1 {
    grid-row: 1/2;
    grid-column: 2/3;
    padding-left: 32px;
  }

  #about .grid .block2 {
    align-items: flex-end;
    grid-row: 1/2;
    grid-column: 1/2;
  }

  #about .grid .colorbox .colorbox-inner {
    width: auto;
    padding: 60px 20px;
  }

  #about .grid .hoopa {
    position: absolute;
    right: 0;
    bottom: 100%;
    width: 80.4487179487%;
    margin-bottom: -15.0641025641%;
  }

  #raichu .colorbox .title {
    line-height: 1.5;
    padding: 60px 0;
  }

  #raichu .colorbox .title .pc_only {
    display: block;
  }

  #raichu .colorbox .title .sp_only {
    display: none;
  }

  #raichu .grid {
    gap: 0;
    grid-template-columns: 1fr 1fr;
  }

  #raichu .grid .raichu_x,
  #raichu .grid .raichu_y {
    display: block;
  }

  #raichu .grid .raichu_x .arrow-button,
  #raichu .grid .raichu_y .arrow-button {
    width: 304px;
  }

  #raichu .grid .raichu_x .arrow-button .arrow-button-text,
  #raichu .grid .raichu_y .arrow-button .arrow-button-text {
    gap: 15px;
  }

  #raichu .grid .raichu_x picture {
    width: 100.78125%;
    margin-top: -6.875%;
    margin-right: -27.65625%;
  }

  #raichu .grid .raichu_x .button-wrap {
    position: absolute;
    left: 0;
    top: 367px;
  }

  #raichu .grid .raichu_y picture {
    width: 86.71875%;
    margin-top: -3.125%;
    margin-left: 6.09375%;
  }

  #raichu .grid .raichu_y .button-wrap {
    position: absolute;
    right: 0;
    top: 367px;
  }

  #characters .colorbox-inner {
    padding: 60px 0;
  }

  #characters .charas {
    gap: 0;
  }

  #characters .charas > div {
    height: 306px;
  }

  #characters .charas .visual {
    position: absolute;
    aspect-ratio: initial;
    inset: 0;
  }

  #characters .charas .chara1 img {
    bottom: -1px;
    left: -65px;
    width: 142px;
  }

  #characters .charas .chara1 .arrow-button {
    position: absolute;
    top: 80px;
    right: -32px;
  }

  #characters .charas .chara2 img {
    bottom: -45px;
    left: 209px;
    width: 255px;
  }

  #characters .charas .chara2 .arrow-button {
    position: absolute;
    bottom: 80px;
    left: -32px;
  }

  #lineup {
    padding-bottom: 120px;
  }

  #lineup .title {
    margin-bottom: 128px;
  }

  #lineup .box .logos {
    top: -60px;
    gap: 14px;
  }

  #lineup .box .logos .logo_za {
    width: 176px;
  }

  [lang=ja] #lineup .box .logos .logo_mega {
    width: 300px;
  }

  [lang=zh-cmn-Hant] #lineup .box .logos .logo_mega {
    width: 300px;
  }

  [lang=zh-cmn-Hans] #lineup .box .logos .logo_mega {
    width: 300px;
  }

  #lineup .box .colorbox-inner {
    padding: 134px 0 60px;
  }

  #lineup .box .buttons {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 56px;
  }

  #lineup .box .buttons .arrow-button {
    width: 322px;
  }

  #lineup .box .slidein[data-visible=true] .buttons .arrow-button:nth-child(1) {
    transition: opacity 720ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 120ms, transform 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 120ms;
  }

  #lineup .box .slidein[data-visible=true] .buttons .arrow-button:nth-child(2) {
    transition: opacity 720ms cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

@media screen and (min-width: 1280px) {
  #news .page-list .colorbox-inner {
    padding: 30px 15px 30px;
  }

  .mainvisual .bottom .info {
    transform: translateX(45px);
  }

  .mainvisual .bottom .info .stripetext .line-bg {
    filter: blur(2px);
  }

  .mainvisual .bottom .info .stripetext .text {
    flex-direction: row;
    justify-content: center;
    gap: 0;
  }

  .mainvisual .bottom .info .stripetext .text img {
    height: 64px;
  }

  .mainvisual .bottom .info .button_eshop {
    height: 64px;
  }

  #about .grid .colorbox .colorbox-inner {
    padding: 60px 30px;
  }

  #about .grid .cardbox .cardbox-inner {
    padding: 40px;
  }

  #characters .charas {
    gap: 32px;
  }

  #characters .charas > div {
    height: 263px;
  }

  #characters .charas .chara1 {
    align-items: flex-end;
  }

  #characters .charas .chara1 img {
    bottom: -44px;
    left: -65px;
    width: 142px;
  }

  #characters .charas .chara1 .arrow-button {
    position: static;
  }

  #characters .charas .chara2 {
    align-items: flex-start;
  }

  #characters .charas .chara2 img {
    bottom: -45px;
    left: 211px;
    width: 255px;
  }

  #characters .charas .chara2 .arrow-button {
    position: static;
  }
}

@media screen and (min-width: 1440px) {
  .mainvisual .bottom .info .stripetext .text img {
    height: 64px;
  }
}

@media (hover: hover) {
  #news .tags label:hover::before,
  #news .tags label:hover::after {
    opacity: 1;
  }

  #news .page-list a:hover .colorbox-inner::before,
  #news .page-list button:hover .colorbox-inner::before {
    opacity: 1;
  }

  #news .page-list a:hover .diamond .icon,
  #news .page-list button:hover .diamond .icon {
    transform: translate3d(0.4em, 0, 0);
  }

  .player:hover .diamond .icon {
    transform: translate3d(0.4em, 0, 0);
  }
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #news .tags label:hover::before,
  #news .tags label:hover::after {
    opacity: 1;
  }

  #news .page-list a:hover .colorbox-inner::before,
  #news .page-list button:hover .colorbox-inner::before {
    opacity: 1;
  }

  #news .page-list a:hover .diamond .icon,
  #news .page-list button:hover .diamond .icon {
    transform: translate3d(0.4em, 0, 0);
  }

  .player:hover .diamond .icon {
    transform: translate3d(0.4em, 0, 0);
  }
}

@media screen and (orientation: landscape) {
  .mainvisual .sticky {
    height: 100vh;
  }

  .mainvisual .content {
    height: 100vh;
  }

  .mainvisual .center {
    top: 50vh;
    left: 50%;
  }

  .mainvisual .hoopa {
    width: min(843px, 58.5416666667vw);
    margin-left: max(-435px, -30.2083333333vw);
    margin-top: max(-351px, -24.375vw);
  }

  .mainvisual .raichu_x {
    width: min(874px, 60.6944444444vw);
    margin-left: max(-615px, -42.7083333333vw);
    margin-top: max(-600px, -41.6666666667vw);
  }

  .mainvisual .raichu_y {
    width: min(725px, 50.3472222222vw);
    margin-left: min(2px, 0.1388888889vw);
    margin-top: max(-394px, -27.3611111111vw);
  }

  .mainvisual .logos {
    width: min(0px, 0vw);
    margin-left: max(0px, 0vw);
    margin-top: max(0px, 0vw);
  }

  .mainvisual .logo_za {
    width: min(302px, 20.9722222222vw);
    margin-left: max(-133px, -9.2361111111vw);
    margin-top: max(-321px, -22.2916666667vw);
  }

  [lang=ja] .mainvisual .logo_mega {
    width: min(528px, 36.6666666667vw);
    margin-left: max(-262px, -18.1944444444vw);
    margin-top: max(-158px, -10.9722222222vw);
  }

  [lang=zh-cmn-Hans] .mainvisual .logo_mega {
    width: min(480px, 33.3333333333vw);
    margin-left: max(-240px, -16.6666666667vw);
    margin-top: max(-159px, -11.0416666667vw);
  }

  [lang=zh-cmn-Hant] .mainvisual .logo_mega {
    width: min(480px, 33.3333333333vw);
    margin-left: max(-240px, -16.6666666667vw);
    margin-top: max(-159px, -11.0416666667vw);
  }
}