@charset "utf-8";

/* ---------------------------------------- header */
body {
  background-color: #46a9ff;
}
header {
  background: url(../img/kv_bg.jpg) no-repeat;
  background-size: cover;
  padding-bottom: 141%;
  height: 0;
  position: relative;
  overflow: hidden;
}
.header_parts {
  background: url(../img/kv_shadow.png) no-repeat;
  background-size: cover;
  padding-bottom: 141%;
  height: 0;
  position: relative;
  z-index: 20;
}
.header_logo { width: 62%; position: absolute; top: 3.1%; left: 18.8%; animation: ani_kv_logo 1.5s ease-in-out 2s forwards;}
  @keyframes ani_kv_logo {
      0% { top: 3.1%;}
    100% { top: 24%; transform: scale(1.14);}
  }
.header_link { position: absolute; top: 76.5%; width: 100%;}
.header_link-btn_play { width: 92%; margin: 0 auto;}
.kv_chara {
  width: 75.6%;
  position: absolute;
  top: 32%;
  left: -60%;
  z-index: 20;
  animation:
    ani_kv_chara_start 1.5s ease-out forwards,
    ani_kv_chara_y 0.5s ease-in-out infinite alternate,
    ani_kv_chara_shake 1.4s ease-in-out infinite alternate,
    ani_kv_chara_goal 1s ease-in 1.8s forwards;
}
  @keyframes ani_kv_chara_start {
      0% { left: -25%;}
    100% { left: 11%;}
  }
  @keyframes ani_kv_chara_y {
      0% { top: 32%;}
    100% { top: 30%;}
  }
  @keyframes ani_kv_chara_shake {
      0% { transform: rotate(0);}
    25% { transform: rotate(1deg);}
    50% { transform: rotate(-1deg);}
    100% { transform: rotate(0);}
  }
  @keyframes ani_kv_chara_goal {
      0% { left: 11%;}
    60% { opacity: 1;}
    100% { left: 100%; opacity: 0;}
  }
.kv_texture {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
  opacity: 0;
  animation: ani_kv_texture 1.5s ease-out 1.8s forwards;
}
  @keyframes ani_kv_texture {
      0% { opacity: 0;}
    100% { opacity: 1;}
  }
.kv_mv {
  width: 100%;
  position: absolute;
  top: 0;
  opacity: 0;
  animation: ani_kv_mv 2.5s ease-out 2.5s forwards;
}
  @keyframes ani_kv_mv {
      0% { opacity: 0;}
    50% { opacity: 1;}
    100% { opacity: 1;}
  }
.kv_mv .video_wrap {
  width: 100%;
  padding-bottom: 130%;
  height: 0;
  position: relative;
  overflow: hidden;
}
.kv_mv video {
  width: 100%;
}

/* ---------------------------------------- parts */
/* btn */
.btn_ani { animation: ani_btn_bounce 5s ease-in-out infinite;}
.btn_ani.delay01 { animation: ani_btn_bounce 5s ease-in-out 1.2s infinite;}
.btn_ani.delay02 { animation: ani_btn_bounce 5s ease-in-out 2.4s infinite;}
  @keyframes ani_btn_bounce {
      0% {transform: translate(0, 0);}
     86% {transform: translate(0, 0);}
     88% {transform: translate(0, -0.5rem);}
     90% {transform: translate(0, 0);}
     91% {transform: translate(0, 0);}
     93% {transform: translate(0, -0.3rem);}
     95% {transform: translate(0, 0);}
    100% {transform: translate(0, 0);}
  }

/* ttl */
.ttl-ani01, .ttl-ani02, .ttl-ani03, .ttl-f_logo { opacity: 0;}
.ttl-ani01.is-show, .ttl-ani02.is-show, .ttl-ani03.is-show, .ttl-f_logo.is-show {
  animation:
    ani_ttl_fade 0.6s ease-in-out forwards,
    ani_ttl_bounce 0.8s ease-in-out forwards;
}
.intro01_tag.is-show {
  animation:
    ani_tag_in 2s ease-out forwards,
    ani_tag_rotate 4s ease-out forwards;
  transform-origin: 0 0;
}
.ttl_pv.is-show { animation: ani_tag_rotate 3s ease-in-out forwards; transform-origin: 0 0;}

