@charset "UTF-8";
html,
body {
  background: #231516;
}
@media (max-width: 980px) {
  html,
body {
    padding-top: 0;
  }
}

body {
  margin: 0;
}

.fixed__wrapper {
  max-width: 1000px;
  width: 100%;
}

/*----------------------------------------------------------
* 動画紹介ページ
------------------------------------------------------------*/
main img {
  width: 100%;
}

#movie svg {
  display: none;
}

#movie main {
  background: #cf4532;
}

#movie canvas {
  display: block;
  border-style: none;
  background: none;
  vertical-align: bottom;
  text-decoration: none;
}

#movie a {
  border: none;
  text-decoration: none;
}

#movie img {
  /* display: block; */
  /* border-style: none; */
  background: none;
  vertical-align: bottom;
  text-decoration: none;
}

#movie .floatWindow {
  display: none !important;
}

#movie *::before,
#movie *::after {
  border-style: none;
  /* background: none; */
  vertical-align: bottom;
  text-decoration: none;
}

#movie #footer {
  margin-top: -44px;
}

.anime-wrapper {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-top: 40px;
  width: 100%;
  height: 940px;
  background: url(../img/movie/bg.jpg);
  background-position: center top;
  background-size: auto 98%;
}
@media (max-width: 768px) {
  .anime-wrapper {
    padding-top: 0;
  }
}

.pointer {
  position: absolute;
  top: calc(50% + 50px);
  left: calc(50% + 100px);
  z-index: 110;
  width: 80px;
  opacity: 0;
  -webkit-animation: pointer-anime 3.2s ease 1s forwards infinite;
  animation: pointer-anime 3.2s ease 1s forwards infinite;
}

.open .pointer {
  display: none;
}

.attention2 {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 70%;
  transform: translate(-50%, -50%);
}

.attention2.none {
  display: none;
}

@-webkit-keyframes pointer-anime {
  0% {
    opacity: 0;
    transform: translate(0);
  }
  30% {
    opacity: 1;
    transform: translate(-50px, -50px);
  }
  35% {
    transform: translate(-50px, -50px) rotate(-15deg);
  }
  40% {
    transform: translate(-50px, -50px) rotate(0deg);
  }
  55% {
    opacity: 1;
    transform: translate(-50px, -50px) rotate(0deg);
  }
  65% {
    opacity: 0;
    transform: translate(-50px, -50px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50px, -50px) rotate(0deg);
  }
}
@keyframes pointer-anime {
  0% {
    opacity: 0;
    transform: translate(0);
  }
  30% {
    opacity: 1;
    transform: translate(-50px, -50px);
  }
  35% {
    transform: translate(-50px, -50px) rotate(-15deg);
  }
  40% {
    transform: translate(-50px, -50px) rotate(0deg);
  }
  55% {
    opacity: 1;
    transform: translate(-50px, -50px) rotate(0deg);
  }
  65% {
    opacity: 0;
    transform: translate(-50px, -50px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50px, -50px) rotate(0deg);
  }
}
.screen-cover {
  display: block;
}

.screen-cover {
  position: fixed;
  top: 0;
  z-index: 111111;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 30%;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
}

.screen-cover.onclick {
  display: none;
}

.screen-cover img {
  margin: 70px;
  margin: 5% 0;
  max-width: 700px;
  width: 90%;
}

.screen-cover img.ok {
  margin: 5% 0;
  max-width: 300px;
  width: 600px;
  cursor: pointer;
}

.screen-cover .attention {
  margin: 5% 0;
  width: 100%;
}

.door0,
.door5 {
  display: none;
}

@media (min-width: 1920px) {
  .door0,
.door5 {
    display: inline-block;
  }
}
.door3 {
  transition: 0.3s;
  transition-timing-function: ease-out;
  -webkit-animation: door3-anime 3.2s ease infinite normal;
  animation: door3-anime 3.2s ease infinite normal;
}

@-webkit-keyframes door3-anime {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(50px);
  }
  60% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes door3-anime {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(50px);
  }
  60% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}
.pre-screen {
  visibility: visible;
  transition-delay: 4s;
  transition-property: visibility;
}

.pre-screen.open {
  visibility: hidden;
}

