@charset "UTF-8";

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q,
blockquote {
  quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

@charset "UTF-8";

body {
  font-family: "Helvetica Neue", Helvetica, Arial, "\30D2\30E9\30AE\30CE\89D2\30B4   ProN W3", "Hiragino Kaku Gothic ProN", "\30E1\30A4\30EA\30AA", Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
  background: #000;
}

main {
  display: block;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

iframe[name="google_conversion_frame"] {
  position: absolute;
  height: 0;
  width: 0;
}

.disp-none {
  display: none;
}

.container {
  position: relative;
  z-index: 100;
  overflow: hidden;
}

a {
  display: inline-block;
}

#loading {
  background: url(../../resources/img/common/loading_bg_16573a18ab9db8d202adf0f8dc272ea5.png) repeat #3a5986;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  -webkit-animation: loadingBgAnim 3s infinite linear;
          animation: loadingBgAnim 3s infinite linear;
}

#loading .loading-img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-animation: blink05 1.2s infinite linear;
            animation: blink05 1.2s infinite linear;
  }

#loading.end {
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }

@-webkit-keyframes blink05 {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes blink05 {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes bgpt {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -495px 0;
  }
}

@keyframes bgpt {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -495px 0;
  }
}

@-webkit-keyframes bgpt2 {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -492px 0;
  }
}

@keyframes bgpt2 {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -492px 0;
  }
}

@-webkit-keyframes loadingBgAnim {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -119px 0;
  }
}

@keyframes loadingBgAnim {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -119px 0;
  }
}

.wrapper {
  width: 1024px;
  margin: auto;
  position: relative;
}

section {
  position: relative;
}

header {
  background: url(../../resources/img/common/header_bg_83d6055a700cce488cc9bb139e97a024.png) repeat-x;
  width: 100%;
  height: 104px;
  position: absolute;
  z-index: 100;
}

header.top > .wrapper {
      width: 1280px;
    }

.fix-nav {
  opacity: 0;
  background: url(../../resources/img/common/header_bg_83d6055a700cce488cc9bb139e97a024.png) repeat-x;
  width: 100%;
  height: 104px;
  position: fixed;
  z-index: 100;
  top: -110px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.fix-nav.show {
    opacity: 1;
    top: 0;
  }

.nav-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.nav-box .game-freak {
    background: url(../../resources/img/common/game_freak_28b74e9f6410f999186e7e44cff64082.png) no-repeat;
    width: 347px;
    height: 37px;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;

    margin: 29px 0 0 128px;
  }

.nav-box .game-freak:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.nav-box .title-logo {
    background: url(../../resources/img/common/title_logo_a1077e9207ef131d0e4fc1a1bfca88cd.png) no-repeat;
    width: 169px;
    height: 79px;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;

    margin: 7px -95px 0 0;
  }

.nav-box .title-logo:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.nav-box .nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 10px 10px 0 87px;
  }

.nav-box .nav li {
      margin-right: 2px;
    }

.nav-box .nav li a {
        position: relative;

        -webkit-transition: -webkit-transform 0.3s;

        transition: -webkit-transform 0.3s;

        transition: transform 0.3s;

        transition: transform 0.3s, -webkit-transform 0.3s;
      }

.nav-box .nav li a:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.nav-box .nav li.new a:before {
            content: url(../../resources/img/common/new_a053edcea9b1da809aa3e68f83d33bd7.png);
            position: absolute;
            top: 5px;
            left: 60px;
            z-index: 10;
          }

.nav-box .nav li:nth-child(1) a {
          background: url(../../resources/img/common/nav_character_7d93169366858f8e77c631dd5f81fdd5.png) no-repeat;
          width: 166px;
          height: 76px;
        }

.nav-box .nav li:nth-child(2) a {
          background: url(../../resources/img/common/nav_battle_f6d55de2629dcfce53a8100c6b544b34.png) no-repeat;
          width: 167px;
          height: 76px;
        }

.nav-box .nav li:nth-child(3) a {
          background: url(../../resources/img/common/nav_special_21ab4b8dc862c48ed409ad81c36dbbf4.png) no-repeat;
          width: 167px;
          height: 76px;
        }

