/* Webフォント読み込み */
@font-face {
	font-family: PixelMplus10-Regular;
	src: url('../fonts/PixelMplus/PixelMplus12-Bold.ttf') format("truetype");
}
.font{
  font-size: 45px;
  font-weight: bold;
  font-family: PixelMplus10-Regular;
}

.footer{
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 35;
  width: 130px;
}


/* mainスタート */
  body {
    position: relative;
    margin: 0;
  }
  
  main {
    width: 100%;
    height: 100vh;
  }

  .body{
    background-color: black;
  }

   /* 点滅 */
   .blinking{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
      -moz-animation:blink 1.5s ease-in-out infinite alternate;
      animation:blink 3s ease-in-out infinite alternate;
  }
  @-webkit-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @-moz-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  
/* indexーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.wrapper1 {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 99;
}

.title p{
  text-align: center;
}

.title > p:nth-child(1){
  margin-bottom: 97px;
}

.btn1{
  width: 130px;
  height: 130px;
}

.caution{
  width: 440px;
  height: 24.2px;
}

.caution_sp{
  display: none;
}

 /* 2ndーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* 動画リモコン */
footer .controller{
  display: flex;
  justify-content: space-between;
}
footer .controller div.btn_icon {
  padding: 0;
  background: none;
  width: 60px;
  height: 45px;
  overflow: hidden;
  cursor: pointer;
}
footer .controller div.btn_icon img {
  margin: 0;
  height: 143%;
  width: 170%;
  object-fit: cover;
  object-position: 5% -27px;
}
footer .controller button {
  border-radius: 50%;
  border-width: 0;
  padding: 0;
  background: none;
  width: 35px;
  height: 45px;
  overflow: hidden;
  cursor: pointer;
}
footer .controller button img {
  margin: 0;
  height: 150%;
  width: 150%;
  object-fit: cover;
}
footer .controller button img#play.play {
  /* play icon */
  object-position: 85% 10px;
}
footer .controller button img#play.pause {
  /* pause icon */
  object-position: 85% -30px;
}

footer .controller button img#icon.sound {
  /* sound icon */
  object-position: 130% 10px;
}
footer .controller button img#icon.mute {
  /* mute icon */
  object-position: 130% -30px;
}

 /* MOVIE  */
 .wrapper2{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.movie{
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.movie_sp{
  display: none;
}


/* TEXT  */
.wrapper3 {
  height: 100vh;
  width: 100%;
  
  /* 位置調整 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  /* 非表示 */
  opacity: 0;
}

.wra3_container{
  height: 100%;
  width: 100%;
  /* 位置調整 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  /* 非表示 */
  display: none;
}

.box{
  position: fixed;
  bottom: 6px;
  cursor: pointer;
  /* 非表示 */
  display: none;
}

.btn2{
  width: 85px;
  height: 85px;
}

.box > span{
  font-size: 49px;
  border-bottom: solid 2px;
}

/* アニメーション */
.wra3_container.open{
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.box.open{
  display: flex;
  align-items: center;
  justify-content: center;
}  

.wrapper3.open{
  opacity: 1;
  animation-name:fadeInAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
}
.wrapper3 .box img.btn-title {
  width: 50%;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



  /* 3rdーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* 音楽リモコン */
.sound_controller{
  position: fixed !important;
  right: 45px;
  bottom: 28px;
  z-index: 1000;

  display: flex;
  align-items: center;

}


  .wrapper4{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .wrapper4 iframe {
    height: 3350px;
    width: 100%;
  }