/* .door {
  transition-delay: 8s;
  transition-property: display;
}
.door.open {
  display: none;
} */
.door0.open {
  z-index: 100;
  -webkit-animation: door-open-left 12s ease forwards;
  animation: door-open-left 12s ease forwards;
}

.door5.open {
  z-index: 100;
  -webkit-animation: door-open-right 12s ease forwards;
  animation: door-open-right 12s ease forwards;
}

.door1.open {
  z-index: 101;
  -webkit-animation: door-open-left 8s ease forwards;
  animation: door-open-left 8s ease forwards;
}

.door4.open {
  z-index: 101;
  -webkit-animation: door-open-right 8s ease forwards;
  animation: door-open-right 8s ease forwards;
}

.door2.open {
  z-index: 102;
  -webkit-animation: door-open-left 4s ease forwards;
  animation: door-open-left 4s ease forwards;
}

.door3.open {
  z-index: 102;
  -webkit-animation: door-open-right 4s ease forwards;
  animation: door-open-right 4s ease forwards;
}

@-webkit-keyframes door-open-left {
  0% {
    transform: translateX(0);
  }
  100% {
    display: none;
    transform: translateX(-55vw);
  }
}
@-webkit-keyframes door-open-right {
  0% {
    transform: translateX(0);
  }
  100% {
    display: none;
    transform: translateX(55vw);
  }
}
.pre-screen {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  /* display: none; */
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform: scale(0.962) translateY(-24px);
  /* background: #fde2c1; */
}

.door {
  width: 577px;
}

.open .door-event-text {
  display: none;
}

.door-event-text {
  position: absolute;
  top: calc(50% - 70px);
  left: calc(50% + 100px);
  width: 130px;
  transform: rotate(15deg);
  animation: pluse 1s infinite alternate-reverse;
}

@-webkit-keyframes pluse {
  0% {
    transform: rotate(15deg) scale(1);
  }
  100% {
    transform: rotate(15deg) scale(1.2);
  }
}
@keyframes pluse {
  0% {
    transform: rotate(15deg) scale(1);
  }
  100% {
    transform: rotate(15deg) scale(1.2);
  }
}
.touch.door-event-text {
  display: none;
}

.main-screen {
  width: 100%;
  height: 100%;
}

.main-screen-top {
  position: relative;
  /* overflow: hidden; */
  width: 100%;
  height: 720px;
  /* background: url(../images/movie/bg.jpg);
  background-position: center top;
  background-size: auto 138%; */
  transform: scale(0.9);
}

.item {
  position: absolute;
}

.item .interactive {
  cursor: pointer;
  /* transform: translateX(0px); */
  /* -webkit-animation: lighting 1.5s infinite alternate-reverse;
          animation: lighting 1.5s infinite alternate-reverse; */
  /* animation: katakata .2s infinite alternate-reverse; */
}

.item .interactive.played {
  /* -webkit-animation: none;
          animation: none; */
}

/* @-webkit-keyframes lighting {
  0% {
    -webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,.9));
            filter: drop-shadow(0px 0px 0px rgba(255,255,255,.9));
  }
  100% {
    -webkit-filter: drop-shadow(0px 0px 8px rgba(255,255,255,.9));
            filter: drop-shadow(0px 0px 8px rgba(255,255,255,.9));
  }
}
@keyframes lighting {
  0% {
    -webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,.9));
            filter: drop-shadow(0px 0px 0px rgba(255,255,255,.9));
  }
  100% {
    -webkit-filter: drop-shadow(0px 0px 8px rgba(255,255,255,.9));
            filter: drop-shadow(0px 0px 8px rgba(255,255,255,.9));
  }
} */
/* @-webkit-keyframes katakata {
  0% {
    transform: translateX(0px);
  }
  40% {
    transform: translateX(2px) rotate(2deg);
  }
  80% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes katakata {
  0% {
    transform: translateX(0px);
  }
  40% {
    transform: translateX(2px) rotate(2deg);
  }
  80% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
} */
.interactive svg {
  -webkit-filter: blur(2px);
  filter: blur(2px);
}

.tv-wrapper {
  top: 50%;
  left: 50%;
  width: 900px;
  height: 800px;
  transform: translate(-50%, calc(-50% - 130px));
}

