@charset "UTF-8";
@-webkit-keyframes horizontal1 {
  0% {
    -webkit-transform: translateX(-5px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}
@keyframes horizontal1 {
  0% {
    -webkit-transform: translateX(-5px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}
@-webkit-keyframes horizontal2 {
  0% {
    -webkit-transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}
@keyframes horizontal2 {
  0% {
    -webkit-transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}
@-webkit-keyframes vertical {
  0% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
  }
}
@keyframes vertical {
  0% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
  }
}
@-webkit-keyframes jump {
  0% {
    -webkit-transform: translate(0%, 80px) rotateX(30deg);
            transform: translate(0%, 80px) rotateX(30deg);
  }
  100% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    background-size: 0 0, contain;
  }
}
@keyframes jump {
  0% {
    -webkit-transform: translate(0%, 80px) rotateX(30deg);
            transform: translate(0%, 80px) rotateX(30deg);
  }
  100% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
    background-size: 0 0, contain;
  }
}
@-webkit-keyframes mabataki {
  0% {
    background-size: 0 0, contain;
  }
  95% {
    background-size: contain, 0 0;
  }
  100% {
    background-size: 0 0, contain;
  }
}
@keyframes mabataki {
  0% {
    background-size: 0 0, contain;
  }
  95% {
    background-size: contain, 0 0;
  }
  100% {
    background-size: 0 0, contain;
  }
}
@-webkit-keyframes nav {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes nav {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* CSS INFORMATION -====================================================
File name : top.css
Description :
===================================================================== */
/* =====================================================================
*    parallax
* =================================================================== */
#parallax01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 115.4rem;
  background: url(../images/common/img_view.png) no-repeat top center/cover;
}
@media screen and (min-width: 768px) {
  #parallax01 {
    height: 115.3rem;
    background-image: url(../images/common/img_view_02.png);
  }
}
#parallax01.fixed {
  position: fixed;
}

.top_wrap {
  padding-bottom: 50rem;
  background: url(../images/top/bg_view02-sp.png) no-repeat bottom center/100% auto;
}
@media screen and (min-width: 768px) {
  .top_wrap {
    padding-bottom: calc(400 / 1400 * 100vw);
    background-image: url(../images/top/bg_view02-pc.png);
  }
}

.chara {
  width: 13.4rem;
  background: url(../images/common/img_pimpam01.png), url(../images/common/img_pimpam02.png);
  background-size: contain, 0 0;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 25rem;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-name: jump;
          animation-name: jump;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  z-index: 100;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .chara {
    margin-bottom: 18rem;
  }
}
.chara:before {
  content: "";
  display: block;
  padding-bottom: 156%;
}

/* =====================================================================
*    mv
* =================================================================== */
.mv {
  position: relative;
}
.mv > .inner {
  position: relative;
  width: 100%;
  padding-top: calc(464 / 750 * 100%);
  z-index: initial;
}
.mv .btn_corner,
.mv .btn_about {
  position: relative;
  z-index: 10;
  width: calc(290 / 750 * 100%);
  max-width: 290px;
}
.mv .btn_corner a,
.mv .btn_about a {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-animation: vertical 1s ease-in-out infinite alternate;
          animation: vertical 1s ease-in-out infinite alternate;
}
.mv .btn_corner a:before,
.mv .btn_about a:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.mv .btn_about {
  margin: calc(52 / 750 * 100%) 0 0 calc(55 / 750 * 100%);
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
          animation: horizontal1 1s ease-in-out infinite alternate;
}
.mv .btn_about a {
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
  background: url(../images/top/btn_about.png) no-repeat top center/contain;
}
.mv .btn_about a:hover {
  background: url(../images/top/btn_about_h.png) no-repeat top center/contain;
}
.mv .btn_corner {
  margin: calc(-260 / 750 * 100%) 0 0 calc(415 / 750 * 100%);
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
          animation: horizontal2 1s ease-in-out infinite alternate;
}
.mv .btn_corner a {
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  background: url(../images/top/btn_corner.png) no-repeat top center/contain;
}
.mv .btn_corner a:hover {
  background: url(../images/top/btn_corner_h.png) no-repeat top center/contain;
}
.mv_character {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(-64 / 750 * 100%) 0 0 calc(10 / 750 * 100%);
  width: calc(580 / 750 * 100%);
}
.mv_ttl {
  position: relative;
  margin: 0 auto;
  width: calc(519 / 750 * 100%);
  -webkit-filter: drop-shadow(0 2.4rem 2.4rem rgba(0, 0, 0, 0.1));
          filter: drop-shadow(0 2.4rem 2.4rem rgba(0, 0, 0, 0.1));
  z-index: 3;
}
.mv_cloud {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: white;
  width: 100%;
  padding-bottom: calc(650 / 750 * 100%);
}
.mv_cloud:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: calc(100 / 750 * 100%);
  background: url(../images/common/bg_cloud_top.svg) no-repeat top center/cover;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: calc(-100 / 750 * 100%);
}
.mv_date {
  position: relative;
  margin: calc(29 / 750 * 100%) auto 0;
  width: calc(609 / 750 * 100%);
  z-index: 3;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .mv > .inner {
    padding: 5.6rem 0 8rem;
    max-width: 1560px;
  }
  .mv .btn_corner,
  .mv .btn_about {
    position: absolute;
    top: 0;
    left: 0;
    width: 18.5897435897%;
  }
  .mv .btn_about {
    margin: 3.5256410256% 0 0 0.2564102564%;
  }
  .mv .btn_corner {
    margin: 8.0128205128% 0 0 82.0512820513%;
  }
  .mv_character {
    margin: -4.1025641026% 0 0 45.641025641%;
    width: 37.1794871795%;
  }
  .mv_ttl {
    margin-left: 17.0512820513%;
    width: 33.8461538462%;
  }
  .mv_cloud {
    padding-bottom: 2rem;
  }
  .mv_cloud:before {
    padding-top: 10rem;
    margin-top: -10rem;
  }
  .mv_date {
    margin: 0.2564102564% 0 0 17.9487179487%;
    width: 35.0641025641%;
  }
}
/* =====================================================================
*    movie
* =================================================================== */
.movie {
  padding-top: 8rem;
}
.movie h2 {
  color: #f28f68;
}
@media screen and (min-width: 768px) {
  .movie h2 .icon {
    left: 3.5em;
  }
}
.movie .youtube {
  position: relative;
  width: calc(640 / 690 * 100%);
  max-width: 880px;
  overflow: hidden;
  margin: 0 auto 3em;
  border-radius: 6rem;
  overflow: hidden;
  border: 6px solid #f28f68;
}
.movie .youtube_inner {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.movie .youtube_inner iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 768px) {
  .movie .youtube {
    width: calc(880 / 1024 * 100%);
    border-width: 8px;
  }
}
/* =====================================================================
*    twitter
* =================================================================== */
.twitter .inner {
  position: relative;
  padding-top: 12rem;
}
@media screen and (min-width: 768px) {
  .twitter .inner {
    padding-top: calc(240 / 1400 * 100vw);
  }
}
.twitter [class^=cloud],
.twitter [class^=ship],
.twitter [class^=kamome] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.twitter [class^=cloud] span,
.twitter [class^=ship] span,
.twitter [class^=kamome] span {
  display: block;
}
.twitter [class^=cloud] {
  -webkit-animation: horizontal1 2s ease-in-out infinite alternate;
          animation: horizontal1 2s ease-in-out infinite alternate;
}
.twitter [class^=cloud] span {
  -webkit-animation: vertical 2s ease-in-out infinite alternate;
          animation: vertical 2s ease-in-out infinite alternate;
}
.twitter .cloud01 {
  width: 12.7rem;
  margin: 17rem 0 0 -9rem;
}
@media screen and (min-width: 768px) {
  .twitter .cloud01 {
    margin: 15.4rem 0 0 21.8rem;
  }
}
.twitter .cloud02 {
  width: 20.4rem;
  margin: 34.7rem 0 0 60.2rem;
  -webkit-animation-name: horizontal2;
          animation-name: horizontal2;
}
@media screen and (min-width: 768px) {
  .twitter .cloud02 {
    margin: 22.7272727273% 0 0 59.7727272727%;
  }
}
.twitter .cloud02 span {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}
.twitter [class^=kamome] {
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
          animation: horizontal1 1s ease-in-out infinite alternate;
}
.twitter [class^=kamome] span {
  -webkit-animation: vertical 1.2s ease-in-out infinite alternate;
          animation: vertical 1.2s ease-in-out infinite alternate;
}
.twitter .kamome01 {
  width: 9.1rem;
  margin: 10.5rem 0 0 58rem;
}
@media screen and (min-width: 768px) {
  .twitter .kamome01 {
    margin: 21.4rem 0 0;
  }
  .twitter .kamome01 img {
    -webkit-transform: scale(-1, 1);
            transform: scale(-1, 1);
  }
}
.twitter .kamome02 {
  width: 10.2rem;
  margin: 29.6rem 0 0 105rem;
}
.twitter .kamome02 span {
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
}
.twitter .kamome03 {
  width: 8.5rem;
  margin: 35.8rem 0 0 111rem;
}
.twitter [class^=ship] {
  -webkit-animation: horizontal1 1.8s ease-in-out infinite alternate;
          animation: horizontal1 1.8s ease-in-out infinite alternate;
}
.twitter [class^=ship] span {
  -webkit-animation: vertical 1.8s ease-in-out infinite alternate;
          animation: vertical 1.8s ease-in-out infinite alternate;
}
.twitter .ship02 {
  width: 20.7rem;
  margin: 48.7rem 0 0 -10rem;
}
.twitter h2 {
  color: #65a7af;
}
.twitter h2 .icon {
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
  .twitter h2 .icon {
    left: auto;
    right: 3.5em;
  }
}