.nav-box .nav li:nth-child(4) {
        margin: 0;
      }

.nav-box .nav li:nth-child(4) a {
          background: url(../../resources/img/common/nav_pre_order_btn_924238215cff7c5651393ac5053d3a16.png) no-repeat;
          width: 258px;
          height: 69px;
        }

.nav-box .language {
    margin: 9px 15px 0 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

.nav-box .language .flag {
      background: url(../../resources/img/common/flag_japan_d9c5840daaa23a145aec351c0dc73f72.png) no-repeat;
      width: 42px;
      height: 28px;

      display: block;
      margin: 8px 0 10px 16px;
    }

.nav-box .language .current-language {
      background: #000;
      color: #fff;
      font-size: 13px;
      text-decoration: none;
      width: 74px;
      height: 24px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      padding: 5px 10px 0 0;
      text-align: right;
      position: relative;
    }

.nav-box .language .current-language:before {
        content: '';
        background: url(../../resources/img/common/triangle_47a25294a035ae3302f2406cad9395a1.png) no-repeat;
        width: 9px;
        height: 8px;
        position: absolute;
        top: 9px;
        left: 7px;
      }

.nav-box .language .language-list {
      background: #000;
      width: 74px;
      -webkit-transform: scale(1, 0);
              transform: scale(1, 0);
      -webkit-transform-origin: top center;
              transform-origin: top center;
      -webkit-transition: 0.1s ease-out;
      transition: 0.1s ease-out;
      position: absolute;
    }

.nav-box .language .language-list ul {
        padding: 20px 0 40px;
        text-align: center;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
      }

.nav-box .language .language-list ul li a {
            color: #fff;
            font-size: 13px;
          }

.nav-box .language.open .current-language:before {
          -webkit-transform: rotate(-180deg);
                  transform: rotate(-180deg);
        }

.nav-box .language.open .language-list {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
      }

.nav-box.en .nav li:nth-child(1) a {
            background: url(../../resources/img/en_common/nav_character_8b2bad08a02c5f1f2dbc1bf29ba17d95.png) no-repeat;
            width: 166px;
            height: 76px;
          }

.nav-box.en .nav li:nth-child(2) a {
            background: url(../../resources/img/en_common/nav_battle_209745408690f349c23a8384bbd8dbba.png) no-repeat;
            width: 167px;
            height: 76px;
          }

.nav-box.en .nav li:nth-child(3) a {
            background: url(../../resources/img/en_common/nav_special_a85f1171b1e9955a2d8065e31da724a7.png) no-repeat;
            width: 167px;
            height: 76px;
          }

.nav-box.en .nav li:nth-child(4) {
          margin: 0;
        }

.nav-box.en .nav li:nth-child(4) a {
            background: url(../../resources/img/en_common/nav_pre_order_btn_62490593603dc8ccc52163d3088b024c.png) no-repeat;
            width: 259px;
            height: 70px;
          }

.nav-box.en .flag {
      background: url(../../resources/img/common/flag_usa_ad11ee4e5f1d524f5b4e8c0d3787823d.png) no-repeat;
      width: 42px;
      height: 28px;
    }

.to-top-btn {
  background: url(../../resources/img/common/to_top_btn_4900e7385415d43f06cb02aabcc85e98.png) no-repeat;
  width: 134px;
  height: 103px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;

  opacity: 0;
  position: fixed;
  bottom: 93px;
  right: 10px;
  z-index: 99;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.to-top-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.to-top-btn.show {
    opacity: 1;
    pointer-events: auto;
  }

.pre-order-modal {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 1001;
}

.pre-order-modal .modal-dialog {
    background: url(../../resources/img/top/modal_bg_1cde10c45ce4d710e07a6d289c127332.png) no-repeat;
    width: 600px;
    height: 454px;

    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }

.pre-order-modal .modal-dialog .modal-close-btn {
      position: absolute;
      top: -45px;
      right: 30px;
    }

.pre-order-modal .modal-dialog .modal-close-btn:after {
        content: "\D7";
        color: #fff;
        font-size: 35px;
        position: absolute;
        z-index: 2;
      }

.pre-order-modal .modal-dialog .modal-contents .dl-contents {
        text-align: center;
        padding-top: 28px;
      }

.pre-order-modal .modal-dialog .modal-contents .dl-contents .dl-title {
          margin-bottom: 13px;
        }

.pre-order-modal .modal-dialog .modal-contents .dl-contents .btn-box {
          width: 300px;
          margin: 0 auto;
        }

.pre-order-modal .modal-dialog .modal-contents .dl-contents .btn-box .ns-btn {
            background: url(../../resources/img/top/modal_ns_btn_36d8d0bb90d7127075e558eff344f470.png) no-repeat;
            width: 145px;
            height: 73px;
            -webkit-transition: -webkit-transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;

            margin-bottom: 7px;
          }

.pre-order-modal .modal-dialog .modal-contents .dl-contents .btn-box .ns-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.pre-order-modal .modal-dialog .modal-contents .dl-contents .btn-box .ps4-btn {
            background: url(../../resources/img/top/modal_ps4_btn_ec4649b9e58fd23350ddb80836d77cc0.png) no-repeat;
            width: 145px;
            height: 73px;
            -webkit-transition: -webkit-transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;

            margin-bottom: 7px;
          }

.pre-order-modal .modal-dialog .modal-contents .dl-contents .btn-box .ps4-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.pre-order-modal .modal-dialog .modal-contents .dl-contents .btn-box .xbox-one-btn {
            background: url(../../resources/img/top/modal_xbox_one_btn_31c320dacfca1824c04862ddd5df12b6.png) no-repeat;
            width: 145px;
            height: 73px;
            -webkit-transition: -webkit-transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
          }

.pre-order-modal .modal-dialog .modal-contents .dl-contents .btn-box .xbox-one-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.pre-order-modal .modal-dialog .modal-contents .dl-contents .btn-box .steam-btn {
            background: url(../../resources/img/top/modal_steam_btn_979cd39ab6c98ae64c254bc6f4b2e8a2.png) no-repeat;
            width: 145px;
            height: 73px;
            -webkit-transition: -webkit-transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
          }

.pre-order-modal .modal-dialog .modal-contents .dl-contents .btn-box .steam-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.pre-order-modal .modal-dialog .modal-contents .package-contents {
        text-align: center;
        padding-top: 17px;
      }

.pre-order-modal .modal-dialog .modal-contents .package-contents .package-title {
          margin-bottom: 10px;
        }

.pre-order-modal .modal-dialog .modal-contents .package-contents .package-txt {
          margin-bottom: 10px;
        }

.pre-order-modal .modal-dialog .modal-contents .package-contents .ns-ps4-btn {
          background: url(../../resources/img/top/modal_ns_ps4_btn_0bd0afe2148a2ee3844f6e76ad29a551.png) no-repeat;
          width: 294px;
          height: 72px;
          -webkit-transition: -webkit-transform 0.3s;
          transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
          transition: transform 0.3s, -webkit-transform 0.3s;
        }

.pre-order-modal .modal-dialog .modal-contents .package-contents .ns-ps4-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.pre-order-modal .modal-overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    overflow: auto;
    outline: 0;
    top: 0;
  }

.footer-logo-box {
  width: 100%;
  background: #3c5c8c;
  padding: 20px 0;
}

.footer-logo-box .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

.footer-logo-box .nis-official {
    background: url(../../resources/img/en_common/logo_nis_1f8d928c3a96baf584c55f6cf9a3be28.png) no-repeat;
    width: 118px;
    height: 50px;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;

    margin-right: 53px;
  }

.footer-logo-box .nis-official:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.footer-logo-box .rf-official {
    background: url(../../resources/img/common/footer_logo_073cea95ddecad95c151e90da7f12243.png) no-repeat;
    width: 181px;
    height: 49px;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;

    margin-right: 30px;
  }

.footer-logo-box .rf-official:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.footer-logo-box .rf-official2 {
    background: url(../../resources/img/common/game_freak_28b74e9f6410f999186e7e44cff64082.png) no-repeat;
    width: 348px;
    height: 36px;
    background-size: contain;

    -webkit-transition: -webkit-transform 0.3s;

    transition: -webkit-transform 0.3s;

    transition: transform 0.3s;

    transition: transform 0.3s, -webkit-transform 0.3s;
  }

.footer-logo-box .rf-official2:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

footer {
  width: 100%;
  background: url(../../resources/img/common/footer_bg_934ba678b4c13b23dfe0aa376d9ec7cd.png) repeat-x;
  height: 80px;
  position: relative;
}

footer .wrapper {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

footer .support-btn {
    background: url(../../resources/img/common/support_btn_d0855dc36468f8f6754df89203c8e72b.png) no-repeat;
    width: 216px;
    height: 64px;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }

footer .support-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

footer .support-btn.en {
      background: url(../../resources/img/en_common/support_btn_128c3c8bd7082d4057f92ef0e82eedf7.png) no-repeat;
      width: 216px;
      height: 64px;
    }

footer p {
    color: #fff;
    font-size: 18px;
  }

.bg {
  background: url(../../resources/img/top/bg_9961210310a8c42109d31fbf329bfe13.jpg) center top no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
  position: fixed;
}

.fv {
  height: 1183px;
}

.fv .fv-chara1,
  .fv .fv-monster,
  .fv .fv-hero,
  .fv .fv-weapon,
  .fv .fv-gradation {
    position: absolute;
  }

.fv .fv-chara1 {
    top: 304px;
    left: -201px;
  }

.fv .fv-monster {
    top: 220px;
    left: 57px;
  }

.fv .fv-hero {
    top: 10px;
    left: -276px;
  }

.fv .fv-weapon {
    top: 53px;
    left: 871px;
  }

.fv .fv-gradation {
    top: 1068px;
    left: -446px;
  }

.fv .contents {
    position: relative;
  }

.fv .contents .fv-switch {
      position: absolute;
      top: 106px;
      left: 0;
    }

.fv .contents .fv-ps4 {
      position: absolute;
      top: 120px;
      left: 53px;
    }

.fv .contents .fv-xbox-one {
      position: absolute;
      top: 118px;
      left: 150px;
    }

.fv .contents .fv-steam {
      position: absolute;
      top: 115px;
      left: 273px;
    }

.fv .contents .catch-copy {
      padding: 118px 0 0 404px;
    }

.fv .contents h1 {
      margin: -11px 0 0 482px;
    }

.fv .contents .release-date {
      margin: 7px 0 0 564px;
      position: relative;
      z-index: 2;
    }

.fv .contents .pre-order-btn {
      background: url(../../resources/img/top/fv_pre_order_btn_4aa52468d19b888ce8206d401b1cf9e6.png) no-repeat;
      width: 429px;
      height: 129px;
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;

      margin: -22px 0 0 528px;
    }

.fv .contents .pre-order-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.fv .contents .bottom-contents {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      margin-top: -30px;
    }

.fv .contents .movie-box {
      background: url(../../resources/img/top/fv_movie_bg_26f718444ea868028768964828677252.png) no-repeat;
      width: 588px;
      height: 457px;

      margin: 0 18px 0 -84px;
    }

.fv .contents .movie-box .movie {
        width: 411px;
        height: 233px;
        background: #000;
        border: 2px solid #fff;
        display: block;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        position: relative;
        margin: 185px 0 0 138px;

        -webkit-transition: -webkit-transform 0.3s;

        transition: -webkit-transform 0.3s;

        transition: transform 0.3s;

        transition: transform 0.3s, -webkit-transform 0.3s;
      }

.fv .contents .movie-box .movie:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.fv .contents .movie-box .movie:before {
          background: url(../../resources/img/top/fv_movie_cbcb205a05034e5b40681b8269e4da0f.png) no-repeat;
          width: 85px;
          height: 86px;

          content: "";
          position: absolute;
          margin: auto;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }

.fv .contents .movie-box .movie:after {
          background: url(../../resources/img/top/fv_movie_title_cd8129217c90eac7b4b76cf4598e8539.png) no-repeat;
          width: 230px;
          height: 63px;

          content: "";
          position: absolute;
          bottom: -32px;
          left: 88px;
        }

.fv .contents .movie-box .movie #fv-movie {
          width: 407px;
          height: 229px;
          pointer-events: none;
        }

.fv .contents .news-box {
      background: url(../../resources/img/top/news_bg_629fcc3c2de95842193e82e4f387d97e.png) no-repeat;
      width: 484px;
      height: 319px;

      position: relative;
    }

.fv .contents .news-box .news-title {
        position: absolute;
        top: -88px;
        left: -20px;
      }

.fv .contents .news-box .official-twitter-btn {
        background: url(../../resources/img/top/fv_fwitter_btn_c41f1181ea05f44932ec85667d5fb4e6.png) no-repeat;
        width: 226px;
        height: 71px;
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;

        position: absolute;
        top: -32px;
        left: 230px;
      }

.fv .contents .news-box .official-twitter-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.fv .contents .news-box ul {
        width: 400px;
        height: 230px;
        overflow-y: scroll;
        margin: 49px 0 0 40px;
      }

.fv .contents .news-box ul li {
          border-bottom: 2px solid #000;
          padding: 12px 0;
        }

.fv .contents .news-box ul li:first-child {
            border-top: 2px solid #000;
          }

.fv .contents .news-box ul li a {
            text-decoration: none;
            font-size: 18px;
            line-height: 1.4;
          }

.fv .contents .news-box ul li a.close {
              pointer-events: none;
            }

.fv .contents .news-box ul li .date {
            color: #000;
            display: block;
          }

.fv .contents .news-box ul li .title {
            color: #fff;
            display: block;
          }

.fv .contents .bnr-mode {
      background: url(../../resources/img/top/bnr_easy_aff70a06a6d949e0582a24efb75db304.png) no-repeat;
      width: 501px;
      height: 174px;
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;

      position: absolute;
      top: 518px;
      left: -7px;
    }

.fv .contents .bnr-mode:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.v2 {
  width: 100%;
  height: 517px;
}

.v2 .v2-bg {
    width: 100%;
    background: url(../../resources/img/top/v2_bg_e5847dd501eacc568554ab242673afd4.png) repeat-x;
    height: 517px;
    position: absolute;
    -webkit-animation: bgpt 20s infinite linear;
            animation: bgpt 20s infinite linear;
  }

.v2 h2 {
    position: absolute;
    top: -78px;
    left: -17px;
  }

.v2 .catch-copy {
    margin: 15px 0 0 279px;
    position: relative;
    display: inline-block;
  }

.v2 .contents {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 17px;
  }

.v2 .contents .director {
      margin: 0 33px 0 10px;
    }

.v3 {
  height: 1351px;
  margin-top: 105px;
}

.v3 .v3-bg {
    background: url(../../resources/img/top/v3_bg_ea1838111277f3dc961c930aea71c54b.png) no-repeat;
    width: 943px;
    height: 1351px;

    position: absolute;
    top: 0;
    left: 40px;
  }

.v3 .v3-stone,
  .v3 .v3-chara1,
  .v3 .v3-chara2,
  .v3 .v3-monster1,
  .v3 .v3-monster2,
  .v3 .v3-chara3 {
    position: absolute;
  }

.v3 .v3-stone {
    top: -145px;
    left: 343px;
  }

.v3 .v3-chara1 {
    top: -79px;
    left: 507px;
  }

.v3 .v3-chara2 {
    top: 218px;
    left: 667px;
  }

.v3 .v3-monster1 {
    top: 114px;
    left: -145px;
  }

.v3 .v3-monster2 {
    top: 413px;
    left: -240px;
  }

.v3 .v3-chara3 {
    top: 963px;
    left: 730px;
  }

.v3 .contents {
    position: relative;
  }

.v3 .contents h2 {
      position: absolute;
      top: -95px;
      left: -44px;
    }

.v3 .contents .catch-copy {
      padding: 55px 0 0 153px;
    }

.v3 .contents .txt {
      margin: 11px 0 0 117px;
    }

.v3 .contents .ss1 {
      background: url(../../resources/img/top/v3_ss_thumb1_1c4f1f105108e343a342decc210d7ac6.png) no-repeat;
      width: 439px;
      height: 265px;
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;

      display: block;
      margin: 10px 0 0 508px;
    }

.v3 .contents .ss1:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.v3 .contents .ss2 {
      background: url(../../resources/img/top/v3_ss_thumb2_4e7fbc230ba711d9fbbf3dcab3b88257.png) no-repeat;
      width: 415px;
      height: 260px;
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;

      display: block;
      margin: 18px 0 0 324px;
    }

.v3 .contents .ss2:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.v3 .contents .to-chara-btn {
      background: url(../../resources/img/top/v3_to_chara_btn_7c5ee2213ef8a7dd6a226d3da9367466.png) no-repeat;
      width: 451px;
      height: 161px;
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;

      display: block;
      margin: 55px auto 0;
    }

.v3 .contents .to-chara-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.v4 {
  height: 2088px;
  margin-top: 270px;
}

.v4 .v4-bg {
    background: url(../../resources/img/top/v4_bg_1f4bad0ddf4c9ed5c5d6afd76cf98412.png) no-repeat;
    width: 943px;
    height: 2088px;

    position: absolute;
    top: 0;
    left: 40px;
  }

.v4 .v4-monster1,
  .v4 .v4-chara1,
  .v4 .v4-monster2,
  .v4 .v4-chara2,
  .v4 .v4-monster3,
  .v4 .v4-chara3 {
    position: absolute;
  }

.v4 .v4-monster1 {
    top: -205px;
    left: -98px;
  }

.v4 .v4-chara1 {
    top: -156px;
    left: 561px;
  }

.v4 .v4-monster2 {
    top: 1020px;
    left: 867px;
  }

.v4 .v4-chara2 {
    top: 901px;
    left: -82px;
  }

.v4 .v4-monster3 {
    top: 1215px;
    left: 86px;
  }

.v4 .v4-chara3 {
    top: 733px;
    left: 601px;
  }

.v4 .contents {
    position: relative;
  }

.v4 .contents h2 {
      position: absolute;
      top: -89px;
      left: -51px;
    }

.v4 .contents .catch-copy1 {
      padding: 100px 0 0 188px;
    }

.v4 .contents .txt1 {
      margin: -7px 0 0 158px;
    }

.v4 .contents .movie {
      width: 822px;
      height: 488px;
      display: block;
      margin: -62px auto 0;
      padding: 15px 0 0 15px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      position: relative;
    }

.v4 .contents .movie:before {
        content: url(../../resources/img/top/v4_movie_51f6feb582c323073689a7d95fe28914.png);
        position: absolute;
        top: 0;
        left: 0;
      }

.v4 .contents .movie .movie-aria {
        background: #000;
        width: 792px;
        height: 458px;
        overflow: hidden;
      }

.v4 .contents .movie #v4-movie {
        width: 814px;
        height: 458px;
      }