/* animation assets */
@keyframes ani_ttl_fade {
  0%   { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes ani_ttl_bounce {
  0%   { transform: scale(1.0, 1.0);}
  50% { transform: scale(1.05, 1.05)}
  100% { transform: scale(1.0, 1.0);}
}
@keyframes ani_tag_in {
  0% {left: -60%;}
  50% {left: 0%;}
 100% {left: 0%;}
}
@keyframes ani_tag_rotate {
  0% { transform: rotate(0);}
  40% { transform: rotate(3deg);}
  60% { transform: rotate(-1deg);}
  80% { transform: rotate(2deg);}
 100% { transform: rotate(0);}
}

/* ---------------------------------------- intro */
/* intro01 */
.intro01 {
  position: relative;
}
.intro01_inner {
  background: url(../img/intro01_bg.png) no-repeat;
  background-size: cover;
  padding-bottom: 170.8%;
  height: 0;
  position: relative;
}
  .intro01_inner h2 { width: 90%; position: absolute; top: -3%; right: 0; bottom: 0; left: 0; margin: auto; z-index: 30;}
  .intro01_tag { width: 51.2%; position: absolute; bottom: 9.8%; left: -60%; margin: auto;}
  .intro01_img { width: 43.6%; position: absolute; right: 0; bottom: -13.5%; margin: auto;}
  .intro01_img.is-show { animation: ani_intro01_move 1s ease-in-out forwards;}
    @keyframes ani_intro01_move {
        0% {  bottom: -13.5%}
      100% {  bottom: -10.4%}
    }
.intro01_mv {
  width: 78.8%;
  position: absolute;
  top: 12.5%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: -10;
}
.intro01_mv .video_wrap {
  width: 100%;
  padding-bottom: 174%;
  height: 0;
  position: relative;
  overflow: hidden;
}
.intro01_mv video {
  width: 100%;
}

/* intro02 */
.intro02 {
  position: relative;
  margin-top: -1px;
}
.intro02_inner {
  background: url(../img/intro02_bg.png) no-repeat;
  background-size: cover;
  padding-bottom: 199.7%;
  height: 0;
  position: relative;
}
  .intro02_inner h2 { width: 92.6%; position: absolute; top: -1.5%; right: 0; bottom: 0; left: 2%; margin: auto; z-index: 30;}
  .intro02_img { width: 45.4%; position: absolute; bottom: -1.5%; left: -30%; opacity: 0; margin: auto;}
  .intro02_img.is-show {
    animation:
      ani_intro02_move 1s ease-in-out forwards,
      ani_intro02_shake 1s ease-in-out 2 forwards;
  }
    @keyframes ani_intro02_move {
        0% {  left: -30%; opacity: 0;}
      100% {  left: -5%; opacity: 1;}
    }
    @keyframes ani_intro02_shake {
        0% { transform: rotate(0);}
       25% { transform: rotate(1deg);}
       50% { transform: rotate(-1deg);}
      100% { transform: rotate(0);}
    }
.intro02_mv01 {
  width: 80%;
  position: absolute;
  top: 17.5%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: -10;
}
.intro02_mv02 {
  width: 80%;
  position: absolute;
  right: 0;
  bottom: 6%;
  left: 0;
  margin: auto;
  z-index: -10;
}
.intro02_mv01 .video_wrap,
.intro02_mv02 .video_wrap {
  width: 100%;
  padding-bottom: 80%;
  height: 0;
  position: relative;
  overflow: hidden;
}
.intro02_mv01 video,
.intro02_mv02 video {
  width: 100%;
}

/* intro03 */
.intro03 {
  background: url(../img/intro03_bg.png) no-repeat;
  background-size: contain;
  padding-bottom: 276%;
  height: 0;
  position: relative;
}
.intro03 h2 { width: 79%; position: absolute; top: -2%; right: 0; bottom: 0; left: 0; margin: auto; z-index: 20;}
.intro03 li { position: absolute;}
.intro03 li:nth-of-type(1) { width: 90%; top: 9.5%; right: 0; bottom: 0; left: 0; margin: auto; z-index: 10;}
.intro03 li:nth-of-type(2) { width: 52.8%; top: 33%; left: 2.6%; z-index: 20;}
.intro03 li:nth-of-type(3) { width: 53.2%; top: 34.5%; right: 1.6%;}
.intro03_img01, .intro03_img02, .intro03_img03 { opacity: 0;}
.intro03_img.is-show .intro03_img01 {
  animation:
    ani_ttl_fade 0.6s ease-in-out 0.5s forwards,
    ani_intro03 0.6s ease-in-out 0.5s forwards;
}
.intro03_img.is-show .intro03_img02 {
  animation:
    ani_ttl_fade 0.6s ease-in-out 0.8s forwards,
    ani_intro03 0.6s ease-in-out 0.8s forwards;
}
.intro03_img.is-show .intro03_img03 {
  animation:
    ani_ttl_fade 0.6s ease-in-out 1.2s forwards,
    ani_intro03 0.6s ease-in-out 1.2s forwards;
}
@keyframes ani_intro03 {
  0% {  transform: translateY(0)}
 100% {  transform: translateY(-5%)}
}

/* ---------------------------------------- pv */
#pv {
  background: url(../img/pv_bg.png) no-repeat;
  background-size: cover;
  padding-bottom: 112%;
  height: 0;
  position: relative;
  margin-top: -112%;
}
.modal-pv_open { display: block; width: 80%; height: 50%; position: absolute; bottom: 39%; left: 10%; margin: auto; z-index: 90; /* background: rgba(0,255,0,.4)*/}
.pv_link-btn_play { position: relative; width: 92%; margin: 3% auto 0; z-index: 90;}
#pv h2 { width: 59%; position: absolute; top: -8%; left: -8%; z-index: 30;}
.pv_chara { width: 41.6%; position: absolute; top: -27.5%; right: 5%; opacity: 0;}
.pv_chara.is-show {
  animation:
    ani_ttl_fade 0.6s ease-in-out 0.5s forwards,
    ani_intro03 0.6s ease-in-out 0.5s forwards;
}
.pv_mv { position: relative; z-index: 10;}
.pv_mv_play { position: relative; width: 91.2%; margin: 0 auto; padding-top: 7.5%; z-index: 20;}
.pv_mv_play img:nth-of-type(1) {
  position: absolute; top: 4%; right: 0; bottom: 0; left: 0; margin: auto;
  width: 25.3%;
  animation: ani_pv_mv_play 3s ease-in-out infinite;
}
@keyframes ani_pv_mv_play {
    0% { transform: scale(1.0, 1.0);}
   10% { transform: scale(1.0, 1.0);}
   20% { transform: scale(1.1, 1.1)}
   30% { transform: scale(1.0, 1.0);}
   40% { transform: scale(1.1, 1.1)}
   50% { transform: scale(1.0, 1.0);}
  100% { transform: scale(1.0, 1.0);}
}
.pv_mv_contents {
  position: absolute;
  width: 80%;
  top: 15.5%; right: 0; bottom: 0; left: 0; margin: auto;
}
.pv_mv_contents .video_wrap {
  width: 100%;
  padding-bottom: 71%;
  height: 0;
  position: relative;
  overflow: hidden;
}
.pv_mv_contents iframe {
  width: 140%;
  height: 140%;
  position: absolute;
  top: -20%;
  left: -20%;
  background: #000;
}
/* modal */
.modal-pv_inner {
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 56.25%;
  overflow: visible;
  margin-top: 30%;
}
.modal-pv_inner iframe {
  position: absolute;
  top: 0;
  left: -5%;
  width: 110% !important;
  height: 110% !important;
}
.modal-pv_close { padding-top: 10%; text-align: center;}
.modal-pv_close img { width: 68%; cursor: pointer;}

/* ---------------------------------------- chara */
#chara {
  background: url(../img/chara_bg.png) no-repeat;
  background-size: cover;
  padding-bottom: 176%;
  height: 0;
  position: relative;
}
#chara h2 { width: 64%; margin: 0 auto; padding: 5.5% 0 0;}

