@charset "UTF-8";
/*css　*/
.mIntro-bg-wraper {
  display: block;
  position: absolute;
  left: 0;
  top: -112px;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  pointer-events: none;
  z-index: 3;
  background-color: #000;
}

.mIntro-bg {
  pointer-events: none;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 1;
  -webkit-transition: opacity 0.2s 3.2s;
  transition: opacity 0.2s 3.2s;
}

.-hero_action .mIntro-bg {
  opacity: 0;
}

.mIntro-bg_canvas {
  width: 100%;
  height: 100%;
  position: relative;
}

@media only screen and (max-width: 768px) {
  .mIntro-bg-wraper {
    top: -28vw;
  }
}

@media only screen and (max-width: 768px) and (orientation: landscape) {
  .mIntro-bg-wraper {
    top: -9.58084vw;
    height: calc(100vh + 9.58084vw);
  }
  .mIntro-bg-wraper canvas {
    height: calc(100vh + 9.58084vw) !important;
  }
}

.mKv-outer {
  overflow: hidden;
  background-color: #fff;
  width: 100%;
}

.-hero_action .mKv-outer {
  padding: 0 40px 40px;
  padding: 0;
}

.mKv-holder {
  position: relative;
}

.mKv-movie {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: calc(100vh - 112px - 0px);
  display: block;
  pointer-events: none;
}

.-hero_action .mKv-movie {
  cursor: pointer;
  pointer-events: all;
}

.ie .mKv-movie {
  background-color: white;
}