.v4 .contents .catch-copy2 {
      margin: -88px 0 0 648px;
      position: relative;
    }

.v4 .contents .txt2 {
      margin: -34px 0 0 158px;
      position: relative;
    }

.v4 .contents .txt2:before {
        content: url(../../resources/img/top/v4_image_3f33d171e98cd7bce333689c29c13b88.png);
        position: absolute;
        top: 110px;
        left: -2px;
        pointer-events: none;
        z-index: 5;
      }

.v4 .contents .ss1 {
      background: url(../../resources/img/top/v4_ss_thumb1_421eb8b6e3a78e696195ad90fe64f75b.png) no-repeat;
      width: 414px;
      height: 250px;
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;

      margin: -72px 0 0 325px;
      position: relative;
    }

.v4 .contents .ss1:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.v4 .contents .ss2 {
      background: url(../../resources/img/top/v4_ss_thumb2_9bc01f72281841aa755f2e8ada04e44e.png) no-repeat;
      width: 480px;
      height: 320px;
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;

      margin: -84px 0 0 388px;
      position: relative;
      z-index: 2;
    }

.v4 .contents .ss2:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.v4 .contents .ss3 {
      background: url(../../resources/img/top/v4_ss_thumb3_4fbed31b10d98af19364db809435c220.png) no-repeat;
      width: 581px;
      height: 373px;
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;

      margin: -80px 0 0 60px;
    }