.video-wrapper {
  position: absolute;
  top: 50%;
  top: 50%;
  left: 50%;
  left: 50%;
  width: 618px;
  height: 370px;
  /* background: #3e3a39; */
  /* background: #aeaaa9; */
  background: #585858;
  /* z-index: 11111; */
  transform: translate(calc(-50% - 85px), calc(-50% + 110px));
  /* z-index: 11111; */
  transform: translate(calc(-50% - 85px), calc(-50% + 110px));
}

#video.none {
  display: none;
}

.tv-wrapper video {
  /* position: absolute;
  top: 50%;
  left: 50%; */
  /* z-index: 11111; */
  /* width: 618px;
  height: 370px; */
  /* transform: translate(calc(-50% - 82px), calc(-50% + 110px)); */
}

#shutdown {
  position: absolute;
  /* z-index: 2; */
}

.closet-wrapper {
  top: calc(50% - 170px);
  left: calc(50% - 900px);
  z-index: 2;
  width: 295px;
  transform: translate(-50%, -50%);
}

.telephone-wrapper {
  top: calc(50% - 252px);
  left: calc(50% - 840px);
  width: 110px;
  transform: translate(-50%, -50%);
}

.dharma-wrapper {
  top: calc(50% - 322px);
  left: calc(50% - 640px);
  width: 110px;
  transform: translate(-50%, -50%);
}

.woodendoll-wrapper {
  top: calc(50% - 320px);
  left: calc(50% - 540px);
  width: 75px;
  transform: translate(-50%, -50%);
}

.foothold-wrapper {
  top: calc(50% - 208px);
  left: calc(50% - 595px);
  width: 220px;
  transform: translate(-50%, -50%);
}

.sticker-wrapper {
  top: calc(50% - 120px);
  left: calc(50% - 560px);
  width: 110px;
  transform: translate(-50%, -50%);
}

.electricfan-wrapper {
  top: calc(50% + 200px);
  left: calc(50% - 655px);
  width: 225px;
  height: 230px;
  cursor: pointer;
  transform: translate(-50%, -50%) scale(1.1);
}

.electricfan-wrapper::after {
  position: absolute;
  /* width: 85px;
  height: 75px; */
  top: 110px;
  left: 185px;
  /* top: -75px;
  left: 85px; */
  z-index: 3;
  display: none;
  width: 110px;
  height: 110px;
  background-image: url(../img/movie/click02.png);
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  -webkit-animation: ookisa 1.2s infinite;
  animation: ookisa 1.2s infinite;
  /* -webkit-animation: pukapuka 1s .3s infinite alternate-reverse;
          animation: pukapuka 1s .3s infinite alternate-reverse; */
  pointer-events: none;
}

.electricfan-wrapper .clickfanbtn {
  position: absolute;
  top: 110px;
  left: 185px;
  width: 110px;
  height: 110px;
  -webkit-animation: ookisa 1.2s infinite;
  animation: ookisa 1.2s infinite;
}

.electricfan-wrapper.played .clickfanbtn {
  display: none;
}

.electricfan-wrapper canvas {
  z-index: 2;
}

.electricfan-wrapper.played::after {
  content: none;
}

.famicom-wrapper .spView.clickfanbtn {
  position: absolute;
  z-index: 3;
  width: 140px;
  height: 140px;
  -webkit-animation: ookisaFan 1.2s infinite;
  animation: ookisaFan 1.2s infinite;
}

.famicom-wrapper.played .spView.clickfanbtn {
  display: none;
}

.famicom-wrapper.played::after {
  content: none;
}

.electricfan-wrapper.played svg {
  display: none;
}

.electricfan-wrapper svg {
  position: absolute;
  top: 10px;
  left: 0px;
  z-index: 1;
  /* width: 480px; */
  overflow: visible;
  transition: 1s;
  transform: translate(-10px, -20px) scale(0.9);
  /* transform: scale(1.5); */
  transform-origin: center;
}

.electricfan-wrapper canvas {
  position: absolute;
}

.beyblade-wrapper {
  top: calc(50% + 260px);
  left: calc(50% - 230px);
  width: 100px;
  transform: translate(-50%, -50%);
}

.marble-wrapper {
  top: calc(50% + 260px);
  left: calc(50% - 70px);
  width: 190px;
  transform: translate(-50%, -50%);
}