.sns_list {
  margin: 0 auto;
  width: calc(640 / 690 * 100%);
}
@media screen and (min-width: 768px) {
  .sns_list {
    width: calc(500 / 1024 * 100%);
  }
}
.sns_list li {
  font-size: 3.6rem;
}
@media screen and (min-width: 768px) {
  .sns_list li {
    font-size: 2.6rem;
  }
}
.sns_list li:not(:last-child) {
  margin-bottom: 1em;
}
.sns_list li a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.85em 2em;
  letter-spacing: 0.1em;
  background-color: white;
  color: #f28f68;
  border: 0.8rem solid;
  border-radius: 0.8em;
}
@media screen and (min-width: 768px) {
  .sns_list li a {
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
  }
  .sns_list li a:hover {
    background-color: #ffe5d9;
  }
}
.sns_list li a svg {
  margin-right: 1em;
  width: 1.5em;
  height: 1.5em;
  fill: #f28f68;
}

/* =====================================================================
*    bnr_area
* =================================================================== */
.bnr_area {
  background: white;
  padding: 0 0 12rem;
}
@media screen and (min-width: 768px) {
  .bnr_area {
    padding: 12rem 0;
  }
}
.bnr_area h2 {
  color: #65af68;
}
@media screen and (min-width: 768px) {
  .bnr_area h2 .icon {
    bottom: -4em;
  }
}
.bnr_area ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.bnr_area ul li {
  margin: 0 1rem;
  width: 4.166em;
  border: 0.8rem solid #65af68;
  border-radius: 4rem;
  font-size: 4.8rem;
}
.bnr_area ul li a {
  display: block;
  position: relative;
}
.bnr_area ul li a::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #65af68 url(../images/common/icon_arrow.svg) no-repeat center center/40% 40%;
  position: absolute;
  bottom: -0.6em;
  left: 0;
  right: 0;
  margin: 0 auto;
  -webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .bnr_area ul li a:hover::before {
    -webkit-transform: translateY(-0.2em);
            transform: translateY(-0.2em);
  }
}

/* =====================================================================
*    シノビー年末プレゼントバナー
* =================================================================== */
.present_bnr {
  position: relative;
  padding-top: 4rem;
  background-color: white;
  z-index: 1;
}
.present_bnr_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.present_bnr_item li {
  margin-bottom: 2em;
  width: calc(640 / 690 * 100%);
}

@media screen and (min-width: 768px) {
  .present_bnr_item {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .present_bnr_item li {
    width: calc(450 / 1024 * 100%);
  }
  .present_bnr_item li a {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }
  .present_bnr_item li a:hover {
    opacity: 0.7;
  }
}/*# sourceMappingURL=top.css.map */