.v4 .contents .ss3:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.v4 .contents .to-battle-btn {
      background: url(../../resources/img/top/v4_to_battle_btn_0013a31c65932e28b07dc9fee5672002.png) no-repeat;
      width: 451px;
      height: 160px;
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;

      display: block;
      margin: 45px auto 0;
      position: relative;
      z-index: 10;
    }

.v4 .contents .to-battle-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

#mode {
  height: 1201px;
  margin-top: 210px;
}

#mode .mode-bg {
    background: url(../../resources/img/top/mode_bg_806363749d0d4821af23f7ca213da9a7.png) no-repeat;
    width: 943px;
    height: 1201px;

    position: absolute;
    top: 0;
    left: 40px;
  }

#mode .mode-chara {
    position: absolute;
    top: -132px;
    left: 822px;
  }

#mode .contents {
    position: relative;
  }

#mode .contents h2 {
      position: absolute;
      top: -66px;
      left: -21px;
    }

#mode .contents .txt1 {
      padding: 33px 0 0 127px;
    }

#mode .contents .txt2 {
      margin: -22px 0 0 283px;
      position: relative;
    }

#mode .contents .txt3 {
      margin: 8px 0 0 104px;
    }

.v5 {
  width: 100%;
  height: 626px;
  margin-top: 100px;
  z-index: 2;
}