.famicom-wrapper {
  top: calc(50% + 210px);
  left: calc(50% + 370px);
  z-index: 2;
  width: 240px;
  height: 190px;
  cursor: pointer;
  /* transform: translate(-50%, -50%); */
}

.famicom-wrapper::after {
  position: absolute;
  /* top: -57px;
  left: 50px; */
  top: 5px;
  left: 0px;
  z-index: 3;
  /* display: none; */
  /* width: 85px;
  height: 75px; */
  width: 110px;
  height: 110px;
  background-image: url(../img/movie/click02.png);
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  -webkit-animation: ookisa 1.2s infinite;
  animation: ookisa 1.2s infinite;
  /* -webkit-animation: pukapuka 1s infinite alternate-reverse;
          animation: pukapuka 1s infinite alternate-reverse; */
  pointer-events: none;
}

@-webkit-keyframes pukapuka {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  25% {
    opacity: 0;
    transform: translateY(5px);
  }
  30% {
    opacity: 1;
    transform: translateY(-5px);
  }
  35% {
    transform: translateY(5px);
  }
  40% {
    transform: translateY(-5px);
  }
  45% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-5px);
  }
  55% {
    transform: translateY(5px);
  }
  60% {
    transform: translateY(-5px);
  }
  65% {
    transform: translateY(5px);
  }
  70% {
    transform: translateY(-5px);
  }
  75% {
    opacity: 1;
    transform: translateY(5px);
  }
  80% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 0;
    transform: translateY(5px);
  }
}
@keyframes pukapuka {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  25% {
    opacity: 0;
    transform: translateY(5px);
  }
  30% {
    opacity: 1;
    transform: translateY(-5px);
  }
  35% {
    transform: translateY(5px);
  }
  40% {
    transform: translateY(-5px);
  }
  45% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-5px);
  }
  55% {
    transform: translateY(5px);
  }
  60% {
    transform: translateY(-5px);
  }
  65% {
    transform: translateY(5px);
  }
  70% {
    transform: translateY(-5px);
  }
  75% {
    opacity: 1;
    transform: translateY(5px);
  }
  80% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 0;
    transform: translateY(5px);
  }
}
/* @keyframes pukapuka {
  0% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(5px);
  }
} */
.famicom-wrapper .interactive {
  position: absolute;
  z-index: 2;
  transform: translate(0%, -50%) scale(1.09);
  pointer-events: none;
}

.famicom-wrapper.played svg {
  display: none;
}

.famicom-wrapper svg {
  position: absolute;
  top: 10px;
  left: 0px;
  z-index: 1;
  /* width: 480px; */
  overflow: visible;
  transition: 1s;
  transform: translate(-15px, 5px) scale(0.9);
  /* transform: scale(1.5); */
  transform-origin: center;
}

.famicom-wrapper svg path.cls-1 {
  /* -webkit-animation-delay: .6s;
          animation-delay: .6s; */
}

path.cls-1 {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  -webkit-animation: interactive-anime 2s infinite;
  animation: interactive-anime 2s infinite;
  fill: none;
  stroke: #ffffeb;
  stroke-miterlimit: 10;
  /* stroke-width: 10px; */
  stroke-width: 4px;
}

@-webkit-keyframes interactive-anime {
  0% {
    opacity: 0.8;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    stroke-width: 10px;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    stroke-width: 60px;
  }
}
@keyframes interactive-anime {
  0% {
    opacity: 1;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    stroke-width: 10px;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    stroke-width: 60px;
  }
}
.soda-wrapper {
  top: calc(50% + 310px);
  left: calc(50% + 630px);
  width: 35px;
  transform: translate(-50%, -50%);
}

.youtube-btn-wrapper {
  top: calc(50% + 50px);
  left: calc(50% + 560px);
  width: 110px;
  transform: translate(-50%, -50%);
}

.tag-wrapper {
  top: calc(50% - 280px);
  left: calc(50% + 550px);
  width: 90px;
  transform: translate(-50%, -50%);
}

