@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
body {
  width: 100%;
  margin: 0;
}
@media only screen and (max-width: 990px) {
  body {
    overflow-x: scroll;
  }
}
@media only screen and (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
}

.footerBandaiToys .footerBandaiToys__inner {
  width: 100%;
  max-width: 1200px;
}

@media only screen and (min-width: 768px) {
  .footerBandaiToys .footerBandaiToys__inner {
    width: 98%;
  }
}
@keyframes lightOn {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.6;
  }
  60% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lightInfinite {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes commonHide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#comingsoon {
  background: black;
  display: block;
  height: auto;
  font-size: 16px;
  min-width: 990px;
  overflow-x: hidden;
}
@media only screen and (max-width: 1000px) {
  #comingsoon {
    min-width: initial;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon {
    width: 100dvw;
  }
}
#comingsoon .wrapper {
  display: block;
  padding: 0 0 0 0;
  width: 100%;
  min-width: 1920px;
}
@media only screen and (max-width: 1920px) {
  #comingsoon .wrapper {
    margin-left: calc((100% - 1920px) / 2);
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .wrapper {
    width: 137.1428%;
    min-width: initial;
    margin-left: -18.5714%;
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .wrapper {
    width: 1357.7px;
    margin-left: -183.857px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .wrapper {
    width: 100%;
    margin-left: auto;
  }
}
#comingsoon button {
  box-shadow: none;
  border: none;
  cursor: pointer;
  opacity: 1;
  transition: opacity ease-out 0.2s;
}
@media (hover: hover) {
  #comingsoon button:hover {
    opacity: 0.8;
  }
}
#comingsoon * {
  position: relative;
  display: block;
}
#comingsoon img {
  display: block;
  width: 100%;
}
#comingsoon .mv {
  width: 100%;
  aspect-ratio: 2.14286;
  background: url("../../images/zeztz_special/comingsoon/mv.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 4;
}
@media only screen and (max-width: 767px) {
  #comingsoon .mv {
    aspect-ratio: 0.60778;
    background: url("../../images/zeztz_special/comingsoon/mv_sp.png");
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
#comingsoon .mv .mvDeco01,
#comingsoon .mv .mvDeco02,
#comingsoon .mv .mvDeco03,
#comingsoon .mv .mvDeco04 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  #comingsoon .mv .mvDeco01,
  #comingsoon .mv .mvDeco02,
  #comingsoon .mv .mvDeco03,
  #comingsoon .mv .mvDeco04 {
    height: auto;
    aspect-ratio: 0.79449;
  }
}
#comingsoon .mv .mvDeco01 {
  background: url("../../images/zeztz_special/comingsoon/mv_glow.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation-name: lightOn;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@media only screen and (max-width: 767px) {
  #comingsoon .mv .mvDeco01 {
    background: url("../../images/zeztz_special/comingsoon/mv_glow_sp.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
#comingsoon .mv .mvDeco02 {
  background: url("../../images/zeztz_special/comingsoon/mv_main.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
  #comingsoon .mv .mvDeco02 {
    background: url("../../images/zeztz_special/comingsoon/mv_main_sp.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
#comingsoon .mv .mvDeco03 {
  background: url("../../images/zeztz_special/comingsoon/mv_main_glow.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation-name: lightInfinite;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@media only screen and (max-width: 767px) {
  #comingsoon .mv .mvDeco03 {
    background: url("../../images/zeztz_special/comingsoon/mv_main_glow_sp.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
#comingsoon .mv .mvDeco04 {
  background: url("../../images/zeztz_special/comingsoon/mv_shadow.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
  #comingsoon .mv .mvDeco04 {
    background: url("../../images/zeztz_special/comingsoon/mv_shadow_sp.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
#comingsoon .mv .mvTtl {
  width: 33.8542%;
  aspect-ratio: 4.08805;
  position: absolute;
  bottom: 0;
  right: 15.625%;
  margin: 0;
  animation-name: mvTtl;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: translateX(5%);
}
#comingsoon .mv .mvTtl img {
  width: 100%;
}
#comingsoon .mv .mvTtl img:last-child {
  width: 79.3846%;
  margin: clamp(-10000px, -0.8333vw, -16px) auto 0;
}
@media only screen and (max-width: 1920px) {
  #comingsoon .mv .mvTtl img:last-child {
    margin: clamp(-16px auto 0px);
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .mv .mvTtl img:last-child {
    margin: clamp(-16px, -1.1428vw, 0px) auto 0;
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .mv .mvTtl img:last-child {
    margin: -11.3137px auto 0;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .mv .mvTtl {
    width: 72.1333%;
    bottom: calc(4.5333vw + 38.6666vw);
    right: 1.6%;
  }
}
@keyframes mvTtl {
  0% {
    opacity: 0;
    transform: translateX(5%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
#comingsoon .mv .mvOnair {
  width: 28.6666%;
  aspect-ratio: 2.10381;
  animation-name: mvOnair;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: translateX(5%);
  position: absolute;
  bottom: -1%;
  left: 15.625%;
}
@media only screen and (max-width: 767px) {
  #comingsoon .mv .mvOnair {
    width: 100%;
    aspect-ratio: 2.58621;
    left: auto;
    bottom: 0%;
    transform: translateY(-5%);
    animation-name: mvOnairSP;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0.6s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
}
@keyframes mvOnair {
  0% {
    opacity: 0;
    transform: translateX(-5%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes mvOnairSP {
  0% {
    opacity: 0;
    transform: translateY(-5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#comingsoon .mv .mvCatch {
  width: 8.3458%;
  aspect-ratio: 0.286;
  position: absolute;
  top: 3.7857%;
  right: 23.4375%;
  animation-name: mvCatch;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: translateY(-5%);
}
@media only screen and (max-width: 767px) {
  #comingsoon .mv .mvCatch {
    width: 21.2%;
    top: 16.9333vw;
    right: 1.0667%;
  }
}
@keyframes mvCatch {
  0% {
    opacity: 0;
    transform: translateY(-5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#comingsoon .toy {
  width: 100%;
  aspect-ratio: 1.66667;
  margin-top: clamp(-10000px, -5.8438%, -58.438px);
  z-index: 2;
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  #comingsoon .toy {
    aspect-ratio: 0.92478;
    margin-top: 0;
  }
}
#comingsoon .toy:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../../images/zeztz_special/comingsoon/toy_bg.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
  #comingsoon .toy:before {
    background: url("../../images/zeztz_special/comingsoon/toy_bg_sp.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
#comingsoon .toy .toyInner {
  width: 100%;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#comingsoon .toy .toyInner .toyTtl {
  width: 100%;
  margin: 0;
}
#comingsoon .toy .toyInner .toyTtl img {
  width: 20.8854%;
  margin: auto;
}
@media only screen and (max-width: 767px) {
  #comingsoon .toy .toyInner .toyTtl img {
    width: 100%;
  }
}
#comingsoon .toy .toyInner .toyTtl.isView img {
  animation-name: commonHide;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-delay: 1.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#comingsoon .toy .toyInner .toyTtl.isView:after {
  content: '';
  width: 20.8854%;
  aspect-ratio: 2.58896;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../../images/zeztz_special/comingsoon/toy_head_on.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation-name: lightOn;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@media only screen and (max-width: 767px) {
  #comingsoon .toy .toyInner .toyTtl.isView:after {
    width: 100%;
    aspect-ratio: 4.60123;
    background: url("../../images/zeztz_special/comingsoon/toy_head_on_sp.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
#comingsoon .toy .toyInner .toyBanner {
  display: block;
  width: 51.5625%;
  margin: 0 auto 0;
  background: white;
}
@media only screen and (max-width: 767px) {
  #comingsoon .toy .toyInner .toyBanner {
    width: calc(100% - 4.2667vw * 2);
  }
}
#comingsoon .toy .toyInner a.toyBanner {
  transition: transform ease-out 0.2s;
}
#comingsoon .toy .toyInner a.toyBanner img {
  transition: opacity ease-out 0.2s;
}
@media (hover: hover) {
  #comingsoon .toy .toyInner a.toyBanner:hover {
    transform: scale(102%);
  }
}
#comingsoon .toy .toyInner .toyBtn {
  display: block;
  width: clamp(334.896px, 33.4896%, 10000px);
  aspect-ratio: 9.59701;
  margin: clamp(0px, 3.3333vw, 10000px) auto 0;
  transition: opacity ease-out 0.2s, transform ease-out 0.2s;
  transition: opacity ease-out 0.2s;
  opacity: 0;
}
@media only screen and (max-width: 1920px) {
  #comingsoon .toy .toyInner .toyBtn {
    margin: 64px auto 0;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .toy .toyInner .toyBtn {
    margin: clamp(0px, 4.5714vw, 64px) auto 0;
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .toy .toyInner .toyBtn {
    margin: 45px auto 0;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .toy .toyInner .toyBtn {
    width: calc(100% - 4.2667vw * 2);
    margin: 4.2667vw;
  }
}
#comingsoon .toy .toyInner .toyBtn img {
  transition: opacity ease-out 0.2s, transform ease-out 0.2s;
}
#comingsoon .toy .toyInner .toyBtn:after {
  content: '';
  display: block;
  width: 4.6656%;
  aspect-ratio: 0.85714;
  position: absolute;
  top: 50%;
  right: 8.7092%;
  transform: translateY(-50%);
  background: url("../../images/zeztz_special/comingsoon/icon_btn_arrow.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity ease-out 0.2s, transform ease-out 0.2s;
}
@media (hover: hover) {
  #comingsoon .toy .toyInner .toyBtn:hover:after {
    content: '';
    opacity: 0.5;
    transform: translate(20%, -50%);
  }
}
#comingsoon .toy .toyInner .toyBtn.isView {
  opacity: 1;
}
#comingsoon .toy.isView {
  animation-name: toy;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes toy {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#comingsoon .toy.isView:before {
  animation-name: toyBefore;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  transform: translate(-50%, -50%);
}
@keyframes toyBefore {
  0% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
#comingsoon .campaign {
  width: 100%;
  aspect-ratio: 2.9584;
  z-index: 2;
  margin-top: clamp(-10000px, -7.1875vw, -138px);
  opacity: 0;
}
@media only screen and (max-width: 1920px) {
  #comingsoon .campaign {
    margin-top: -138px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .campaign {
    margin-top: clamp(-138px, -9.8571vw, 0px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .campaign {
    margin-top: -97.5853px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .campaign {
    aspect-ratio: 1.54321;
    margin-top: -8vw;
  }
}
#comingsoon .campaign:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 61%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../../images/zeztz_special/comingsoon/campaign_bg.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
  #comingsoon .campaign:before {
    background: url("../../images/zeztz_special/comingsoon/campaign_bg_sp.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
#comingsoon .campaign .campaignInner {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
#comingsoon .campaign .campaignInner .campaignTtl {
  width: 100%;
  margin: 0;
}
#comingsoon .campaign .campaignInner .campaignTtl img {
  width: 27.7083%;
  margin: auto;
}
@media only screen and (max-width: 767px) {
  #comingsoon .campaign .campaignInner .campaignTtl img {
    width: 100%;
  }
}
#comingsoon .campaign .campaignInner .campaignTtl.isView img {
  animation-name: commonHide;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-delay: 1.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#comingsoon .campaign .campaignInner .campaignTtl.isView:after {
  content: '';
  width: 27.7083%;
  aspect-ratio: 2.58896;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../../images/zeztz_special/comingsoon/campaign_head_on.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation-name: lightOn;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@media only screen and (max-width: 767px) {
  #comingsoon .campaign .campaignInner .campaignTtl.isView:after {
    width: 100%;
    aspect-ratio: 4.33526;
    background: url("../../images/zeztz_special/comingsoon/campaign_head_on_sp.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
#comingsoon .campaign .campaignInner .campaignBanner {
  display: block;
  width: 51.5625%;
  margin: 0 auto 0;
  background: white;
}
@media only screen and (max-width: 767px) {
  #comingsoon .campaign .campaignInner .campaignBanner {
    width: calc(100% - 4.2667vw * 2);
  }
}
#comingsoon .campaign .campaignInner a.campaignBanner {
  transition: transform ease-out 0.2s;
}
#comingsoon .campaign .campaignInner a.campaignBanner img {
  transition: opacity ease-out 0.2s;
}
@media (hover: hover) {
  #comingsoon .campaign .campaignInner a.campaignBanner:hover {
    transform: scale(102%);
  }
}
#comingsoon .campaign .campaignInner .campaignBtn {
  display: block;
  width: clamp(334.896px, 33.4896%, 10000px);
  aspect-ratio: 9.59701;
  margin: clamp(0px, 3.3333vw, 10000px) auto 0;
  transition: opacity ease-out 0.2s, transform ease-out 0.2s;
  transition: opacity ease-out 0.2s;
  opacity: 0;
}
@media only screen and (max-width: 1920px) {
  #comingsoon .campaign .campaignInner .campaignBtn {
    margin: 64px auto 0;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .campaign .campaignInner .campaignBtn {
    margin: clamp(0px, 4.5714vw, 64px) auto 0;
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .campaign .campaignInner .campaignBtn {
    margin: 45px auto 0;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .campaign .campaignInner .campaignBtn {
    width: calc(100% - 4.2667vw * 2);
    margin: 4.2667vw;
  }
}
#comingsoon .campaign .campaignInner .campaignBtn img {
  transition: opacity ease-out 0.2s, transform ease-out 0.2s;
}
#comingsoon .campaign .campaignInner .campaignBtn:after {
  content: '';
  display: block;
  width: 4.6656%;
  aspect-ratio: 0.85714;
  position: absolute;
  top: 50%;
  right: 8.7092%;
  transform: translateY(-50%);
  background: url("../../images/zeztz_special/comingsoon/icon_btn_arrow.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity ease-out 0.2s, transform ease-out 0.2s;
}
@media (hover: hover) {
  #comingsoon .campaign .campaignInner .campaignBtn:hover:after {
    content: '';
    opacity: 0.5;
    transform: translate(20%, -50%);
  }
}
#comingsoon .campaign .campaignInner .campaignBtn.isView {
  opacity: 1;
}
#comingsoon .campaign.isView {
  animation-name: toy;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes toy {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#comingsoon .campaign.isView:before {
  animation-name: toyBefore;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  transform: translate(-50%, -50%);
}
@keyframes toyBefore {
  0% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
#comingsoon .movie {
  width: 100%;
  aspect-ratio: 2.31604;
  margin-top: clamp(-10000px, -2.1354vw, -41px);
  z-index: 3;
  opacity: 0;
}
@media only screen and (max-width: 1920px) {
  #comingsoon .movie {
    margin-top: -41px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .movie {
    margin-top: clamp(-41px, -2.9285vw, 0px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .movie {
    margin-top: -28.9921px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie {
    overflow: hidden;
    margin-top: 23.2vw;
    aspect-ratio: auto;
    padding-bottom: 21.3333vw;
  }
}
#comingsoon .movie:before {
  z-index: -2;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background: url("../../images/zeztz_special/comingsoon/movie_bg.png");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie:before {
    height: 130%;
    top: -12%;
    transform: translate(-50%, 0);
    background: url("../../images/zeztz_special/comingsoon/movie_bg_sp.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }
}
#comingsoon .movie .movieInner {
  width: 100%;
  position: absolute;
  top: 22%;
  left: 0;
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner {
    position: relative;
    top: auto;
    left: auto;
  }
}
#comingsoon .movie .movieInner .movieTtl {
  z-index: 1;
  width: 50.625%;
  aspect-ratio: 4.71845;
  background: url("../../images/zeztz_special/comingsoon/movie_head_bg.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieTtl {
    width: 100%;
    aspect-ratio: 3.64078;
    background: url("../../images/zeztz_special/comingsoon/movie_head_bg_sp.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
#comingsoon .movie .movieInner .movieTtl picture {
  width: 100%;
  height: 100%;
}
#comingsoon .movie .movieInner .movieTtl img {
  width: 40.6378%;
  position: absolute;
  top: -2.9307%;
  left: 29.4238%;
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieTtl img {
    width: 100%;
    top: -0.7333vw;
    left: 0;
  }
}
#comingsoon .movie .movieInner .movieTtl.isView img {
  animation-name: commonHide;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-delay: 1.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#comingsoon .movie .movieInner .movieTtl.isView:after {
  content: '';
  width: 40.6378%;
  aspect-ratio: 2.37952;
  position: absolute;
  top: -2.9307%;
  left: 29.4238%;
  background: url("../../images/zeztz_special/comingsoon/movie_head_on.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation-name: lightOn;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieTtl.isView:after {
    width: 100%;
    top: -0.7333vw;
    left: 0%;
    aspect-ratio: 4.51807;
    background: url("../../images/zeztz_special/comingsoon/movie_head_on_sp.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
#comingsoon .movie .movieInner .movieMain {
  z-index: 2;
  display: block;
  width: 37.5%;
  aspect-ratio: 1.77778;
  position: absolute;
  top: clamp(141px, 7.3437vw, 10000px);
  left: clamp(0px, 15.625vw, 10000px);
}
@media only screen and (max-width: 1920px) {
  #comingsoon .movie .movieInner .movieMain {
    top: 141px;
    left: 300px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .movie .movieInner .movieMain {
    top: clamp(0px, 10.0714vw, 141px);
    left: clamp(0px, 21.4285vw, 300px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .movie .movieInner .movieMain {
    top: 99.7069px;
    left: 212.142px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieMain {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 4.2667vw * 2);
    margin: -8.5333vw auto 0;
  }
}
#comingsoon .movie .movieInner .movieMain .movieMainInner {
  width: 100%;
}
#comingsoon .movie .movieInner .movieMain .movieMainInner a.movieMainContent {
  display: block;
  width: 100%;
  box-shadow: clamp(4.167px, 0.4167vw, 10000px) clamp(4.167px, 0.4167vw, 10000px) rgba(0, 0, 0, 0.5);
  overflow: hidden;
  object-fit: cover;
  background: white;
}
#comingsoon .movie .movieInner .movieMain .movieMainInner a.movieMainContent img {
  display: block;
  width: 100%;
  transform: scale(100%);
  transition: opacity ease-out 0.2s, transform ease-out 0.2s;
}
#comingsoon .movie .movieInner .movieMain .movieMainInner a.movieMainContent:after {
  content: '';
  display: block;
  width: 22.5%;
  aspect-ratio: 1.31707;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../../images/zeztz_special/comingsoon/movie_icon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity ease-out 0.2s, transform ease-out 0.2s;
}
@media (hover: hover) {
  #comingsoon .movie .movieInner .movieMain .movieMainInner a.movieMainContent:hover:after {
    content: '';
    transform: translate(-50%, -50%) scale(105%);
  }
}
#comingsoon .movie .movieInner .movieMain .movieMainInner .movieMainTxt {
  display: block;
  width: 91.25%;
  aspect-ratio: 2.67073;
  position: absolute;
  bottom: clamp(-10000px, -4.1146vw, -79px);
  right: clamp(-10000px, -24.1145vw, -463px);
  pointer-events: none;
  opacity: 0;
  transform: scale(98%);
}
@media only screen and (max-width: 1920px) {
  #comingsoon .movie .movieInner .movieMain .movieMainInner .movieMainTxt {
    bottom: -79px;
    right: -463px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .movie .movieInner .movieMain .movieMainInner .movieMainTxt {
    bottom: clamp(-79px, -5.6428vw, 0px);
    right: clamp(-463px, -33.0714vw, 0px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .movie .movieInner .movieMain .movieMainInner .movieMainTxt {
    bottom: -55.8637px;
    right: -327.407px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieMain .movieMainInner .movieMainTxt {
    width: calc(100%);
    bottom: -18vw;
    right: 0;
  }
}
#comingsoon .movie .movieInner .movieMain .movieMainInner .movieMainTxt img {
  display: block;
  width: 100%;
}
#comingsoon .movie .movieInner .movieMain .movieMainInner .movieMainTxt.isView {
  animation-name: movieMainTxt;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes movieMainTxt {
  0% {
    opacity: 0;
    transform: scale(98%) translateX(5%);
  }
  100% {
    opacity: 1;
    transform: scale(100%) translateX(0%);
  }
}
#comingsoon .movie .movieInner .movieSub {
  display: block;
  width: 70.2604%;
  aspect-ratio: 4.49667;
  position: absolute;
  top: clamp(42px, 2.1875vw, 10000px);
  right: -1px;
  background: url("../../images/zeztz_special/comingsoon/movie_sub_bg.png");
  background-size: cover;
  background-position: top 50% left 0%;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 1920px) {
  #comingsoon .movie .movieInner .movieSub {
    top: 42px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .movie .movieInner .movieSub {
    top: clamp(0px, 3vw, 42px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .movie .movieInner .movieSub {
    top: 29.7px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieSub {
    aspect-ratio: auto;
    top: auto;
    right: auto;
    position: relative;
    width: 100%;
    background: url("../../images/zeztz_special/comingsoon/movie_sub_bg_sp.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 8.3333vw auto 0;
    padding: 3.2vw 0 4.2667vw;
  }
}
#comingsoon .movie .movieInner .movieSub .movieSubInner {
  width: 37.954%;
  margin-left: 36.5455%;
  margin-top: clamp(25px, 1.302vw, 10000px);
  margin-bottom: clamp(37px, 1.927vw, 10000px);
}
@media only screen and (max-width: 1920px) {
  #comingsoon .movie .movieInner .movieSub .movieSubInner {
    margin-top: 25px;
    margin-bottom: 37px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .movie .movieInner .movieSub .movieSubInner {
    margin-top: clamp(0px, 1.7857vw, 25px);
    margin-bottom: clamp(0px, 2.6428vw, 37px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .movie .movieInner .movieSub .movieSubInner {
    margin-top: 17.6784px;
    margin-bottom: 26.1637px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieSub .movieSubInner {
    width: 100%;
    margin: 0 auto;
  }
}
#comingsoon .movie .movieInner .movieSub .movieSubInner .movieSubTtl {
  width: 55.2734%;
  margin: auto;
}
#comingsoon .movie .movieInner .movieSub .movieSublist {
  margin-top: clamp(12px, 0.625vw, 10000px);
}
@media only screen and (max-width: 1920px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist {
    margin-top: 12px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist {
    margin-top: clamp(0px, 0.8571vw, 12px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist {
    margin-top: 8.485px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist {
    width: calc(100% - 4.2667vw * 2);
    margin: 2.1333vw auto 0;
  }
}
#comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: clamp(272px, 14.1666vw, 10000px);
}
@media only screen and (max-width: 1920px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent {
    width: 272px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent {
    width: clamp(0px, 19.4285vw, 272px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent {
    width: 192.328px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent {
    width: 48.5333vw;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent {
    margin-top: 0px;
  }
}
#comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner {
  width: calc(46.875%);
  overflow: hidden;
}
#comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner:nth-child(4n-1), #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner:nth-child(4n) {
  margin-top: clamp(32px, 1.666vw, 10000px);
}
@media only screen and (max-width: 1920px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner:nth-child(4n-1), #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner:nth-child(4n) {
    margin-top: 32px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner:nth-child(4n-1), #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner:nth-child(4n) {
    margin-top: clamp(0px, 2.2857vw, 32px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner:nth-child(4n-1), #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner:nth-child(4n) {
    margin-top: 22.688px;
  }
}
#comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner img {
  transition: opacity ease-out 0.2s, transform ease-out 0.2s;
}
@media (hover: hover) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner:hover img {
    opacity: 0.8;
    transform: scale(102%);
  }
}
#comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner .movieMainContentNew {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-weight: bold;
  background: #1fb8a4;
  padding: 0.2em 0.1em 0 0.4em;
  font-size: 0.8333vw;
}
@media only screen and (max-width: 1920px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner .movieMainContentNew {
    font-size: 1em;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner .movieMainContentNew {
    font-size: clamp(0px, 1.1428vw, 1em);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner .movieMainContentNew {
    font-size: 11.3137px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner .movieMainContentNew {
    font-size: 3.2vw;
  }
}
#comingsoon .movie .movieInner .movieSub .movieSublist .movieMainContent .movieMainContentInner .movieMainContentNew:after {
  content: '';
  width: 0px;
  height: 0px;
  position: absolute;
  top: -1px;
  right: calc(-1em + 2px);
  border-top: .7em solid #1fb8a4;
  border-right: .5em solid transparent;
  border-bottom: .7em solid transparent;
  border-left: .5em solid #1fb8a4;
}
#comingsoon .movie .movieInner .movieSub .movieslidesButtonPrev {
  aspect-ratio: 0.86441;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../../images/zeztz_special/common/common_arrow_prev.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: clamp(51px, 2.6562vw, 10000px);
  margin-top: clamp(12px, 0.625vw, 10000px);
  transition: opacity ease-out 0.2s, transform ease-out 0.2s;
}
@media only screen and (max-width: 1920px) {
  #comingsoon .movie .movieInner .movieSub .movieslidesButtonPrev {
    width: 51px;
    margin-top: 12px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .movie .movieInner .movieSub .movieslidesButtonPrev {
    width: clamp(0px, 3.6428vw, 51px);
    margin-top: clamp(0px, 0.8571vw, 12px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .movie .movieInner .movieSub .movieslidesButtonPrev {
    width: 36.0625px;
    margin-top: 8.485px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieSub .movieslidesButtonPrev {
    left: 4.2667vw;
  }
}
@media (hover: hover) {
  #comingsoon .movie .movieInner .movieSub .movieslidesButtonPrev:hover {
    opacity: 0.8;
    transform: scale(105%);
  }
}
#comingsoon .movie .movieInner .movieSub .movieslidesButtonNext {
  aspect-ratio: 0.86441;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../../images/zeztz_special/common/common_arrow_next.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: clamp(51px, 2.6562vw, 10000px);
  margin-top: clamp(12px, 0.625vw, 10000px);
  transition: opacity ease-out 0.2s, transform ease-out 0.2s;
}
@media only screen and (max-width: 1920px) {
  #comingsoon .movie .movieInner .movieSub .movieslidesButtonNext {
    width: 51px;
    margin-top: 12px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .movie .movieInner .movieSub .movieslidesButtonNext {
    width: clamp(0px, 3.6428vw, 51px);
    margin-top: clamp(0px, 0.8571vw, 12px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .movie .movieInner .movieSub .movieslidesButtonNext {
    width: 36.0625px;
    margin-top: 8.485px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .movie .movieInner .movieSub .movieslidesButtonNext {
    right: 4.2667vw;
  }
}
@media (hover: hover) {
  #comingsoon .movie .movieInner .movieSub .movieslidesButtonNext:hover {
    opacity: 0.8;
    transform: scale(105%);
  }
}
#comingsoon .movie.isView {
  animation-name: movie;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes movie {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#comingsoon .comingsoon {
  width: 100%;
  aspect-ratio: 2.87856;
  background: url("../../images/zeztz_special/comingsoon/comingsoon_bg.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: clamp(-10000px, -7.8438vw, -78.438px);
  z-index: 1;
}
@media only screen and (max-width: 1920px) {
  #comingsoon .comingsoon {
    margin-top: -150.6px;
  }
}
@media only screen and (max-width: 1400px) {
  #comingsoon .comingsoon {
    margin-top: clamp(-150.6px, -10.7571vw, 0px);
  }
}
@media only screen and (max-width: 990px) {
  #comingsoon .comingsoon {
    margin-top: -107.571px;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .comingsoon {
    aspect-ratio: 1.24792;
    background: url("../../images/zeztz_special/comingsoon/comingsoon_bg_sp.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media only screen and (max-width: 767px) {
  #comingsoon .comingsoon {
    margin-top: 10vw;
  }
}
#comingsoon .comingsoon .comingsoonDeco01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../../images/zeztz_special/comingsoon/comingsoon_glow.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  #comingsoon .comingsoon .comingsoonDeco01 {
    display: none;
  }
}
#comingsoon .comingsoon .comingsoonCatch {
  width: 35.8854%;
  aspect-ratio: 2.28904;
  position: absolute;
  bottom: clamp(36.5px, 2.9167vw, 10000px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  #comingsoon .comingsoon .comingsoonCatch {
    width: 100%;
    bottom: 11.2vw;
    aspect-ratio: 2.13068;
  }
}
#comingsoon .comingsoon.isView .comingsoonDeco01 {
  animation-name: lightOn;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#comingsoon .comingsoon.isView .comingsoonCatch {
  animation-name: comingsoonCatch;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes comingsoonCatch {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#comingsoon .copy {
  width: 100%;
  background: #444444;
}
#comingsoon .copy p {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(8.333px, 0.8333vw, 10000px);
  color: white;
  text-align: center;
  padding: 1em;
}

.movieMordalVertical .fancybox-content {
  width: auto !important;
  height: calc(100dvh - 88px) !important;
  aspect-ratio: 0.5625;
}
@media only screen and (max-width: 492px) {
  .movieMordalVertical .fancybox-content {
    aspect-ratio: 0.5625;
    width: calc(100dvw - 88px) !important;
    height: auto !important;
  }
}