.v5 .v5-bg {
    width: 100%;
    background: url(../../resources/img/top/v5_bg_528142859da9035ead68358a35c31eff.png) repeat-x;
    height: 626px;
    position: absolute;
    -webkit-animation: bgpt2 20s infinite linear;
            animation: bgpt2 20s infinite linear;
  }

.v5 h2 {
    position: absolute;
    top: -70px;
    left: -20px;
  }

.v5 .catch-copy {
    padding: 18px 0 0 260px;
    position: relative;
  }

.v5 .bnr {
    background: url(../../resources/img/top/v5_bnr_b0d50a7c79652921d9ca5dbfda8097c0.png) no-repeat;
    width: 609px;
    height: 213px;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;

    position: relative;
    display: block;
    margin: -10px 0 0 258px;
  }

.v5 .bnr:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.v6 {
  background: url(../../resources/img/top/v6_bg_35f706ed57aeaae6fa44b8c5255ff08c.jpg) center top no-repeat;
  width: 100%;
  height: 717px;
  background-size: cover;
  margin-top: -41px;
}

.v6 .spec {
    padding: 27px 0 0 191px;
  }

.v6 .pre-order-btn {
    background: url(../../resources/img/top/v6_pre_order_btn_a0e9d76c6f4cd07b1dced980439c47ed.png) no-repeat;
    width: 437px;
    height: 125px;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;

    display: block;
    margin: -122px auto 0;
    position: relative;
  }

