#mainVisual {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  #mainVisual {
    width: 100%;
    aspect-ratio: 1920/940;
  }
}

#mainVisual .mainv_bg {
  position: relative;
}

#mainVisual .mainv_bg img {
  width: 100%;
}

#mainVisual .mainv_txt {
  position: absolute;
  z-index: 2;
  top: 6%;
  left: 3%;
  text-align: left;
  font-size: 2vw;
  line-height: 1.7;
  color: #000;
}

@media screen and (max-width: 768px) {
  #mainVisual .mainv_txt {
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 5.5vw;
    width: 100%;
    line-height: 2;
  }
}
.contolbtn {
  display: block;
  background: #867E6D;
  color: #fff;
  position: absolute;
  z-index: 10;
  bottom: 24px;
  left: 24px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-size: 12px;
  padding: 1em 2em;
  cursor: pointer;
  border: none;
}
.contolbtn .icon {
  display: inline-block;
  width: 17px;
}
.contolbtn .icon img {
  vertical-align: top;
  display: inline-block;
}
.contolbtn .txt {
  display: inline-block;
  width: 3.5em;
  white-space: nowrap;
}
.contolbtn .skip {
  display: block;
}
.contolbtn .play {
  display: none;
}
.contolbtn.play .skip {
  display: none;
}
.contolbtn.play .play {
  display: block;
}
@media screen and (max-width: 768px) {
  .contolbtn {
    bottom: 10px;
    left: 10px;
    transform: scale(0.8);
    transform-origin: left bottom;
  }
}

.scene {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: #fff;
  opacity: 0;
}

.scene1 {
  opacity: 0;
  z-index: 2;
  background: url(../imgs/mainv01bg.jpg) center center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease-in-out;
}
.scene1 .txt {
  font-family: YakuHanMP, "Noto Serif JP", YuMincho, "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 40px;
  color: #000;
  text-align: center;
  font-weight: 200;
  line-height: 1.5;
  transform: scale(1.05);
  position: relative;
  top: 0;
}
.scene1 .logo {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1.05);
}
.scene1.on {
  opacity: 1;
}
.scene1.on .txt {
  transition: transform 3s ease-in-out, top 1s 2s ease-in-out, opacity 1s 2s ease-in-out;
  transform: scale(1);
  top: -10vw;
  opacity: 0;
}
.scene1.on .logo {
  transform: scale(1);
  transition: opacity 1s 2s ease-in-out, transform 3s 2s ease-in-out;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .scene1 .txt {
    font-size: 5.6vw;
  }
  .scene1 .logo img {
    width: 78.8vw;
  }
}

