@charset "UTF-8";
/*==================================*/
/*mv*/
/*==================================*/
@keyframes bgZoom {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.y4_Mv {
  background-size: cover;
  overflow: hidden;
  position: relative;
}
.y4_Mv:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/bg2/mv_bg2.jpg") no-repeat center center #6303a7;
  background-size: cover;
  animation: bgZoom 20s ease-out infinite forwards;
}
.y4_Mv__bg {
  transform-style: preserve-3d;
  will-change: transform,animation,position;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.y4_Mv__bg > div {
  will-change: transform,animation,position;
}
.y4_Mv__bg--anime {
  mix-blend-mode: color-dodge;
}
.y4_Mv__bg1 {
  position: absolute;
  width: 100%;
  left: -50vw;
  top: 0;
}
@media only screen and (max-width: 767px) {
  .y4_Mv__bg1 {
    top: 50%;
  }
}
.y4_Mv__bg1 > div {
  animation: y4_Mv_bganime1 5s ease-in-out infinite alternate;
}
.y4_Mv__bg2 {
  position: absolute;
  left: -20vw;
  top: -25vw;
}
.y4_Mv__bg2 > div {
  transform: rotate(51deg);
  animation: y4_Mv_bganime2 5s ease-in-out infinite alternate;
}
.y4_Mv__bg3 {
  position: absolute;
  right: -40vw;
  top: 25vw;
  width: 80%;
}
@media only screen and (max-width: 767px) {
  .y4_Mv__bg3 {
    top: 10vh;
    right: -60vw;
    width: 80%;
  }
}
.y4_Mv__bg3 > div {
  transform: scale(-1, 1);
  animation: y4_Mv_bganime3 5s ease-in-out infinite alternate;
}
.y4_Mv__bg4 {
  position: absolute;
  left: 20vw;
  top: -10vw;
}
.y4_Mv__bg4 > div {
  transform: scale(0.8);
  animation: y4_Mv_bganime4 5s ease-in-out infinite alternate;
}
.y4_Mv__bg5 {
  position: absolute;
  right: -40vw;
  top: -20vw;
}
.y4_Mv__bg5 > div {
  transform: scale(0.8);
  animation: y4_Mv_bganime1 8s ease-in-out infinite alternate;
}
.y4_Mv__bg6 {
  position: absolute;
  right: -40vw;
  bottom: 5vw;
}
.y4_Mv__bg6 > div {
  transform: scale(0.8) rotate(80deg);
  animation: y4_Mv_bganime2 10s ease-in-out infinite alternate;
}
.y4_Mv__bg7 {
  position: absolute;
  left: -10vw;
  bottom: -50vw;
}
.y4_Mv__bg7 > div {
  transform: scale(-1, 0.5) rotate(-150deg);
  animation: y4_Mv_bganime3 3s ease-in-out infinite alternate;
}
.y4_Mv__bg8 {
  position: absolute;
  left: -40vw;
  top: 10vw;
}
.y4_Mv__bg8 > div {
  transform: scale(1, 0.5);
  animation: y4_Mv_bganime2 8s ease-in-out infinite alternate;
}
.y4_Mv__bg9 {
  position: absolute;
  left: -10vw;
  top: -35vw;
}
.y4_Mv__bg9 > div {
  transform: scale(0.8) rotate(-90deg);
  animation: y4_Mv_bganime2 10s ease-in-out infinite alternate;
}
.y4_Mv__bg10 {
  position: absolute;
  left: -30vw;
  top: 150%;
}
@media only screen and (max-width: 767px) {
  .y4_Mv__bg10 {
    top: 100%;
  }
}
.y4_Mv__bg10 > div {
  animation: y4_Mv_bganime2 10s ease-in-out infinite alternate;
}
.y4_Mv__set {
  display: flex;
  height: 55vw;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .y4_Mv__set {
    height: 85vh;
    min-height: 150vw;
    display: block;
  }
}
.y4_Mv__main {
  width: 35%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  z-index: 2;
}
@media print, screen and (min-width: 768px) {
  .y4_Mv__main {
    margin: 0 auto;
    height: 50vw;
  }
}
@media only screen and (max-width: 767px) {
  .y4_Mv__main {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
  }
}
.y4_Mv__main__ttl {
  position: relative;
  z-index: 10;
  transform-style: preserve-3d;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.y4_Mv__main__ttl img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 767px) {
  .y4_Mv__main__ttl img {
    width: 80%;
  }
}
.y4_Mv__visual {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  width: 60%;
}
@media only screen and (max-width: 767px) {
  .y4_Mv__visual {
    width: 100%;
    height: 100%;
  }
}
.y4_Mv__visual img {
  vertical-align: bottom;
}
.y4_Mv__visual__cara1 {
  position: absolute;
  top: -60px;
  left: 20%;
  width: 55%;
}
.y4_Mv__visual__cara1 img {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .y4_Mv__visual__cara1 {
    width: 60%;
    top: inherit;
    bottom: 24%;
    left: 44%;
  }
}
.y4_Mv__visual__cara2 {
  position: absolute;
  top: 12%;
  left: 0%;
  width: 55%;
}
.y4_Mv__visual__cara2 img {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .y4_Mv__visual__cara2 {
    width: 55%;
    top: inherit;
    bottom: 35vw;
    left: 15%;
  }
}
.y4_Mv__visual__cara3 {
  position: absolute;
  top: 9%;
  right: -10%;
  width: 82%;
}
.y4_Mv__visual__cara3 img {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .y4_Mv__visual__cara3 {
    top: inherit;
    bottom: 20vw;
    right: -10%;
  }
}
.y4_Mv__visual__cara4 {
  position: absolute;
  bottom: 0%;
  right: -10%;
  width: 55%;
}
.y4_Mv__visual__cara4 img {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .y4_Mv__visual__cara4 {
    bottom: 0;
    right: -25%;
  }
}
.y4_Mv__visual__cara5 {
  position: absolute;
  bottom: 0%;
  left: 10%;
  width: 54%;
}
.y4_Mv__visual__cara5 img {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .y4_Mv__visual__cara5 {
    bottom: 0;
    left: 20%;
  }
}
.y4_Mv__visual__copy {
  position: absolute;
  bottom: 15%;
  left: 0;
  transform: translate(5%, 0);
  width: 42%;
  z-index: 5;
}
.y4_Mv__visual__copy img {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .y4_Mv__visual__copy {
    bottom: 6%;
  }
}

@keyframes y4_Mv_bganime1 {
  0% {
    transform: rotateY(0deg) rotate(0deg) scale(1);
  }
  100% {
    transform: rotateY(30deg) rotate(25deg) scale(1.5);
  }
}
@keyframes y4_Mv_bganime2 {
  0% {
    transform: rotateY(0deg) rotate(0deg) scale(1);
  }
  100% {
    transform: rotateY(20deg) rotate(15deg) scale(1.5);
  }
}
@keyframes y4_Mv_bganime3 {
  0% {
    transform: rotateX(0deg) rotate(0deg) scale(1);
  }
  100% {
    transform: rotateX(60deg) rotate(15deg) scale(1.5);
  }
}
@keyframes y4_Mv_bganime4 {
  0% {
    transform: rotateX(0deg) rotate(0deg);
  }
  100% {
    transform: rotateX(70deg) rotate(20deg);
  }
}