.mKv-movie video,
.mKv-movie iframe,
.mKv-movie canvas {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc((100vh - 112px - 80px) * 1.77778);
  height: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.mKv-movie-base {
  position: relative;
}

.mKv-movie-base::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.mKv-cliper-holder {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc((100vh - 112px - 80px) * 1.77778);
  height: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.mKv-cliper-path_g {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.mKv-cliper-hole {
  -webkit-transform: translate(0, 0) scale(1);
          transform: translate(0, 0) scale(1);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.14, 0.99, 0.43, 0.99);
  transition: -webkit-transform 0.5s cubic-bezier(0.14, 0.99, 0.43, 0.99);
  transition: transform 0.5s cubic-bezier(0.14, 0.99, 0.43, 0.99);
  transition: transform 0.5s cubic-bezier(0.14, 0.99, 0.43, 0.99), -webkit-transform 0.5s cubic-bezier(0.14, 0.99, 0.43, 0.99);
}

.mKv-canvas-wraper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.mKv-title-wraper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: calc(100% - 80px);
  overflow: hidden;
  position: absolute;
  right: 50%;
  bottom: 40px;
  -webkit-transform: translateX(50%) skew(0deg);
          transform: translateX(50%) skew(0deg);
  pointer-events: none;
  z-index: 3;
  padding-left: 6px;
  padding-right: 6px;
}

.mKv-title-wraper::after {
  content: "";
  display: block;
  width: 106%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #000;
  -webkit-transform: translateX(-2%);
          transform: translateX(-2%);
  -webkit-transition: -webkit-transform 0.675s cubic-bezier(0.07, 0.52, 0.98, 0.23);
  transition: -webkit-transform 0.675s cubic-bezier(0.07, 0.52, 0.98, 0.23);
  transition: transform 0.675s cubic-bezier(0.07, 0.52, 0.98, 0.23);
  transition: transform 0.675s cubic-bezier(0.07, 0.52, 0.98, 0.23), -webkit-transform 0.675s cubic-bezier(0.07, 0.52, 0.98, 0.23);
}

.mKv-title-wraper > * {
  width: 100%;
  min-height: 1px;
  max-width: 100%;
}

.mKv-title-wraper.-action::after {
  -webkit-transform: translateX(102%);
          transform: translateX(102%);
}

.mKv-title-wraper.-action > * {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

.mKv-title-wraper img {
  width: 100%;
}

.mKv-title-en {
  margin-top: 18px;
}

.mKv-bottom_link {
  display: block;
  width: 100%;
  height: 120px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
}

.mKv-bottom_linkArrow {
  position: absolute;
  width: 12px;
  height: 26px;
  display: block;
  left: 50%;
  bottom: -34px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.mKv-bottom_linkArrow::before, .mKv-bottom_linkArrow::after {
  content: "";
  display: block;
  position: absolute;
  background-color: #000;
}

.mKv-bottom_linkArrow::before {
  width: 2px;
  height: 40px;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.mKv-bottom_linkArrow::after {
  border-left: 6px solid #FFF;
  border-right: 6px solid #FFF;
  border-top: 10px solid #000;
  border-bottom: 10px solid #FFF;
  right: -6px;
  bottom: -20px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.mKv-button_sp {
  display: none;
}

.ie .mKv-button_sp {
  background-color: transparent;
}

.mKv-rightLink {
  display: block;
  position: absolute;
  right: calc(20px - 0.5em);
  bottom: 40px;
  width: 1.2em;
  z-index: 3;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #000;
  padding-bottom: 4.7em;
  opacity: 0;
  -webkit-transition: opacity 0.8s 0.4s,color 0.4s;
  transition: opacity 0.8s 0.4s,color 0.4s;
  vertical-align: middle;
  overflow: hidden;
  text-align: center;
}

.mKv-rightLink:hover {
  color: #FFF;
}

.mKv-rightLink:hover .mKv-rightLink_text::before {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

.-hero_action .mKv-rightLink {
  opacity: 1;
}

.ie .mKv-rightLink:hover .mKv-rightLink_text::before {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

.-pcHumberger .mKv-rightLink {
  right: auto;
  left: calc(80px - 0.5em);
  top: 40px;
  bottom: auto;
  color: #FFF;
}

.mKv-rightLink_text {
  position: relative;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

.-pcHumberger .mKv-rightLink_text::before {
  display: none;
}

.mKv-rightLink_text::before {
  content: "";
  display: block;
  width: 1.2em;
  height: 100%;
  position: absolute;
  left: -0.1em;
  top: 0;
  background-color: #000;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transform: translateY(-6em);
          transform: translateY(-6em);
  z-index: -1;
}

.ie .mKv-rightLink_text::before {
  -webkit-transform: translateY(-430%);
          transform: translateY(-430%);
}

.mKv-rightLink_border {
  height: 60px;
}

@media only screen and (min-width: 769px) {
  .mKv-title-wraper.uHidden_pc {
    display: none;
  }
  .-hero_action .mKv-rightLink {
    opacity: 1;
  }
}

@media only screen and (max-width: 896px) {
  .mKv-holder {
    height: calc(100vh - 14.28571vw);
  }
}

@media only screen and (max-width: 896px) and (orientation: landscape) {
  .mKv-movie {
    height: 100%;
  }
  .-pcHumberger .mKv-rightLink {
    left: auto;
    right: 0.8982vw;
    color: #000;
    font-size: 2.09581vw;
    padding-bottom: 3.5em;
    top: auto;
    bottom: 5.33333vw;
  }
  .mKv-title-wraper {
    bottom: 7.14286vw;
  }
  .mKv-button_sp {
    display: block;
    width: 26.78571vw;
    height: 5.80357vw;
    border: 2px solid #FFF;
    color: #FFF;
    font-size: 3.125vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    left: 50%;
    bottom: calc(50% + 2.23214vw);
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .-showPCTitle .mKv-button_sp {
    bottom: calc(50% - 44px);
  }
}

@media only screen and (max-width: 768px) {
  .mKv-movie {
    height: calc(100vh - 28vw - 44px);
    height: 100%;
  }
  .mKv-movie video,
  .mKv-movie iframe,
  .mKv-movie canvas {
    width: calc((100vh - 28vw - 8vw) * 1.77778);
  }
  .mKv-cliper-holder {
    width: calc((100vh - 28vw - 8vw) * 1.77778);
  }
  .mKv-title-wraper {
    width: 85.06667vw;
    bottom: calc(6.66667vw + 44px);
    bottom: 6.66667vw;
    padding-left: 0;
    padding-right: 0;
  }
  .mKv-title-wraper.uHidden_sp {
    display: none;
  }
  .mKv-title-wraper::after {
    display: none;
  }
  .mKv-title-wraper > * {
    -webkit-transform: none;
            transform: none;
    -webkit-transition: none;
    transition: none;
  }
  .mKv-title-wraper.-action .mKv-title-en1::after,
  .mKv-title-wraper.-action .mKv-title-en2::after,
  .mKv-title-wraper.-action .mKv-title-ja::after {
    -webkit-transform: translateX(102%);
            transform: translateX(102%);
  }
  .-showPCTitle .mKv-title-wraper.uHidden_pc {
    display: none;
  }
  .-showPCTitle .mKv-title-wraper.uHidden_sp {
    display: block;
  }
  .-showPCTitle .mKv-title-wraper::after {
    content: "";
    display: block;
    width: 106%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #000;
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
    -webkit-transition: -webkit-transform 0.675s cubic-bezier(0.07, 0.52, 0.98, 0.23);
    transition: -webkit-transform 0.675s cubic-bezier(0.07, 0.52, 0.98, 0.23);
    transition: transform 0.675s cubic-bezier(0.07, 0.52, 0.98, 0.23);
    transition: transform 0.675s cubic-bezier(0.07, 0.52, 0.98, 0.23), -webkit-transform 0.675s cubic-bezier(0.07, 0.52, 0.98, 0.23);
  }
  .-showPCTitle .mKv-title-wraper > * {
    width: 100%;
    min-height: 1px;
    max-width: 100%;
  }
  .-showPCTitle .mKv-title-wraper.-action::after {
    -webkit-transform: translateX(102%);
            transform: translateX(102%);
  }
  .-showPCTitle .mKv-title-wraper.-action > * {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  .mKv-title-en {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
  }
  .mKv-title-ja {
    margin-top: 2.13333vw;
    padding-left: 0;
    padding-right: 0;
  }
  .-showPCTitle .mKv-title-ja::after {
    display: none;
  }
  .mKv-title-en1, .mKv-title-en2, .mKv-title-ja {
    position: relative;
  }
  .mKv-title-en1::after, .mKv-title-en2::after, .mKv-title-ja::after {
    content: '';
    display: block;
    width: calc(100% + 16px);
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #000;
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
  }
  .mKv-title-en1, .mKv-title-en2 {
    display: block;
  }
  .mKv-title-en1::after {
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.03, 0.54, 0.18, 1.04);
    transition: -webkit-transform 1s cubic-bezier(0.03, 0.54, 0.18, 1.04);
    transition: transform 1s cubic-bezier(0.03, 0.54, 0.18, 1.04);
    transition: transform 1s cubic-bezier(0.03, 0.54, 0.18, 1.04), -webkit-transform 1s cubic-bezier(0.03, 0.54, 0.18, 1.04);
  }
  .mKv-title-en2 {
    margin-top: 1.86667vw;
  }
  .mKv-title-en2::after {
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.17, 0, 0.06, 1.04);
    transition: -webkit-transform 1s cubic-bezier(0.17, 0, 0.06, 1.04);
    transition: transform 1s cubic-bezier(0.17, 0, 0.06, 1.04);
    transition: transform 1s cubic-bezier(0.17, 0, 0.06, 1.04), -webkit-transform 1s cubic-bezier(0.17, 0, 0.06, 1.04);
    -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
  }
  .mKv-title-ja::after {
    -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.01, 0.49, 0.52, 0.99);
    transition: -webkit-transform 0.8s cubic-bezier(0.01, 0.49, 0.52, 0.99);
    transition: transform 0.8s cubic-bezier(0.01, 0.49, 0.52, 0.99);
    transition: transform 0.8s cubic-bezier(0.01, 0.49, 0.52, 0.99), -webkit-transform 0.8s cubic-bezier(0.01, 0.49, 0.52, 0.99);
    -webkit-transition-delay: 0.55s;
            transition-delay: 0.55s;
  }
  .mKv-pageNext {
    bottom: 2.13333vw;
  }
  .mKv-button_sp {
    display: block;
    width: 48vw;
    height: 10.93333vw;
    border: 2px solid #FFF;
    color: #FFF;
    font-size: 5.33333vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    left: 50%;
    bottom: calc(50% + 44px);
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .-showPCTitle .mKv-button_sp {
    bottom: calc(50% - 44px);
  }
  .mKv-rightLink {
    right: auto;
    left: calc(10.66667vw - 0.5em);
    bottom: auto;
    color: #FFF;
    font-size: 3.73333vw;
    padding-bottom: 2.2em;
    position: fixed;
    top: 33.33333vw;
  }
  .-pcHumberger .mKv-rightLink {
    top: 42.66667vw;
    top: 33.33333vw;
    left: calc(10.66667vw - 0.5em);
  }
  .mKv-rightLink_border {
    height: 6.4vw;
  }
}

@media only screen and (max-width: 768px) and (orientation: landscape) {
  .mKv-movie {
    height: calc(100vh - 13.47305vw);
  }
  .mKv-movie video,
  .mKv-movie iframe,
  .mKv-movie canvas {
    width: calc((100vh - 28vw - 8vw) * 1.77778);
    width: 100%;
  }
  .-showPCTitle .mKv-button_sp {
    bottom: calc(50% - 3.59281vw);
    height: 7.18563vw;
    font-size: 2.99401vw;
    width: 29.94012vw;
  }
  .-showPCTitle .mKv-title-wraper.uHidden_sp {
    width: 88.32335vw;
    bottom: 5.08982vw;
  }
  .-pcHumberger .mKv-rightLink {
    left: auto;
    right: 0.8982vw;
    color: #000;
    font-size: 2.09581vw;
    padding-bottom: 3.5em;
    top: auto;
    bottom: 5.33333vw;
  }
}

@-webkit-keyframes hero_shrink {
  0% {
    padding: 0;
  }
  100% {
    padding: 0 40px 40px;
  }
}

@keyframes hero_shrink {
  0% {
    padding: 0;
  }
  100% {
    padding: 0 40px 40px;
  }
}

body, html {
  background-color: #fff;
}

main {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

@media only screen and (min-width: 769px) {
  .mGallData-container .mYt-wraper {
    max-width: 104vh;
    margin-left: auto;
    margin-right: auto;
  }
  .mLink-bottom {
    margin-top: 5.6%;
  }
}

@media only screen and (max-width: 896px) {
  body, html {
    height: 100%;
    overflow: hidden;
  }
  main {
    min-height: 100%;
  }
}

@media only screen and (max-width: 768px) {
  main {
    min-height: 1px;
    overflow: hidden;
  }
}