@charset "UTF-8";
/*===============================================
●mian.css 画面の横幅が770px以上
===============================================*/
@media screen and (min-width: 770px){
body {
	min-width: auto;
    background-color: #000;
    height: 100vh;
}
img {
    width: 100%;
}
.wrapper {
    max-width: 1180px;
    position: relative;
    margin: 0 auto;
}
.video_outer {
    width: 52vw;
    max-width: 614px;
    margin: 0 auto 6.5vw;
    padding-top: 15.5vw;
}
video {
	width: 100%;
    height: 100%;
}
.illust {
    max-width: 1180px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
	animation-duration: 7s;
}
.illust2 {
	animation-delay: 2s;
}
.illust3 {
	animation-delay: 4s;
}
.illust4 {
	animation-delay: 6s;
}
.illust5 {
	animation-delay: 8s;
}
.s_illust_01 {
    width: 9vw;
    position: absolute;
    top: 25.5vw;
    left: 10vw;
    animation-duration: 3s;
}
@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  15% {
    transform: scale3d(1.25, 0.75, 1);
  }

  20% {
    transform: scale3d(0.75, 1.25, 1);
  }

  25% {
    transform: scale3d(1.15, 0.85, 1);
  }

  32% {
    transform: scale3d(0.95, 1.05, 1);
  }

  37% {
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}
.s_illust_02 {
    width: 8.6vw;
    position: absolute;
    top: 78.5vw;
    left: 41vw;
    animation: Shake 0.8s ease-in-out infinite alternate;
}
@keyframes Shake {
  0% {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(0);
  }
}


.s_illust_03 {
    width: 8vw;
    position: absolute;
    top: 45.5vw;
    right: 10.5vw;
    animation: horizontal2 1.5s ease-in-out infinite alternate;
}
@keyframes horizontal2 {
  0% {
    transform: translateX(6px);
  }
  100% {
    transform: translateX(0px);
  }
}
.s_illust_03 img {
    animation: vertical 2s ease-in-out infinite alternate;
}
@keyframes vertical {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.btn {
    width: 37vw;
    max-width: 435px;
    margin: 0 auto 21px;
    position: relative;
    z-index: 999;
}
}
/*===============================================
●sp.css  画面の横幅が769pxまで（iPhone6 横向きまで）
===============================================*/
@media screen and (max-width:769px){
#container{
    background-color: #000;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.video_outer {
    width: 92vw;
    margin: 0 auto 14.2vw;
    padding-top: 13.5vw;
}
video {
	width: 100%;
    height: 100%;
}
.illust {
    position: absolute;
    top: -8%;
    right: 0;
    bottom: 0;
    left: -40%;
    margin: auto;
    width: 180%;
	animation-duration: 3s;
}
.illust2 {
	animation-delay: 0.5s;
}
.illust3 {
	animation-delay: 1s;
}
.illust4 {
	animation-delay: 1.5s;
}
.illust5 {
	animation-delay: 2s;
}
.s_illust_01 {
    width: 9vw;
    position: absolute;
    top: 25.5vw;
    left: 10vw;
    display: none;
}
.s_illust_02 {
    width: 11.6vw;
    position: absolute;
    top: 126.5vw;
    left: 33vw;
}
.s_illust_03 {
    width: 8vw;
    position: absolute;
    top: 45.5vw;
    right: 10.5vw;
    display: none;
}
.btn {
    width: 62vw;
    margin: 0 auto 21px;
    position: relative;
    z-index: 999;
}
}
/*===============================================
●pc 画面の横幅が1180px以上
===============================================*/
@media screen and (min-width: 1180px){
.video_outer {
    margin: 0 auto 74px;
    padding-top: 183px;
}
.s_illust_01 {
    width: 108px;
    position: absolute;
    top: 299px;
    left: 119px;
}
.s_illust_02 {
    width: 106px;
    position: absolute;
    top: 922px;
    left: 480px;
}
.s_illust_03 {
    width: 94px;
    position: absolute;
    top: 534px;
    right: 126px;
}
}