/* slider */
.thumb { width: 98%; margin: 0 auto 3%; padding-left: 1%;}
.thumb li { width: 33% !important; cursor: pointer;}
.thumb li:nth-child(1).slick-current { content: url(../img/chara_nav_frank_on.png); }
.thumb li:nth-child(2).slick-current { content: url(../img/chara_nav_pochi_on.png); }
.thumb li:nth-child(3).slick-current { content: url(../img/chara_nav_charlie_on.png); }
.thumb .slick-track { transform: unset !important; width: 100% !important;}
.gallery { width: 96%; margin: 0 auto;
  background: url(../img/chara_box_bg.png) no-repeat;
  background-size: cover;
}
.prev-arrow, .next-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7.2%;
  margin: auto;
  z-index: 10;
  cursor: pointer;
}
.prev-arrow { left: -1%;}
.next-arrow { right: -1%;}
.next-arrow.slick-disabled,
.prev-arrow.slick-disabled { opacity: 0;}

/* ---------------------------------------- aside */
#sns_info {
  background: url(../img/info_bg.jpg) no-repeat;
  background-size: cover;
  padding-bottom: 102.6%;
  height: 0;
}
#sns_info h3 {
  width: 69.5%;
  margin: 0 auto 0.5%;
  padding-top: 5.5%;
}
#sns_info ul {
  background: url(../img/sns_bg.png) no-repeat;
  background-size: contain;
  width: 76.8%;
  padding-top: 43%;
  margin: 0 auto;
  position: relative;
}
#sns_info li {
  position: absolute;
  width: 26%;
  top: 29%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