.lighting-wrapper {
  top: calc(0% + 28px);
  left: calc(50% + 750px);
  z-index: 10;
  width: 150px;
  height: 240px;
  cursor: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.lighting-wrapper::before {
  position: absolute;
  top: 70px;
  left: -65px;
  z-index: 3;
  display: none;
  width: 110px;
  height: 110px;
  background-image: url(../img/movie/click02.png);
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  -webkit-animation: ookisa 1.2s infinite;
  animation: ookisa 1.2s infinite;
  /* -webkit-animation: pukapuka 1s .3s infinite alternate-reverse;
          animation: pukapuka 1s .3s infinite alternate-reverse; */
  pointer-events: none;
}

.lighting-wrapper.played::before {
  display: none;
}

.lighting-wrapper .clicklightBodybtn {
  position: absolute;
  top: 70px;
  left: -65px;
  z-index: 3;
  width: 110px;
  height: 110px;
  -webkit-animation: ookisa 1.2s infinite;
  animation: ookisa 1.2s infinite;
}

.lighting-wrapper.played .clicklightBodybtn {
  display: none;
}

#light-body,
#light-cover {
  position: absolute;
  cursor: inherit;
  transform: translateX(-60px);
  pointer-events: none;
}

#light-body {
  top: 5px;
  left: 2px;
}

.flyer-wrapper {
  top: calc(50% - 220px);
  left: calc(50% + 750px);
  width: 150px;
  transform: translate(-50%, -50%);
}

.desk-wrapper {
  top: calc(50% + 60px);
  left: calc(50% + 890px);
  width: 390px;
  transform: translate(-50%, -50%);
}

.map-wrapper {
  top: calc(50% - 170px);
  left: calc(50% + 970px);
  width: 230px;
  transform: translate(-50%, -50%);
}

.main-screen-bottom {
  position: absolute;
  bottom: 28px;
  left: -10%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120%;
  height: 220px;
  background: #cf4532;
  transform: scale(0.9);
}

.main-screen-bottom::after {
  position: absolute;
  bottom: 20px;
  width: 450px;
  height: 18px;
  /* background: url(../images/movie/attention.png); */
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

.main-screen-bottom2 {
  display: none;
}

/* .text-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 220px;
} */
.text-wrapper img {
  width: 650px;
}

#canvas {
  position: absolute;
  z-index: 1;
  background: none;
}

.video-start-btn-wrapper {
  position: absolute;
  /* top: calc(50% + 115px);
  left: calc(50% + 340px); */
  top: calc(50% + 65px);
  /* left: calc(50% + 311px); */
  left: calc(50% + 286px);
  z-index: 3;
  transform: translate(-50%, -50%);
}

.video-start-btn-wrapper::after {
  position: absolute;
  z-index: 2;
  display: inline-block;
  /* width: 60px;
  height: 113px; */
  width: 110px;
  height: 110px;
  /* background-color: rgba(255,205,205,.4); */
  content: "";
  /* transition: .8s; */
  animation: video-btn-kirakira 1s infinite alternate-reverse;
  pointer-events: none;
  background-blend-mode: multiply;
}

.video-start-btn-wrapper.played::after {
  content: none;
}

@-webkit-keyframes video-btn-kirakira {
  0% {
    background-color: rgba(255, 205, 205, 0.01);
  }
  100% {
    background-color: rgba(255, 205, 205, 0.4);
  }
}
@keyframes video-btn-kirakira {
  0% {
    background-color: rgba(255, 205, 205, 0.01);
  }
  100% {
    background-color: rgba(255, 205, 205, 0.4);
  }
}
.video-btn {
  position: absolute;
  z-index: 2;
  display: none;
  /* width: 60px; */
  width: 110px;
  opacity: 0;
  cursor: pointer;
}

.video-btn.video-btn-active {
  display: inline-block;
  opacity: 1;
}

/* #video-start-btn {
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  border-radius: .5rem;
  color: #fff;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  letter-spacing: .1em;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
  cursor: pointer;
  transition: all .3s;

  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#video-start-btn {
  padding: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #cf4532;
  box-shadow: 0 5px 0 #111;
  line-height: 100px;
}

#video-start-btn:hover {
  box-shadow: 0 2px 0 #111;
  transform: translate(0, 3px);
} */
/* ボタンの波紋 */
/* #video-start-btn::before, #video-start-btn::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  content: "";
  -webkit-animation: pulsate 2s linear infinite;
          animation: pulsate 2s linear infinite;
  pointer-events: none;
}

#video-start-btn::after {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
} */
.clickPlease {
  position: absolute;
  top: calc(50% - 55px);
  left: calc(50% + 260px);
  z-index: 3;
  width: 160px;
  /* animation: pukapuka 1s .7s infinite alternate-reverse; */
  -webkit-animation: pukapuka 9s 0.7s infinite normal;
  animation: pukapuka 9s 0.7s infinite normal;
  pointer-events: none;
}

