@charset "utf-8";

/* teaser */

:root {
  --vw: 1vw;
}

.mainVisual {
  position: relative;
  overflow: hidden;
}
.mv_img {
  position: relative;
  height: 103.3vw;
  background: url(../../teaser2/img/mv_cast_bg_pc.jpg) center top no-repeat;
  background-size: 100%;
  opacity: 0;
}
.mv_maincast {
  position: absolute;
  top: 6.5vw;
  left: 13.75%;
  width: 70%;
  opacity: 0;
}
.mv_logo {
  position: absolute;
  top: 37.75vw;
  /* left: 31.5%; */
  left: 50%;
  /* width: 38%; */
  width: 0;
  transform: translateX(-50%);
  opacity: 0;
}
.mv_catch {
  position: absolute;
  top: 2.5vw;
  left: 46.25%;
  width: 12%;
  opacity: 0;
}
.mv_roadshow {
  position: absolute;
  top: 78.5vw;
  left: 45%;
  width: 10%;
  z-index: 5;
  opacity: 0;
}
.mv_title_potter {
  position: absolute;
  top: 35vw;
  left: 69%;
  width: 12%;
  opacity: 0;
}
.mv_title_antiquedealer {
  position: absolute;
  top: 35vw;
  left: 19%;
  width: 10.75%;
  opacity: 0;
}
.mv_title_waveartist {
  position: absolute;
  top: 26.25vw;
  left: 83.25%;
  width: 10.75%;
  opacity: 0;
}
.mv_cast_tsukaji {
  position: absolute;
  top: 67vw;
  left: 63.25%;
  width: 21%;
  opacity: 0;
}
.mv_cloud {
  position: absolute;
  /* top: 31.5vw; */
  top: 33vw;
  left: -1%;
  width: 102%;
  opacity: 0;
}
.mv_oval {
  position: absolute;
  /* top: 44.5vw; */
  top: 46.5vw;
  left: 3%;
  width: 94%;
  z-index: 2;
  opacity: 0;
}
.mv_ship {
  position: absolute;
  /* bottom: 3vw; */
  bottom: -50vw;
  left: 8%;
  width: 84%;
}
.mv_castle {
  position: absolute;
  /* top: 81.5vw; */
  top: 83vw;
  left: 66.5%;
  width: 19%;
  opacity: 0;
}
.mv_wave {
  position: absolute;
  /* bottom: 0; */
  bottom: -25vw;
  left: 0;
  width: 100%;
  opacity: 0;
}
.mv_lead {
  position: absolute;
  bottom: 1.75vw;
  left: 3%;
  width: 94%;
  opacity: 0;
}

.wave_animation {
  animation-name: anime_waves;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-iteration-count:infinite;
}
@keyframes anime_waves {
  0% {
    bottom: -0.5vw;
  }
  10% {
    bottom: -2vw;
  }
  20% {
    bottom: -2vw
  }
  40% {
    bottom: -0.75vw;
  }
  70% {
    bottom: -0.75vw;
  }
  80% {
    bottom: -1.5vw;
  }
  85% {
    bottom: -1.5vw;
  }
  95% {
    bottom: -0.5vw;
  }
  100% {
    bottom: -0.5vw;
  }
}
.twinkle_animation {
  animation-name: anime_twinkle;
  animation-duration: 6s;
  animation-timing-function: ease;
  animation-iteration-count:infinite;
}
@keyframes anime_twinkle {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  33% {
    opacity: 0.5;
  }
  39% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}


@media screen and (max-width: 768px) {
  .mv_img {
    height: auto;
    background: url(../../teaser2/img/mv_cast_bg_sp.jpg) center top no-repeat;
    background-size: 100%;
  }
  .mv_img::before {
    content:"";
    display: block;
    padding-top: 166%;
  }
  .mv_maincast {
    top: 6.5vw;
    left: 11%;
    width: 73.25%;
  }
  .mv_logo {
    top: 47.75vw;
    /* width: 53%; */
    width: 0;
  }
  .mv_catch {
    top: 2.5vw;
    left: 43%;
    width: 15%;
  }
  .mv_roadshow {
    top: 102vw;
    left: 43%;
    width: 13%;
    z-index: 5;
  }
  .mv_title_potter {
    top: 29vw;
    left: 67.5%;
    width: 12.25%;
  }
  .mv_title_antiquedealer {
    top: 29vw;
    left: 20%;
    width: 11%;
  }
  .mv_title_waveartist {
    top: 28.25vw;
    left: 82%;
    width: 11.75%;
  }
  .mv_cast_tsukaji {
    top: 90vw;
    left: 62.25%;
    width: 20%;
  }
  .mv_cloud {
    /* top: 54vw; */
    top: 56vw;
    left: 0;
    width: 100%;
  }
  .mv_oval {
    /* top: 65vw; */
    top: 68vw;
    left: 1.5%;
    width: 98%;
  }
  .mv_ship {
    /* bottom: 41.5vw; */
    bottom: -40vw;
    left: -2%;
    width: 103%;
  }
  .mv_castle {
    top: 105.5vw;
    left: 61%;
    width: 24%;
  }
  .mv_wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .mv_lead {
    bottom: 4.25vw;
    left: 5%;
    width: 90%;
  }
}