.scene2 {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  opacity: 0;
  z-index: 3;
}
.scene2 img {
  width: 100%;
}
.scene2 .line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.scene2 .train {
  position: absolute;
  top: 29.1145833333vw;
  left: 66.0416666667vw;
  width: 6.5104166667vw;
}
.scene2 .train2 {
  top: 11.09375vw;
  left: 61.1458333333vw;
  width: 1.953125vw;
}
.scene2 .tsudanuma {
  position: absolute;
  width: 6.71875vw;
  top: 8.75vw;
  left: 4.4791666667vw;
}
.scene2 .tokyo {
  position: absolute;
  width: 5.7291666667vw;
  top: 5.8333333333vw;
  left: 83.9583333333vw;
}
.scene2 .kitanarashino {
  position: absolute;
  width: 8.59375vw;
  top: 25.46875vw;
  left: 54.9479166667vw;
}
.scene2 .mansion1 {
  position: absolute;
  width: 10.15625vw;
  top: 33.8541666667vw;
  left: 43.0208333333vw;
}
.scene2 .mansion2 {
  position: absolute;
  width: 26vw;
  top: 36.5104166667vw;
  left: 27.8520833333vw;
}
.scene2 .walk {
  position: absolute;
  width: 10.9375vw;
  top: 22.9270833333vw;
  left: 54.9479166667vw;
}
@media screen and (max-width: 768px) {
  .scene2 .train1 {
    top: 77.4666666667vw;
    left: 83.4666666667vw;
    width: 14.6666666667vw;
  }
  .scene2 .train2 {
    top: 39.0666666667vw;
    left: 65.0666666667vw;
    width: 4.1333333333vw;
  }
  .scene2 .tsudanuma {
    width: 16.4vw;
    top: 73.0666666667vw;
    left: 1.3333333333vw;
  }
  .scene2 .tokyo {
    width: 13.6vw;
    top: 19.3333333333vw;
    left: 85.4666666667vw;
  }
  .scene2 .kitanarashino {
    width: 26.4vw;
    top: 70.4vw;
    left: 46.2666666667vw;
  }
  .scene2 .mansion1 {
    width: 26vw;
    top: 95.9333333333vw;
    left: 27.1333333333vw;
  }
  .scene2 .mansion2 {
    width: 38.2vw;
    top: 99.6vw;
    left: 15.3333333333vw;
  }
  .scene2 .walk {
    width: 26.4vw;
    top: 71.2vw;
    left: 50.9333333333vw;
  }
}
.scene2.on {
  opacity: 1;
  transition: 1s;
}
.scene2:not(.on) .train1 {
  opacity: 0;
}
.scene2:not(.on) .train2 {
  opacity: 0;
}
.scene2:not(.on) .tsudanuma {
  opacity: 0;
}
.scene2:not(.on) .tokyo {
  opacity: 0;
}
.scene2:not(.on) .kitanarashino {
  opacity: 0;
}
.scene2:not(.on) .mansion1 {
  opacity: 0;
}
.scene2:not(.on) .mansion2 {
  opacity: 0;
}
.scene2:not(.on) .walk {
  opacity: 0;
}
.scene2.on .line1 {
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 40%, rgba(0, 0, 0, 0) 60%);
          mask-image: linear-gradient(90deg, black 0%, black 40%, rgba(0, 0, 0, 0) 60%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 250% 100%;
          mask-size: 250% 100%;
  -webkit-mask-position: 100% center;
          mask-position: 100% center;
  -webkit-animation: line1-animation 2s 0s cubic-bezier(0.25, 0.06, 0.5, 1) forwards;
          animation: line1-animation 2s 0s cubic-bezier(0.25, 0.06, 0.5, 1) forwards;
}
@-webkit-keyframes line1-animation {
  0% {
    -webkit-mask-position: 100% center;
            mask-position: 100% center;
  }
  100% {
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
  }
}
@keyframes line1-animation {
  0% {
    -webkit-mask-position: 100% center;
            mask-position: 100% center;
  }
  100% {
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
  }
}
.scene2.on .line2 {
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 40%, rgba(0, 0, 0, 0) 60%);
          mask-image: linear-gradient(180deg, black 0%, black 40%, rgba(0, 0, 0, 0) 60%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 250%;
          mask-size: 100% 250%;
  -webkit-mask-position: center 100%;
          mask-position: center 100%;
  -webkit-animation: line2-animation 2s 0s cubic-bezier(0.25, 0.06, 0.5, 1) forwards;
          animation: line2-animation 2s 0s cubic-bezier(0.25, 0.06, 0.5, 1) forwards;
}
@-webkit-keyframes line2-animation {
  0% {
    -webkit-mask-position: center 100%;
            mask-position: center 100%;
  }
  100% {
    -webkit-mask-position: center 0%;
            mask-position: center 0%;
  }
}
@keyframes line2-animation {
  0% {
    -webkit-mask-position: center 100%;
            mask-position: center 100%;
  }
  100% {
    -webkit-mask-position: center 0%;
            mask-position: center 0%;
  }
}
.scene2.on .light {
  -webkit-mask-image: linear-gradient(0deg, black 0%, black 40%, rgba(0, 0, 0, 0) 60%);
          mask-image: linear-gradient(0deg, black 0%, black 40%, rgba(0, 0, 0, 0) 60%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 250%;
          mask-size: 100% 250%;
  -webkit-mask-position: center 0%;
          mask-position: center 0%;
  -webkit-animation: light-animation 2s 1.2s cubic-bezier(0.25, 0.06, 0.5, 1) forwards;
          animation: light-animation 2s 1.2s cubic-bezier(0.25, 0.06, 0.5, 1) forwards;
}
@-webkit-keyframes light-animation {
  0% {
    -webkit-mask-position: center 0%;
            mask-position: center 0%;
  }
  100% {
    -webkit-mask-position: center 100%;
            mask-position: center 100%;
  }
}
@keyframes light-animation {
  0% {
    -webkit-mask-position: center 0%;
            mask-position: center 0%;
  }
  100% {
    -webkit-mask-position: center 100%;
            mask-position: center 100%;
  }
}
.scene2.on .train1 {
  opacity: 1;
  transition: opacity 0.8s 0.5s;
}
.scene2.on .train2 {
  opacity: 1;
  transition: opacity 0.8s 0.6s;
}
.scene2.on .tsudanuma {
  opacity: 1;
  transition: opacity 0.8s 0.7s;
}
.scene2.on .tokyo {
  opacity: 1;
  transition: opacity 0.8s 0.8s;
}
.scene2.on .kitanarashino {
  opacity: 1;
  transition: opacity 0.8s 0.9s;
}
.scene2.on .mansion1 {
  opacity: 1;
  transition: opacity 0.8s 1.5s;
}
.scene2.on .mansion2 {
  opacity: 0;
}
.scene2.on .walk {
  opacity: 0;
}
.scene2.on2 {
  transform: scale(1.22);
  transform-origin: center 100%;
  transition: transform 1.5s ease-in-out;
}
.scene2.on2 .line1 {
  opacity: 0;
  transition: opacity 1s 0s;
}
.scene2.on2 .line2 {
  opacity: 0;
  transition: opacity 1s 0s;
}
.scene2.on2 .train1 {
  opacity: 0;
  transition: opacity 1s 0s;
}
.scene2.on2 .train2 {
  opacity: 0;
  transition: opacity 1s 0s;
}
.scene2.on2 .tsudanuma {
  opacity: 0;
  transition: opacity 1s 0s;
}
.scene2.on2 .tokyo {
  opacity: 0;
  transition: opacity 1s 0s;
}
.scene2.on2 .kitanarashino {
  opacity: 0;
  transition: opacity 1s 0s;
}
.scene2.on2 .mansion1 {
  opacity: 0;
  transition: opacity 1s 0s;
}
.scene2.on2 .mansion2 {
  opacity: 1;
  transition: opacity 1s 0.5s;
}
.scene2.on2 .walk {
  opacity: 1;
  transition: opacity 1s 1s;
}

.scene3 {
  position: relative;
  top: 0;
  left: 0;
  z-index: 4;
  transform: scale(1.01);
  transform-origin: center bottom;
}
.scene3:not(.on) {
  opacity: 0;
}
.scene3:not(.on) .photo {
  transform: scale(1.08);
}
.scene3.on {
  opacity: 1;
  transition: opacity 1s;
}
.scene3.on .mainv_txt {
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 40%, rgba(0, 0, 0, 0) 60%);
          mask-image: linear-gradient(90deg, black 0%, black 40%, rgba(0, 0, 0, 0) 60%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 250% 100%;
          mask-size: 250% 100%;
  -webkit-mask-position: 100% center;
          mask-position: 100% center;
  -webkit-animation: mainv_txt-animation 2s 0s cubic-bezier(0.25, 0.06, 0.5, 1) forwards;
          animation: mainv_txt-animation 2s 0s cubic-bezier(0.25, 0.06, 0.5, 1) forwards;
}
@-webkit-keyframes mainv_txt-animation {
  0% {
    -webkit-mask-position: 100% center;
            mask-position: 100% center;
  }
  100% {
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
  }
}
@keyframes mainv_txt-animation {
  0% {
    -webkit-mask-position: 100% center;
            mask-position: 100% center;
  }
  100% {
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
  }
}
.scene3.on .photo {
  transform: scale(1);
  transform-origin: cednter bottom;
  transition: transform 2.5s 0s ease-in-out;
}

.wrap_icon {
  width: 1024px;
  height: 832px;
  margin: auto auto 80px;
  position: relative;
}
.wrap_icon h5 {
  width: 100%;
  height: 776px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1.3s 0.5s ease-in-out, transform 0.8s 0.5s ease-in-out;
}
.wrap_icon .icon {
  opacity: 0;
  transform: scale(0.1);
  position: absolute;
  top: 293px;
  transition: opacity 1.3s 0.5s ease-in-out, top 1.3s ease-in-out, left 1.3s ease-in-out, transform 1.3s ease-in-out;
}
.wrap_icon .icon img.pc {
  display: inline;
}
.wrap_icon .icon01 {
  top: 103px;
  left: 391px;
}
.wrap_icon .icon02 {
  width: 100%;
  text-align: center;
  top: 246px;
  left: 0;
}
.wrap_icon .icon03 {
  top: 103px;
  left: 391px;
}
.wrap_icon .icon04 {
  top: 480px;
  left: 391px;
}
.wrap_icon .icon05 {
  width: 100%;
  text-align: center;
  top: 293px;
  left: 0;
}
.wrap_icon .icon06 {
  top: 480px;
  left: 391px;
}
.wrap_icon.sai-animate h5 {
  opacity: 1;
  transform: scale(1);
}
.wrap_icon.sai-animate .icon {
  opacity: 1;
  transform: scale(1);
}
.wrap_icon.sai-animate .icon01 {
  top: 103px;
  left: 0;
}
.wrap_icon.sai-animate .icon02 {
  text-align: center;
  top: 0;
  left: 0;
}
.wrap_icon.sai-animate .icon03 {
  top: 103px;
  left: 782px;
}
.wrap_icon.sai-animate .icon04 {
  top: 480px;
  left: 0;
}
.wrap_icon.sai-animate .icon05 {
  top: 586px;
}
.wrap_icon.sai-animate .icon06 {
  top: 480px;
  left: 782px;
}
@media screen and (max-width: 768px) {
  .wrap_icon {
    width: auto;
    height: 130.1333333333vw;
    margin: auto 0 50px;
    position: relative;
  }
  .wrap_icon h5 {
    margin: auto;
    width: 100%;
    height: 128vw;
  }
  .wrap_icon h5 img {
    width: 76.5333333333vw;
  }
  .wrap_icon .icon img.pc {
    display: none;
  }
  .wrap_icon .icon img.sp {
    display: inline;
  }
  .wrap_icon .icon01 {
    width: 22.1333333333vw;
    left: 37.6vw;
    top: 45.6vw;
  }
  .wrap_icon .icon02 {
    width: auto;
    width: 16.1333333333vw;
    left: 41.8666666667vw;
    top: 46.9333333333vw;
  }
  .wrap_icon .icon03 {
    width: 20.5333333333vw;
    left: 39.7333333333vw;
    top: 48vw;
  }
  .wrap_icon .icon04 {
    width: 25.8666666667vw;
    left: 37.0666666667vw;
    top: 45.6vw;
  }
  .wrap_icon .icon05 {
    width: auto;
    width: 25.4666666667vw;
    left: 37.2vw;
    top: 45.3333333333vw;
  }
  .wrap_icon .icon06 {
    width: 27.2vw;
    left: 36.4vw;
    top: 46.9333333333vw;
  }
  .wrap_icon.sai-animate h5 {
    opacity: 1;
    transform: scale(1);
  }
  .wrap_icon.sai-animate .icon {
    opacity: 1;
  }
  .wrap_icon.sai-animate .icon01 {
    left: 7.2vw;
    top: 8.9333333333vw;
  }
  .wrap_icon.sai-animate .icon02 {
    left: 41.8666666667vw;
    top: 0vw;
  }
  .wrap_icon.sai-animate .icon03 {
    left: 71.8666666667vw;
    top: 13.4666666667vw;
  }
  .wrap_icon.sai-animate .icon04 {
    left: 5.3333333333vw;
    top: 82.8vw;
  }
  .wrap_icon.sai-animate .icon05 {
    left: 37.2vw;
    top: 92.8vw;
  }
  .wrap_icon.sai-animate .icon06 {
    left: 67.3333333333vw;
    top: 85.2vw;
  }
}
/*# sourceMappingURL=movie.css.map */