.clickPlease.none {
  display: none;
}

@-webkit-keyframes ookisa {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ookisa {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
#video-start-btn::before {
  /* position: absolute;
  top: 113px;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  margin: auto; */
  /* width: 110px;
  height: 110px;
  border: 10px solid rgba(255,255,235,1);
  content: "";
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-animation: pulsate 2s linear infinite;
          animation: pulsate 2s linear infinite;
  pointer-events: none;
  background-blend-mode: screen;
  mix-blend-mode: screen; */
  position: absolute;
  /* width: 85px;
  height: 75px; */
  top: -75px;
  left: 0px;
  /* top: -75px;
  left: 85px; */
  z-index: 3;
  display: none;
  width: 110px;
  height: 110px;
  background-image: url(../img/movie/click02.png);
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  -webkit-animation: ookisa 1.2s infinite;
  animation: ookisa 1.2s infinite;
  /* -webkit-animation: pukapuka 1s .3s infinite alternate-reverse;
          animation: pukapuka 1s .3s infinite alternate-reverse; */
  pointer-events: none;
}

#video-start-btn.played::before {
  content: none;
}

#video-start-btn .clickvideobtn {
  position: absolute;
  top: -75px;
  left: 0px;
  z-index: 10;
  width: 110px;
  height: 110px;
  cursor: pointer;
  -webkit-animation: ookisa 1.2s infinite;
  animation: ookisa 1.2s infinite;
  pointer-events: all;
}

#video-start-btn.played .clickvideobtn {
  display: none;
}