/* ---------------------------------------- footer */
footer {
  background: url(../img/footer_bg.png) no-repeat;
  background-size: cover;
  position: relative;
  padding-bottom: 146%;
  height: 0;
  margin-top: -1px;
}
.btn_pagetop {
  width: 48.8%;
  position: absolute;
  top: -1%;
  right: 6%;
  cursor: pointer;
}
.btn_top_parts {
  width: 34%;
  position: absolute;
  bottom: 39%;
  left: 4%;
  z-index: 99;
}
.footer_inner {
  padding-top: 16%;
}
.btn_top_parts.is-move{
  animation: ani_btn_top 4s ease-in-out;
}
@keyframes ani_btn_top {
   0% { transform: scale(1.0, 1.0);}
   6% { transform: scale(1.3, 1.0) translateY(10%);}
   10% { transform: scale(1.3, 1.0) translateY(10%); opacity: 1;}
   11% { transform: scale(1.0, 1.5) translateY(10%); opacity: 1;}
   16% { transform: scale(1.0, 1.5) translateY(-300%); opacity: 1;}
  100% { transform: scale(1.0, 1.0); opacity: 0;}
}

/* spec */
#spec {
  background: url(../img/footer_spec.png) no-repeat;
  background-size: contain;
  position: relative;
  width: 87.2%;
  padding-top: 112%;
  margin: 0 auto;
}
.app_info {
  position: absolute;
  top: 5%;
  overflow: hidden;
}
.app_info li:nth-of-type(1) {
  width: 31.5%;
  float: left;
  margin-left: 6.5%;
}
.app_info li:nth-of-type(2) {
  width: 48%;
  float: right;
  margin-right: 6.5%;
}
.store_link {
  position: absolute;
  top: 32%;
  overflow: hidden;
  width: 100%;
}
.store_link li:nth-of-type(1) {
  width: 38%;
  float: left;
  margin-left: 6.5%;
}
.store_link li:nth-of-type(2) {
  width: 47%;
  float: right;
  margin-right: 6.5%;
}

/* bottom contents */
.corp_link {
  overflow: hidden;
  margin: 0 7%;
}
.corp_link li {
  width: 48%;
}
.corp_link li:nth-of-type(1) {
  float: left;
}
.corp_link li:nth-of-type(2) {
  float: right;
}
footer small {
  background: url(../img/footer_copyright.png) no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
  width: 43%;
  margin: 2.5% auto 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}