.v6 .pre-order-btn:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.v6 .sns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 11px 0 0 455px;
  }

.v6 .sns li:nth-child(1) a {
          background: url(../../resources/img/top/v6_sns_twitter_4f192b75a8848129ccdd5d6428ee35b4.png) no-repeat;
          width: 48px;
          height: 48px;
          -webkit-transition: -webkit-transform 0.3s;
          transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
          transition: transform 0.3s, -webkit-transform 0.3s;
        }

.v6 .sns li:nth-child(1) a:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

.v6 .sns li:nth-child(2) {
        margin-left: 20px;
      }

.v6 .sns li:nth-child(2) a {
          background: url(../../resources/img/top/v6_sns_facebook_47c068df712a5f1765b874b6f4ab15ac.png) no-repeat;
          width: 48px;
          height: 47px;
          -webkit-transition: -webkit-transform 0.3s;
          transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
          transition: transform 0.3s, -webkit-transform 0.3s;
        }

.v6 .sns li:nth-child(2) a:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }

@media screen and (max-width: 640px) {
    .fancybox-slide--iframe.fancybox-slide--video .fancybox-content {
      width: 640px;
      height: 330px;
      max-width: 100%;
    }

  .fancybox-close-small {
    top: -50px !important;
    right: 0 !important;
  }
}