/* ボタンの波紋が広がっていくアニメーション */
@-webkit-keyframes pulsate {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes pulsate {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@media (max-width: 768px) {
  .main-screen-bottom2 {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 160px;
    border: none;
    background: #cf4532;
    transform: scale(1.08) translateY(-6px);
  }

  .main-screen-bottom2 a {
    width: 80%;
    transform: translateX(4px) translateY(-18px);
  }

  .screen-cover {
    display: block;
  }

  .screen-cover {
    position: fixed;
    top: 0;
    z-index: 111111;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 10%;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
  }

  .screen-cover.onclick {
    display: none;
  }

  .screen-cover img {
    margin: 70px;
    max-width: 800px;
    width: 90%;
  }

  .screen-cover img.ok {
    max-width: 400px;
  }

  .pointer {
    top: calc(50% + 70px);
    left: calc(50% + 150px);
    width: 50px;
    opacity: 0;
    -webkit-animation: pointer-anime 3.2s ease 1s forwards infinite;
    animation: pointer-anime 3.2s ease 1s forwards infinite;
  }

  @-webkit-keyframes pointer-anime {
    0% {
      opacity: 0;
      transform: translate(0);
    }
    30% {
      opacity: 1;
      transform: translate(-100px, -100px);
    }
    35% {
      transform: translate(-100px, -100px) rotate(-15deg);
    }
    40% {
      transform: translate(-100px, -100px) rotate(0deg);
    }
    55% {
      opacity: 1;
      transform: translate(-100px, -100px) rotate(0deg);
    }
    65% {
      opacity: 0;
      transform: translate(-100px, -100px) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform: translate(-100px, -100px) rotate(0deg);
    }
  }
  @keyframes pointer-anime {
    0% {
      opacity: 0;
      transform: translate(0);
    }
    30% {
      opacity: 1;
      transform: translate(-100px, -100px);
    }
    35% {
      transform: translate(-100px, -100px) rotate(-15deg);
    }
    40% {
      transform: translate(-100px, -100px) rotate(0deg);
    }
    55% {
      opacity: 1;
      transform: translate(-100px, -100px) rotate(0deg);
    }
    65% {
      opacity: 0;
      transform: translate(-100px, -100px) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform: translate(-100px, -100px) rotate(0deg);
    }
  }
  .door0.open {
    z-index: 100;
    -webkit-animation: door-open-left 9s ease forwards;
    animation: door-open-left 9s ease forwards;
  }

  .door5.open {
    z-index: 100;
    -webkit-animation: door-open-right 9s ease forwards;
    animation: door-open-right 9s ease forwards;
  }

  .door1.open {
    z-index: 101;
    -webkit-animation: door-open-left 6s ease forwards;
    animation: door-open-left 6s ease forwards;
  }

  .door4.open {
    z-index: 101;
    -webkit-animation: door-open-right 6s ease forwards;
    animation: door-open-right 6s ease forwards;
  }

  .door2.open {
    z-index: 102;
    -webkit-animation: door-open-left 2.7s ease forwards;
    animation: door-open-left 2.7s ease forwards;
  }

  .door3.open {
    z-index: 102;
    -webkit-animation: door-open-right 2.7s ease forwards;
    animation: door-open-right 2.7s ease forwards;
  }

  @-webkit-keyframes door3-anime {
    0% {
      transform: translateX(0);
    }
    30% {
      transform: translateX(70px);
    }
    60% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes door3-anime {
    0% {
      transform: translateX(0);
    }
    30% {
      transform: translateX(70px);
    }
    60% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(0);
    }
  }
  .pre-screen {
    transition-delay: 2.7s;
    transform: scale(1);
  }

  .door-event-text {
    position: absolute;
    top: calc(50% - 130px);
    left: calc(50% + 130px);
    width: 200px;
    transform: rotate(15deg);
    animation: pluse 1s infinite alternate-reverse;
  }

  .touch.door-event-text {
    display: block;
  }

  .open .touch.door-event-text {
    display: none;
  }

  .click.door-event-text {
    display: none;
  }

  .anime-wrapper {
    height: 700px;
  }

  .main-screen-top {
    height: 500px;
    background: url(../img/movie/bg.jpg);
    background-position: center top;
    background-size: auto 100%;
    transform: scale(1) !important;
  }

  .door {
    min-height: 640px;
    width: calc(105% + 1px);
  }

  .electricfan-wrapper {
    /* width: 65px; */
    top: calc(50% + 120px);
    left: calc(0% + 20px);
    height: 50%;
    transform: scale(0.65) translate(-50%, -50%);
  }

  .electricfan-wrapper::after {
    /* top: -20px;
      left: 155px;
      width: 65px;
      height: 55px;
      background-image: url(../images/movie/interactive-touch.png); */
    top: 115px;
    left: 155px;
    z-index: 3;
    /* display: none; */
    /* width: 85px;
    height: 75px; */
    width: 110px;
    height: 110px;
    background-image: url(../images/movie/touch02.png);
    transform: scale(0.75);
    -webkit-animation: ookisaFan 1.2s infinite;
    animation: ookisaFan 1.2s infinite;
  }

  @-webkit-keyframes ookisaFan {
    0% {
      transform: scale(0.75);
    }
    50% {
      transform: scale(0.8);
    }
    100% {
      transform: scale(0.75);
    }
  }
  @keyframes ookisaFan {
    0% {
      transform: scale(0.75);
    }
    50% {
      transform: scale(0.8);
    }
    100% {
      transform: scale(0.75);
    }
  }
  .electricfan-wrapper .clickfanbtn {
    top: 115px;
    left: 155px;
    z-index: 3;
    width: 110px;
    height: 110px;
    transform: scale(0.75);
    -webkit-animation: ookisaFan 1.2s infinite;
    animation: ookisaFan 1.2s infinite;
  }

  .sticker-wrapper {
    top: 24px;
    left: calc(50% - 120px);
    width: 80px;
  }

  .famicom-wrapper {
    top: calc(50% + 6px);
    left: calc(50% - 110px);
    z-index: 10;
    width: 360px;
    height: 220px;
    transform: scale(0.5);
  }

  .famicom-wrapper::after {
    /* top: -57px;
    left: 50px; */
    top: 30px;
    left: 50px;
    z-index: 3;
    /* display: none; */
    /* width: 85px;
    height: 75px; */
    width: 110px;
    height: 110px;
    background-image: url(../images/movie/touch02.png);
  }

  .famicom-wrapper .interactive {
    /* -webkit-backface-visibility: hidden;
              backface-visibility: hidden; */
    transform: translate(0%, -50%) scale(1);
  }

  .famicom-wrapper svg {
    transform: translate(-10px, 10px) scale(0.9);
  }

  .beyblade-wrapper {
    top: calc(50% + 176px);
    left: calc(50% + 26px);
    z-index: 1;
    width: 60px;
  }

  .marble-wrapper {
    top: calc(50% + 186px);
    left: calc(50% + 120px);
    z-index: 1;
    width: 114px;
  }

  .youtube-btn-wrapper {
    top: calc(50% + 440px);
    left: calc(100% - 105px);
    display: none;
    width: 180px;
  }

  .soda-wrapper {
    /* top: calc(50% + 480px);
      left: calc(50% + 370px);
      transform: scale(1.4); */
    /* top: calc(50% + 510px);
      left: calc(50% - 120px);
      transform: scale(1.9); */
    top: calc(50% + 690px);
    left: calc(50% + 380px);
    z-index: 1;
    display: none;
    transform: scale(1.5) rotate(15deg);
  }

  .lighting-wrapper {
    top: 36px;
    left: calc(50% + 15px);
    z-index: 10;
    width: 180px;
    transform: translate(-50%, -50%) scale(0.6);
    transform-origin: center;
  }

  .lighting-wrapper::before {
    top: 70px;
    left: 28px;
    z-index: 3;
    width: 100px;
    height: 100px;
    background-image: url(../images/movie/touch02.png);
  }

  .lighting-wrapper .clicklightBodybtn {
    top: 170px;
    left: 28px;
    z-index: 3;
    width: 100px;
    height: 100px;
  }

  .tv-wrapper {
    top: 58%;
    width: 360px;
    height: 300px;
  }

  .video-wrapper {
    width: 250px;
    height: 150px;
    transform: translate(calc(-50% - 35px), calc(-50% + 54px));
  }

  .tv-wrapper video {
    width: 250px;
    height: 150px;
  }

  #shutdown {
    width: 100%;
  }

  .main-screen-top {
    overflow: visible;
  }

  .video-start-btn-wrapper {
    top: calc(50% - 6px);
    left: calc(50% + 141px);
    width: 60px;
  }

  .video-start-btn-wrapper::after {
    width: 50px;
    height: 50px;
  }

  .video-btn {
    width: 50px;
    height: 50px;
  }

  #video-start-btn .clickvideobtn {
    top: -36px;
    width: 50px;
    height: 50px;
    transform: scale(1.1);
    -webkit-animation: ookisaVideo 1.2s infinite;
    animation: ookisaVideo 1.2s infinite;
  }

  #video-start-btn::before {
    z-index: 3;
    width: 50px;
    height: 50px;
    background-image: url(../images/movie/touch02.png);
    transform: scale(1.1);
    -webkit-animation: ookisaVideo 1.2s infinite;
    animation: ookisaVideo 1.2s infinite;
  }

  @-webkit-keyframes ookisaVideo {
    0% {
      transform: scale(1.1);
    }
    50% {
      transform: scale(1.15);
    }
    100% {
      transform: scale(1.1);
    }
  }
  @keyframes ookisaVideo {
    0% {
      transform: scale(1.1);
    }
    50% {
      transform: scale(1.15);
    }
    100% {
      transform: scale(1.1);
    }
  }
  .clickPlease {
    top: calc(50% - 125px);
  }

  .main-screen-top {
    transform: scale(0.9);
  }

  .main-screen-bottom {
    position: absolute;
    bottom: 0px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 220px;
    background: #cf4532;
    transform: scale(1);
  }

  .main-screen-bottom {
    bottom: 100px;
    padding-top: 14px;
    height: 90px;
  }

  .text-wrapper img {
    position: relative;
    z-index: 9999;
    display: block;
    width: 240px;
  }

  .main-screen-bottom canvas,
.main-screen-bottom .text-wrapper {
    transform: translateY(-15px);
  }

  .main-screen-bottom canvas {
    width: 650px;
    height: 220px;
    transform: scale(0.4) translateY(-38px);
  }

  .main-screen-bottom::after {
    bottom: 15px;
    width: 800px;
    height: 30px;
  }

  .main-screen-bottom2 {
    height: 90px;
  }

  .main-screen-bottom2 a {
    width: 300px;
    transform: translateY(-80%);
  }

  #movie #footer {
    margin-top: 0;
    margin-bottom: -20px;
    /* transform: translateY(-20px); */
  }
}
.flex {
  flex-wrap: wrap;
}