.menu {
  background: url(../../teaser2/img/bg_gold.jpg) center no-repeat;
  background-size: cover;
}
.menu_inner {
  padding: 42px 3% 32px;
}
.menu_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.menu_item {
  width: 235px;
  margin: 4px 5px 0;
  transition: .2s;
}
.menu_item_large {
  width: 490px;
  margin: 0 139px;
}
.menu_item:hover {
  transform: scale(1.05);
}
.sns_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sns_item {
  width: 55px;
  height: 55px;
  margin: 20px 10px 0;
  transition: .25s;
}
.sns_item_tw {
  background: url(../img/top/icon_twitter.svg) center no-repeat;
  background-size: 100%;
}
.sns_item:hover {
  transform: scale(1.075);
}

@media screen and (max-width: 1020px) {
  .menu_wrap {
    max-width: 420px;
  }
  .menu_inner {
    padding: 30px 3% 24px;
  }
  .menu_item {
    width: 48%;
    margin: 1% 1% 0
  }
  .menu_item_large {
    width: 410px;
    margin: 0 1%;
  }
}

.banner {
  padding: 40px 5%;
  border-top: 5px solid #BE1C2D;
  border-bottom: 5px solid #BE1C2D;
  background: url(../img/top/banner_bg_ptn.png) center top;
}
.banner_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.banner_wrap_item {
  width: 235px;
  transition: .25s;
}
.banner_wrap_item:hover {
  transform: scale(1.1);
}

@media screen and (max-width: 768px) {
  .banner {
    padding: 30px 10%;
  }
  .banner_wrap_item {
    width: auto;
    max-width: 360px;
  }
}

.content {
  padding: 45px 3% 32px; 
  background: url(../../teaser2/img/content_bg_pc.jpg) center no-repeat;
  background-size: cover;
}
.banner_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 90%;
  max-width: 820px;
  margin: 0 auto 20px;
}
.banner_item {
  display: block;
  width: 48%;
  max-width: 440px;
  margin: 1%;
  transition: .25s;
}
.banner_item:hover {
  transform: scale(1.025);
}
.ver_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  max-width: 820px;
  margin: 0 auto;
}
.ver_menu_item {
  display: block;
  width: 48%;
  max-width: 400px;
  transition: .25s;
}
.ver_menu_item:hover {
  transform: rotate(5deg) scale(1.025);
}

.billing {
  width: 96%;
  max-width: 673px;
  margin: 40px auto 0;
}

@media screen and (max-width: 768px) {
  .content {
    padding: 30px 3% 20px; 
    background: url(../../teaser2/img/content_bg_sp.jpg) center no-repeat;
    background-size: cover;
  }

  .banner_area {
    display: block;
  }
  .banner_item {
    width: 80%;
    max-width: 345px;
    margin: 0 auto 1%;
  }
  .ver_menu {
    display: block;
  }
  .ver_menu_item {
    width: 90%;
    max-width: 345px;
    margin: 0 auto 1%;
  }
  .billing {
    margin: 30px auto 0;
  }
}

.bottom {
  padding: 20px 3% 17px; 
  background: url(../../teaser2/img/bg_gold.jpg) center no-repeat;
  background-size: cover;
}
.bottom_roadshow {
  width: 96%;
  max-width: 264px;
  margin: 0 auto;
}

.bf_area {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0 0 50px;
}
.bf_item {
  width: auto;
  height: 40px;
  margin: 0 5px;
}
.bf_item img {
  width: auto;
  height: 100%;
}