@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap");
* {
  margin: 0;
  padding: 0; }

a {
  text-decoration: none;
  color: #fff; }

li {
  list-style: none; }

@media all and (-ms-high-contrast: none) {
  h1.anime .mask-title {
    opacity: 1 !important;
    position: relative; }
  h2.anime .mask-title {
    opacity: 1 !important;
    -webkit-transition: all 0.5;
    -o-transition: all 0.5;
    transition: all 0.5; } }

body {
  background: #000;
  -webkit-text-size-adjust: 100%;
  font-family: 'Noto Serif JP', serif; }

.wrapper .header .lang-btn, #top .wrapper .header .lang-btn {
  position: absolute;
  top: 0;
  right: 110px; }

.wrapper .header .lang-btn a, #top .wrapper .header .lang-btn a {
  display: block;
  width: 153px;
  height: 55px;
  background: url(../img/lang_tw.png) no-repeat;
  background-size: 100%;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; }

.pc {
  display: none; }

.sp {
  display: block; }

.float-clear {
  clear: both; }

h1::-moz-selection, h2::-moz-selection, h3::-moz-selection, h4::-moz-selection, h5::-moz-selection, h6::-moz-selection, p::-moz-selection, li::-moz-selection, span::-moz-selection, img::-moz-selection {
  color: #000000;
  background: #cd1f1f; }

h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection, p::selection, li::selection, span::selection, img::selection {
  color: #000000;
  background: #cd1f1f; }

@-webkit-keyframes footerFade {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes footerFade {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.none {
  display: none; }

#loading {
  width: 100%;
  height: 100%;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999; }
  #loading .op {
    position: relative;
    height: 100%; }
    #loading .op .op-clip .load-img {
      margin: 0 auto; }
      #loading .op .op-clip .load-img .load-left {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-100.4%, -55%);
        -ms-transform: translate(-100.4%, -55%);
        transform: translate(-100.4%, -55%);
        background: url(../img/loading_left_low.png) no-repeat center; }
      #loading .op .op-clip .load-img .load-right {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-0.5%, -55%);
        -ms-transform: translate(-0.5%, -55%);
        transform: translate(-0.5%, -55%);
        background: url(../img/loading_right_low.png) no-repeat center; }
    #loading .op .op-clip h2 {
      text-align: center; }
      #loading .op .op-clip h2.left {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-100%, 700%);
        -ms-transform: translate(-100%, 700%);
        transform: translate(-100%, 700%); }
      #loading .op .op-clip h2.right {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(20%, 450%);
        -ms-transform: translate(20%, 450%);
        transform: translate(20%, 450%); }

#op-anim {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  opacity: 0; }
  #op-anim.js-fire {
    opacity: 1; }
    #op-anim.js-fire .line {
      width: 4px;
      height: 100vh;
      background: #fff;
      margin: 0 auto;
      position: absolute;
      top: -120%;
      left: 50%; }
      #op-anim.js-fire .line.first {
        -webkit-animation: lineAnim2 0.2s forwards;
        animation: lineAnim2 0.2s forwards; }
      #op-anim.js-fire .line.second {
        -webkit-animation: lineAnim 0.2s forwards;
        animation: lineAnim 0.2s forwards;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s; }
    #op-anim.js-fire .white {
      background: #fff;
      width: 100%;
      height: 100%;
      opacity: 0;
      -webkit-animation: whiteFade 0.5s forwards;
      animation: whiteFade 0.5s forwards;
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
      position: absolute;
      top: 0;
      z-index: 999; }
    #op-anim.js-fire .op-text {
      opacity: 0;
      background: url(../img/bg.jpg) repeat center;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: 99; }
      #op-anim.js-fire .op-text .text {
        position: absolute; }
        #op-anim.js-fire .op-text .text:nth-child(1) {
          opacity: 0;
          left: -60px; }
        #op-anim.js-fire .op-text .text:nth-child(2) {
          opacity: 0;
          right: -30px; }
        #op-anim.js-fire .op-text .text:nth-child(3) {
          opacity: 0;
          bottom: 6%;
          left: -40px; }
        #op-anim.js-fire .op-text .text:nth-child(4) {
          opacity: 0;
          bottom: 0%;
          right: 10px; }
    @media print, screen and (max-width: 750px) {
      #op-anim.js-fire .op-text .text:nth-child(1) {
        opacity: 0;
        top: 3%;
        left: -60px; }
      #op-anim.js-fire .op-text .text:nth-child(2) {
        opacity: 0;
        top: 26%;
        right: -30px; }
      #op-anim.js-fire .op-text .text:nth-child(3) {
        opacity: 0;
        bottom: 6%;
        left: -40px; }
      #op-anim.js-fire .op-text .text:nth-child(4) {
        opacity: 0;
        bottom: 0%;
        right: 10px; } }
    #op-anim.js-fire .fade01 {
      width: 331px;
      height: 100%;
      position: absolute;
      top: 42%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      z-index: 999;
      background: url(../img/mask.png) no-repeat;
      opacity: 0; }
    #op-anim.js-fire .fade02 {
      width: 669px;
      height: 100%;
      position: absolute;
      top: 22%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      z-index: 999;
      background: url(../img/mask02.png) no-repeat;
      opacity: 0; }
    #op-anim.js-fire .fade03 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0%;
      z-index: 999;
      background: url(../img/mask03.png) no-repeat;
      background-size: 100%;
      opacity: 0; }
    #op-anim.js-fire .fade04 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      background: url(../img/mask04.png) no-repeat;
      background-size: cover;
      opacity: 0;
      -webkit-animation: fadeAnim 1s forwards;
      animation: fadeAnim 1s forwards;
      -webkit-animation-delay: 4.5s;
      animation-delay: 4.5s; }

#top {
  height: 100%; }
  #top .wrapper .header {
    opacity: 1;
    position: fixed; }
  #top .wrapper .main-contents {
    background: url(../img/bg.jpg) repeat;
    background-size: 100%;
    position: relative; }
    #top .wrapper .main-contents h1 {
      padding: 230px 0 0;
      text-align: center; }
    #top .wrapper .main-contents p {
      text-align: center;
      font-weight: bold;
      font-size: 26px;
      margin: 60px 0 0; }
    #top .wrapper .main-contents ul {
      width: 528px;
      margin: 40px auto 0; }
      #top .wrapper .main-contents ul li:first-child {
        margin-bottom: 10px; }
      #top .wrapper .main-contents ul li a.yes {
        display: block;
        width: 528px;
        height: 167px;
        background: url(../img/top/yes_sp.png) no-repeat center; }
      #top .wrapper .main-contents ul li a.no {
        display: block;
        width: 528px;
        height: 167px;
        background: url(../img/top/no_sp.png) no-repeat center; }
    #top .wrapper .main-contents .copyright {
      padding: 0 0 10px;
      margin: 120px 0 0; }
      #top .wrapper .main-contents .copyright p {
        margin: 0;
        font-size: 24px;
        font-weight: bold; }

.wrapper {
  position: relative;
  overflow: hidden;
  z-index: 999;
  opacity: 0; }
  .wrapper .header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 9996; }
    .wrapper .header .movie-btn a {
      position: absolute;
      top: 0;
      right: 0; }
    .wrapper .header h1 {
      background: url(../img/header_bg.png) no-repeat;
      padding: 20px 0 160px 10px; }
      .wrapper .header h1 img {
        width: auto; }
  .wrapper .menu-btn {
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    display: block;
    width: 110px;
    height: 110px;
    background: url(../img/menu.png) no-repeat;
    background-size: 100%;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    z-index: 9999; }
    .wrapper .menu-btn.show {
      opacity: 1;
      -webkit-transition: 500ms;
      -o-transition: 500ms;
      transition: 500ms; }
    .wrapper .menu-btn:hover {
      width: 110px;
      height: 110px;
      background: url(../img/menu_hover.png) no-repeat;
      background-size: 100%; }
    .wrapper .menu-btn.active {
      opacity: 0; }
    .wrapper .menu-btn.close {
      right: 10px;
      opacity: 0;
      width: 77px;
      height: 101px;
      background: url(../img/nav_close.png) no-repeat;
      -webkit-transition: none;
      -o-transition: none;
      transition: none;
      pointer-events: none; }
      .wrapper .menu-btn.close.active {
        opacity: 1;
        pointer-events: auto; }
  .wrapper .menu-fade {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 9997;
    pointer-events: none; }
    .wrapper .menu-fade .fade01 {
      width: 331px;
      height: 100%;
      position: absolute;
      top: 42%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      z-index: 999;
      background: url(../img/mask.png) no-repeat;
      opacity: 0;
      -webkit-transition: opacity 320ms;
      -o-transition: opacity 320ms;
      transition: opacity 320ms;
      -webkit-transition-delay: 400ms;
      -o-transition-delay: 400ms;
      transition-delay: 400ms;
      -webkit-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out; }
    .wrapper .menu-fade .fade02 {
      width: 669px;
      height: 100%;
      position: absolute;
      top: 22%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      z-index: 999;
      background: url(../img/mask02.png) no-repeat;
      opacity: 0;
      -webkit-transition: opacity 320ms;
      -o-transition: opacity 320ms;
      transition: opacity 320ms;
      -webkit-transition-delay: 300ms;
      -o-transition-delay: 300ms;
      transition-delay: 300ms;
      -webkit-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out; }
    .wrapper .menu-fade .fade03 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0%;
      z-index: 999;
      background: url(../img/mask03.png) no-repeat;
      background-size: 100%;
      opacity: 0;
      -webkit-transition: opacity 160ms;
      -o-transition: opacity 160ms;
      transition: opacity 160ms;
      -webkit-transition-delay: 200ms;
      -o-transition-delay: 200ms;
      transition-delay: 200ms;
      -webkit-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out; }
    .wrapper .menu-fade .fade04 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      background: url(../img/mask04.png) no-repeat;
      background-size: cover;
      opacity: 0;
      -webkit-transition: opacity 160ms;
      -o-transition: opacity 160ms;
      transition: opacity 160ms;
      -webkit-transition-delay: 100ms;
      -o-transition-delay: 100ms;
      transition-delay: 100ms;
      -webkit-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out; }
    .wrapper .menu-fade.active {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      width: 100%;
      height: 100vh; }
      .wrapper .menu-fade.active .fade01 {
        opacity: 1;
        -webkit-transition: opacity 160ms;
        -o-transition: opacity 160ms;
        transition: opacity 160ms;
        -webkit-transition-delay: 100ms;
        -o-transition-delay: 100ms;
        transition-delay: 100ms;
        -webkit-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out; }
      .wrapper .menu-fade.active .fade02 {
        opacity: 1;
        -webkit-transition: opacity 160ms;
        -o-transition: opacity 160ms;
        transition: opacity 160ms;
        -webkit-transition-delay: 200ms;
        -o-transition-delay: 200ms;
        transition-delay: 200ms;
        -webkit-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out; }
      .wrapper .menu-fade.active .fade03 {
        opacity: 1;
        -webkit-transition: opacity 160ms;
        -o-transition: opacity 160ms;
        transition: opacity 160ms;
        -webkit-transition-delay: 300ms;
        -o-transition-delay: 300ms;
        transition-delay: 300ms;
        -webkit-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out; }
      .wrapper .menu-fade.active .fade04 {
        opacity: 1;
        -webkit-transition: opacity 160ms;
        -o-transition: opacity 160ms;
        transition: opacity 160ms;
        -webkit-transition-delay: 400ms;
        -o-transition-delay: 400ms;
        transition-delay: 400ms;
        -webkit-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out; }
  .wrapper .nav {
    position: fixed;
    opacity: 0;
    -webkit-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms; }
    .wrapper .nav.active {
      opacity: 1;
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 9998;
      background: url(../img/menu_bg.jpg) no-repeat center 0;
      background-size: cover;
      -webkit-transition-delay: 500ms;
      -o-transition-delay: 500ms;
      transition-delay: 500ms; }
    .wrapper .nav nav {
      padding: 240px 0 0; }
      .wrapper .nav nav li {
        color: #fff;
        font-size: 48px;
        text-align: center;
        margin: 0 0 65px; }
        .wrapper .nav nav li:nth-child(5) {
          margin: 0 0 165px; }
        .wrapper .nav nav li.share {
          position: relative; }
          .wrapper .nav nav li.share p {
            text-align: center;
            margin: 60px 0 40px; }
            .wrapper .nav nav li.share p a {
              display: block;
              width: 177px;
              height: 169px;
              margin: 0 auto;
              background: url(../img/tw_share_off.png) no-repeat center;
              background-size: 100%;
              -webkit-transition: all 1s;
              -o-transition: all 1s;
              transition: all 1s; }
  .wrapper .main {
    background: url(../img/bg_sp.jpg) no-repeat top;
    background-position-x: 85%;
    height: 100vh;
    position: relative; }
    .wrapper .main .movie-banner {
      position: absolute;
      bottom: -130px;
      left: 35px;
      z-index: 9; }
      .wrapper .main .movie-banner a {
        display: block;
        background: url(../img/movie_bnr_on.png) no-repeat;
        background-size: 100%;
        width: 680px;
        height: 141px;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s; }
    .wrapper .main .tw-banner {
      position: absolute;
      bottom: 30px;
      left: 35px;
      z-index: 9; }
      .wrapper .main .tw-banner a {
        display: block;
        background: url(../img/twitter_bnr_on.png) no-repeat;
        background-size: 100%;
        width: 680px;
        height: 141px;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s; }
    .wrapper .main .chara {
      opacity: 1; }
    .wrapper .main h1 {
      position: absolute;
      width: 100%;
      opacity: 0; }
      .wrapper .main h1.first img {
        width: 80%; }
      .wrapper .main h1.second img {
        width: 80%; }
    @media print, screen and (max-width: 750px) {
      .wrapper .main h1 {
        position: absolute;
        top: 47%;
        left: 50%;
        -webkit-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
        transform: translateX(-40%);
        width: 100%;
        opacity: 0; } }
    .wrapper .main .release {
      width: 710px;
      opacity: 0;
      position: absolute;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      z-index: 999; }
      .wrapper .main .release img {
        width: 100%; }
    @media print, screen and (max-width: 750px) {
      .wrapper .main .release {
        width: 710px;
        opacity: 0;
        position: absolute;
        bottom: 190px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: 999; } }
    .wrapper .main .shadow {
      background: url(../img/shadow_sp.png) repeat-x center;
      width: 100%;
      height: 390px;
      position: absolute; }
    @media print, screen and (max-width: 750px) {
      .wrapper .main .shadow {
        background: url(../img/shadow_sp.png) repeat-x center;
        width: 100%;
        height: 900px;
        position: absolute;
        top: 73%;
        background-size: 360%; } }
  @media print, screen and (max-width: 750px) {
    .wrapper .main {
      height: 1400px; } }
  .wrapper .contents {
    background: url(../img/bg.jpg) repeat;
    background-size: 100%; }
    .wrapper .contents.top {
      margin: 350px 0 0; }
  .wrapper .story .movie-area {
    width: 100%;
    position: relative;
    margin: -170px 0 0; }
    .wrapper .story .movie-area .movie-inner h2 {
      position: relative;
      z-index: 10; }
    .wrapper .story .movie-area .movie-inner .copy {
      position: absolute;
      top: 150px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      z-index: 11; }
    .wrapper .story .movie-area .movie-inner .btn {
      position: absolute;
      top: 836px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      z-index: 11; }
  .wrapper .story .story-area {
    background: url(../img/story_bg_sp.png) no-repeat center top;
    padding: 150px 0 0;
    margin: -80px 0 0;
    position: relative; }
    .wrapper .story .story-area .story-inner {
      overflow: hidden;
      width: 1000px;
      margin: 0 auto;
      padding: 0 20px; }
      .wrapper .story .story-area .story-inner h2 {
        margin: 0 0 50px; }
      .wrapper .story .story-area .story-inner .text-area p {
        font-size: 28px;
        color: #fff;
        line-height: 2.5;
        text-shadow: #000 1px 1px 5px, #000 -1px 1px 5px, #000 1px -1px 5px, #000 -1px -1px 5px; }
      .wrapper .story .story-area .story-inner .text-area h3 {
        font-size: 40px;
        color: #fff;
        margin: 50px 0;
        text-shadow: #000 1px 1px 5px, #000 -1px 1px 5px, #000 1px -1px 5px, #000 -1px -1px 5px; }
      .wrapper .story .story-area .story-inner .ss-area {
        margin: 95px 0 0 77px; }
    .wrapper .story .story-area .ss {
      margin: 195px 0 0;
      background: url(../img/story_bg_01_sp.png) no-repeat center top;
      overflow: hidden;
      padding: 0 26px 262px; }
      .wrapper .story .story-area .ss .inner {
        margin: 60px auto 0;
        position: relative; }
        .wrapper .story .story-area .ss .inner h3 {
          position: absolute;
          top: 250px;
          right: 0px; }
        @media print, screen and (max-width: 750px) {
          .wrapper .story .story-area .ss .inner p.third {
            margin: 80px 0 0; } }
  .wrapper .character {
    background: url(../img/character_bg_sp.png) no-repeat center 300px;
    overflow: hidden;
    margin: -70px 0 0;
    padding: 0 0 200px; }
    .wrapper .character .chara-inner .chara-list {
      margin: 0 auto;
      position: relative; }
      .wrapper .character .chara-inner .chara-list h2 {
        padding: 80px 0 0; }
      .wrapper .character .chara-inner .chara-list li:nth-child(1) {
        margin: 0 0 0 200px;
        position: relative;
        z-index: 1; }
      .wrapper .character .chara-inner .chara-list li:nth-child(2) {
        margin: -180px 0px 0 -75px;
        position: relative;
        z-index: 1; }
        .wrapper .character .chara-inner .chara-list li:nth-child(2) img {
          width: 55%; }
      .wrapper .character .chara-inner .chara-list li:nth-child(3) {
        margin: -300px 0 0 408px;
        position: relative;
        z-index: 3; }
        .wrapper .character .chara-inner .chara-list li:nth-child(3) img {
          width: 100%; }
      .wrapper .character .chara-inner .chara-list p {
        font-size: 24px;
        display: inline-block;
        text-align: left;
        font-style: italic;
        text-shadow: #000 1px 1px 5px, #000 -1px 1px 5px, #000 1px -1px 5px, #000 -1px -1px 5px; }
        .wrapper .character .chara-inner .chara-list p span {
          font-weight: bold;
          position: relative;
          font-size: 48px;
          text-shadow: #0092b7 1px 1px 10px, #0092b7 -1px 1px 10px, #0092b7 1px -1px 10px, #0092b7 -1px -1px 10px; }
          @media print, screen and (max-width: 750px) {
            .wrapper .character .chara-inner .chara-list p span.first:before {
              position: absolute;
              content: "堂島 軍二";
              top: 1px;
              left: 0;
              right: 0;
              bottom: 0;
              color: rgba(0, 0, 0, 0);
              background: white;
              /* Old browsers */
              background: -moz-linear-gradient(top, white 0%, #d8d8d8 100%);
              /* FF3.6-15 */
              background: -webkit-linear-gradient(top, white 0%, #d8d8d8 100%);
              /* Chrome10-25,Safari5.1-6 */
              background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d8d8d8));
              background: -o-linear-gradient(top, white 0%, #d8d8d8 100%);
              background: linear-gradient(to bottom, white 0%, #d8d8d8 100%);
              -webkit-background-clip: text;
              text-shadow: none; } }
          @media print, screen and (max-width: 750px) {
            .wrapper .character .chara-inner .chara-list p span.second:before {
              position: absolute;
              content: "主人公";
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              color: rgba(0, 0, 0, 0);
              background: white;
              /* Old browsers */
              background: -moz-linear-gradient(top, white 0%, #d8d8d8 100%);
              /* FF3.6-15 */
              background: -webkit-linear-gradient(top, white 0%, #d8d8d8 100%);
              /* Chrome10-25,Safari5.1-6 */
              background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d8d8d8));
              background: -o-linear-gradient(top, white 0%, #d8d8d8 100%);
              background: linear-gradient(to bottom, white 0%, #d8d8d8 100%);
              -webkit-background-clip: text;
              text-shadow: none; } }
          @media print, screen and (max-width: 750px) {
            .wrapper .character .chara-inner .chara-list p span.third:before {
              position: absolute;
              content: "堂島 七海";
              top: 0px;
              left: 0;
              right: 0;
              bottom: -1px;
              color: rgba(0, 0, 0, 0);
              background: white;
              /* Old browsers */
              background: -moz-linear-gradient(top, white 0%, #d8d8d8 100%);
              /* FF3.6-15 */
              background: -webkit-linear-gradient(top, white 0%, #d8d8d8 100%);
              /* Chrome10-25,Safari5.1-6 */
              background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d8d8d8));
              background: -o-linear-gradient(top, white 0%, #d8d8d8 100%);
              background: linear-gradient(to bottom, white 0%, #d8d8d8 100%);
              -webkit-background-clip: text;
              text-shadow: none; } }
        @media print, screen and (max-width: 750px) {
          .wrapper .character .chara-inner .chara-list p.name01 {
            position: absolute;
            top: 1175px;
            right: 0px;
            color: #fff;
            padding: 160px 160px 200px 200px;
            background: url(../img/name_bg.png) no-repeat center; }
          .wrapper .character .chara-inner .chara-list p.name02 {
            position: absolute;
            top: 450px;
            left: 0;
            color: #fff;
            padding: 160px 200px 200px 220px;
            background: url(../img/name_bg.png) no-repeat center; }
          .wrapper .character .chara-inner .chara-list p.name03 {
            position: absolute;
            bottom: 150px;
            left: -30px;
            color: #fff;
            padding: 160px 160px 200px 200px;
            background: url(../img/name_bg.png) no-repeat center; } }
      .wrapper .character .chara-inner .chara-list h3 {
        position: absolute;
        bottom: -115px;
        left: 20px;
        z-index: 10; }
  .wrapper .feature .feature-top {
    background: url(../img/feature_top.png) repeat-x;
    height: 46px; }
  .wrapper .feature .feature-content {
    background: url(../img/feature_bg.jpg) repeat;
    overflow: hidden; }
    .wrapper .feature .feature-content .inner {
      margin: 0 auto;
      padding: 77px 0 0; }
      .wrapper .feature .feature-content .inner h2 {
        margin: 0 0 60px; }
      .wrapper .feature .feature-content .inner .feature-box01 {
        margin: 0 0 50px; }
        .wrapper .feature .feature-content .inner .feature-box01 .left-box {
          padding: 0 20px; }
          .wrapper .feature .feature-content .inner .feature-box01 .left-box h3 {
            font-style: italic;
            position: relative;
            font-size: 48px;
            letter-spacing: -0.02em;
            margin: 0 0 50px;
            color: #fff;
            text-shadow: #0092b7 1px 1px 10px, #0092b7 -1px 1px 10px, #0092b7 1px -1px 10px, #0092b7 -1px -1px 10px; }
            .wrapper .feature .feature-content .inner .feature-box01 .left-box h3 .grad01 {
              position: relative; }
              @media print, screen and (max-width: 750px) {
                .wrapper .feature .feature-content .inner .feature-box01 .left-box h3 .grad01:before {
                  position: absolute;
                  content: "「侍道」の世界観で展開される";
                  top: 0px;
                  left: 0;
                  right: 0;
                  bottom: -1px;
                  color: rgba(0, 0, 0, 0);
                  background: white;
                  /* Old browsers */
                  background: -moz-linear-gradient(top, white 0%, #d8d8d8 100%);
                  /* FF3.6-15 */
                  background: -webkit-linear-gradient(top, white 0%, #d8d8d8 100%);
                  /* Chrome10-25,Safari5.1-6 */
                  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d8d8d8));
                  background: -o-linear-gradient(top, white 0%, #d8d8d8 100%);
                  background: linear-gradient(to bottom, white 0%, #d8d8d8 100%);
                  -webkit-background-clip: text;
                  text-shadow: none; } }
            .wrapper .feature .feature-content .inner .feature-box01 .left-box h3 .grad02 {
              position: relative; }
              @media print, screen and (max-width: 750px) {
                .wrapper .feature .feature-content .inner .feature-box01 .left-box h3 .grad02:before {
                  position: absolute;
                  content: "和風剣術アクションRPG";
                  top: 0px;
                  left: 0;
                  right: 0;
                  bottom: -1px;
                  color: rgba(0, 0, 0, 0);
                  background: white;
                  /* Old browsers */
                  background: -moz-linear-gradient(top, white 0%, #d8d8d8 100%);
                  /* FF3.6-15 */
                  background: -webkit-linear-gradient(top, white 0%, #d8d8d8 100%);
                  /* Chrome10-25,Safari5.1-6 */
                  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d8d8d8));
                  background: -o-linear-gradient(top, white 0%, #d8d8d8 100%);
                  background: linear-gradient(to bottom, white 0%, #d8d8d8 100%);
                  -webkit-background-clip: text;
                  text-shadow: none; } }
          .wrapper .feature .feature-content .inner .feature-box01 .left-box p {
            font-size: 28px;
            letter-spacing: -0.02em;
            line-height: 1.875;
            color: #000;
            text-shadow: #fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px; }
        .wrapper .feature .feature-content .inner .feature-box01 .right-box {
          background: url(../img/feature_ss01_bg.png) no-repeat -120px center;
          padding: 110px 0 80px; }
          .wrapper .feature .feature-content .inner .feature-box01 .right-box p {
            width: 680px;
            margin: 0 auto; }
      @media print, screen and (max-width: 750px) {
        .wrapper .feature .feature-content .inner .feature-box01 {
          overflow: hidden; } }
      .wrapper .feature .feature-content .inner .feature-box02 .left-box {
        padding: 0 20px; }
        .wrapper .feature .feature-content .inner .feature-box02 .left-box h3 {
          font-style: italic;
          font-size: 48px;
          letter-spacing: -0.02em;
          margin: 0 0 50px;
          color: #fff;
          text-shadow: #0092b7 1px 1px 10px, #0092b7 -1px 1px 10px, #0092b7 1px -1px 10px, #0092b7 -1px -1px 10px; }
          .wrapper .feature .feature-content .inner .feature-box02 .left-box h3 .grad01 {
            position: relative; }
            @media print, screen and (max-width: 750px) {
              .wrapper .feature .feature-content .inner .feature-box02 .left-box h3 .grad01:before {
                position: absolute;
                content: "ダンジョンから持ち帰った";
                top: 1px;
                left: 0;
                right: 0;
                bottom: 0;
                color: rgba(0, 0, 0, 0);
                background: white;
                /* Old browsers */
                background: -moz-linear-gradient(top, white 0%, #d8d8d8 100%);
                /* FF3.6-15 */
                background: -webkit-linear-gradient(top, white 0%, #d8d8d8 100%);
                /* Chrome10-25,Safari5.1-6 */
                background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d8d8d8));
                background: -o-linear-gradient(top, white 0%, #d8d8d8 100%);
                background: linear-gradient(to bottom, white 0%, #d8d8d8 100%);
                -webkit-background-clip: text;
                text-shadow: none; } }
          .wrapper .feature .feature-content .inner .feature-box02 .left-box h3 .grad02 {
            position: relative; }
            @media print, screen and (max-width: 750px) {
              .wrapper .feature .feature-content .inner .feature-box02 .left-box h3 .grad02:before {
                position: absolute;
                content: "素材で、鍛冶屋を経営！";
                top: 1px;
                left: 0;
                right: 0;
                bottom: 0;
                color: rgba(0, 0, 0, 0);
                background: white;
                /* Old browsers */
                background: -moz-linear-gradient(top, white 0%, #d8d8d8 100%);
                /* FF3.6-15 */
                background: -webkit-linear-gradient(top, white 0%, #d8d8d8 100%);
                /* Chrome10-25,Safari5.1-6 */
                background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d8d8d8));
                background: -o-linear-gradient(top, white 0%, #d8d8d8 100%);
                background: linear-gradient(to bottom, white 0%, #d8d8d8 100%);
                -webkit-background-clip: text;
                text-shadow: none; } }
        .wrapper .feature .feature-content .inner .feature-box02 .left-box p {
          font-size: 28px;
          letter-spacing: -0.02em;
          line-height: 1.875;
          color: #000;
          text-shadow: #fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px; }
      .wrapper .feature .feature-content .inner .feature-box02 .right-box {
        background: url(../img/feature_ss02_bg.png) no-repeat -120px center;
        padding: 150px 0 170px;
        margin: -60px 0 0; }
        .wrapper .feature .feature-content .inner .feature-box02 .right-box p {
          width: 680px;
          margin: 0 auto; }
      .wrapper .feature .feature-content .inner .feature-box03 {
        clear: both;
        margin: 0 0 50px; }
        .wrapper .feature .feature-content .inner .feature-box03 .left-box {
          padding: 0 20px; }
          .wrapper .feature .feature-content .inner .feature-box03 .left-box h3 {
            font-style: italic;
            position: relative;
            font-size: 48px;
            letter-spacing: -0.02em;
            margin: 0 0 50px;
            color: #fff;
            text-shadow: #0092b7 1px 1px 10px, #0092b7 -1px 1px 10px, #0092b7 1px -1px 10px, #0092b7 -1px -1px 10px; }
            .wrapper .feature .feature-content .inner .feature-box03 .left-box h3 .grad01 {
              position: relative; }
              @media print, screen and (max-width: 750px) {
                .wrapper .feature .feature-content .inner .feature-box03 .left-box h3 .grad01:before {
                  position: absolute;
                  content: "「侍道」の世界観で展開される";
                  top: 0px;
                  left: 0;
                  right: 0;
                  bottom: -1px;
                  color: rgba(0, 0, 0, 0);
                  background: white;
                  /* Old browsers */
                  background: -moz-linear-gradient(top, white 0%, #d8d8d8 100%);
                  /* FF3.6-15 */
                  background: -webkit-linear-gradient(top, white 0%, #d8d8d8 100%);
                  /* Chrome10-25,Safari5.1-6 */
                  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d8d8d8));
                  background: -o-linear-gradient(top, white 0%, #d8d8d8 100%);
                  background: linear-gradient(to bottom, white 0%, #d8d8d8 100%);
                  -webkit-background-clip: text;
                  text-shadow: none; } }
            .wrapper .feature .feature-content .inner .feature-box03 .left-box h3 .grad02 {
              position: relative; }
              @media print, screen and (max-width: 750px) {
                .wrapper .feature .feature-content .inner .feature-box03 .left-box h3 .grad02:before {
                  position: absolute;
                  content: "和風剣術アクションRPG";
                  top: 0px;
                  left: 0;
                  right: 0;
                  bottom: -1px;
                  color: rgba(0, 0, 0, 0);
                  background: white;
                  /* Old browsers */
                  background: -moz-linear-gradient(top, white 0%, #d8d8d8 100%);
                  /* FF3.6-15 */
                  background: -webkit-linear-gradient(top, white 0%, #d8d8d8 100%);
                  /* Chrome10-25,Safari5.1-6 */
                  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d8d8d8));
                  background: -o-linear-gradient(top, white 0%, #d8d8d8 100%);
                  background: linear-gradient(to bottom, white 0%, #d8d8d8 100%);
                  -webkit-background-clip: text;
                  text-shadow: none; } }
          .wrapper .feature .feature-content .inner .feature-box03 .left-box p {
            font-size: 28px;
            letter-spacing: -0.02em;
            line-height: 1.875;
            color: #000;
            text-shadow: #fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px; }
        .wrapper .feature .feature-content .inner .feature-box03 .right-box {
          background: url(../img/feature_ss01_bg.png) no-repeat -120px center;
          padding: 110px 0 80px; }
          .wrapper .feature .feature-content .inner .feature-box03 .right-box p {
            width: 680px;
            margin: 0 auto; }
      .wrapper .feature .feature-content .inner .feature-box04 .left-box {
        padding: 0 20px; }
        .wrapper .feature .feature-content .inner .feature-box04 .left-box h3 {
          font-style: italic;
          font-size: 48px;
          letter-spacing: -0.02em;
          margin: 0 0 50px;
          color: #fff;
          text-shadow: #0092b7 1px 1px 10px, #0092b7 -1px 1px 10px, #0092b7 1px -1px 10px, #0092b7 -1px -1px 10px; }
          .wrapper .feature .feature-content .inner .feature-box04 .left-box h3 .grad01 {
            position: relative; }
            @media print, screen and (max-width: 750px) {
              .wrapper .feature .feature-content .inner .feature-box04 .left-box h3 .grad01:before {
                position: absolute;
                content: "ダンジョンから持ち帰った";
                top: 1px;
                left: 0;
                right: 0;
                bottom: 0;
                color: rgba(0, 0, 0, 0);
                background: white;
                /* Old browsers */
                background: -moz-linear-gradient(top, white 0%, #d8d8d8 100%);
                /* FF3.6-15 */
                background: -webkit-linear-gradient(top, white 0%, #d8d8d8 100%);
                /* Chrome10-25,Safari5.1-6 */
                background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d8d8d8));
                background: -o-linear-gradient(top, white 0%, #d8d8d8 100%);
                background: linear-gradient(to bottom, white 0%, #d8d8d8 100%);
                -webkit-background-clip: text;
                text-shadow: none; } }
          .wrapper .feature .feature-content .inner .feature-box04 .left-box h3 .grad02 {
            position: relative; }
            @media print, screen and (max-width: 750px) {
              .wrapper .feature .feature-content .inner .feature-box04 .left-box h3 .grad02:before {
                position: absolute;
                content: "素材で、鍛冶屋を経営！";
                top: 1px;
                left: 0;
                right: 0;
                bottom: 0;
                color: rgba(0, 0, 0, 0);
                background: white;
                /* Old browsers */
                background: -moz-linear-gradient(top, white 0%, #d8d8d8 100%);
                /* FF3.6-15 */
                background: -webkit-linear-gradient(top, white 0%, #d8d8d8 100%);
                /* Chrome10-25,Safari5.1-6 */
                background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d8d8d8));
                background: -o-linear-gradient(top, white 0%, #d8d8d8 100%);
                background: linear-gradient(to bottom, white 0%, #d8d8d8 100%);
                -webkit-background-clip: text;
                text-shadow: none; } }
        .wrapper .feature .feature-content .inner .feature-box04 .left-box p {
          font-size: 28px;
          letter-spacing: -0.02em;
          line-height: 1.875;
          color: #000;
          text-shadow: #fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px; }
      .wrapper .feature .feature-content .inner .feature-box04 .right-box {
        background: url(../img/feature_ss02_bg.png) no-repeat -120px center;
        padding: 150px 0 170px;
        margin: -60px 0 0; }
        .wrapper .feature .feature-content .inner .feature-box04 .right-box p {
          width: 680px;
          margin: 0 auto; }
  .wrapper .footer {
    width: 750px;
    background: url(../img/foot_sp.png) no-repeat center bottom, url(../img/footer_bg.jpg) repeat;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 0 20px; }
    .wrapper .footer .footer-top {
      background: url(../img/footer_top_sp.png) repeat-x center top, url(../img/feature_bg.jpg) repeat-x center top;
      height: 200px; }
    .wrapper .footer .spec {
      padding: 0 20px;
      position: relative; }
      .wrapper .footer .spec h2 {
        opacity: 0;
        margin: 0 0 60px; }
      .wrapper .footer .spec .spec-detail {
        opacity: 1 !important;
        -webkit-animation: none !important;
        animation: none !important; }
        .wrapper .footer .spec .spec-detail::-moz-selection {
          color: #000000;
          background: #cd1f1f; }
        .wrapper .footer .spec .spec-detail::selection {
          color: #000000;
          background: #cd1f1f; }
      .wrapper .footer .spec dl {
        color: #fff;
        font-size: 26px; }
        .wrapper .footer .spec dl dt {
          float: left;
          width: 218px;
          border-right: 2px solid #fff; }
          .wrapper .footer .spec dl dt::-moz-selection {
            color: #000000;
            background: #cd1f1f; }
          .wrapper .footer .spec dl dt::selection {
            color: #000000;
            background: #cd1f1f; }
        .wrapper .footer .spec dl dd {
          margin: 0 0 20px 245px; }
          .wrapper .footer .spec dl dd::-moz-selection {
            color: #000000;
            background: #cd1f1f; }
          .wrapper .footer .spec dl dd::selection {
            color: #000000;
            background: #cd1f1f; }
    .wrapper .footer .tokuten {
      margin: 60px 20px;
      border: 1px solid #fff; }
      .wrapper .footer .tokuten p {
        padding: 30px 0 0;
        text-align: center;
        font-size: 22px;
        color: #fff;
        margin: 0 0 30px; }
        .wrapper .footer .tokuten p span {
          color: #00c6ff;
          font-size: 26px; }
      .wrapper .footer .tokuten ul.download li {
        width: 498px;
        height: 158px;
        float: left;
        margin: 0 auto; }
        .wrapper .footer .tokuten ul.download li.ps {
          margin-bottom: 20px;
          margin-right: 16px; }
          .wrapper .footer .tokuten ul.download li.ps a {
            background: url(../img/ps_btn.png) no-repeat;
            background-size: 100%;
            width: 498px;
            height: 158px;
            display: block; }
        .wrapper .footer .tokuten ul.download li.nd a {
          background: url(../img/nin_btn.png) no-repeat;
          background-size: 100%;
          width: 498px;
          height: 158px;
          display: block; }
        .wrapper .footer .tokuten ul.download li img {
          width: 100%; }
    .wrapper .footer .download {
      overflow: hidden;
      width: 508px;
      margin: 0 auto 25px; }
      .wrapper .footer .download ul li {
        width: 245px;
        height: 75px;
        float: left; }
        .wrapper .footer .download ul li.ps {
          margin-right: 16px; }
          .wrapper .footer .download ul li.ps a {
            background: url(../img/ps_btn.png) no-repeat;
            background-size: 100%;
            width: 245px;
            height: 75px;
            display: block;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
            .wrapper .footer .download ul li.ps a:hover {
              background: url(../img/ps_btn_hover.png) no-repeat;
              background-size: 100%;
              width: 245px;
              height: 75px;
              display: block;
              -webkit-transition: all 0.5s;
              -o-transition: all 0.5s;
              transition: all 0.5s; }
        .wrapper .footer .download ul li.nd a {
          background: url(../img/nin_btn.png) no-repeat;
          background-size: 100%;
          width: 245px;
          height: 75px;
          display: block;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s; }
          .wrapper .footer .download ul li.nd a:hover {
            background: url(../img/nin_btn_hover.png) no-repeat;
            background-size: 100%;
            width: 245px;
            height: 75px;
            display: block;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
        .wrapper .footer .download ul li img {
          width: 100%; }
    .wrapper .footer .share {
      position: relative; }
      .wrapper .footer .share p {
        text-align: center;
        margin: 60px 0 40px; }
        .wrapper .footer .share p a {
          display: block;
          width: 177px;
          height: 169px;
          margin: 0 auto;
          background: url(../img/tw_share_off.png) no-repeat center;
          background-size: 100%;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
    .wrapper .footer .copyright {
      position: relative;
      text-align: center;
      font-size: 24px;
      color: #fff; }
      .wrapper .footer .copyright::-moz-selection {
        color: #000000;
        background: #cd1f1f; }
      .wrapper .footer .copyright::selection {
        color: #000000;
        background: #cd1f1f; }
    .wrapper .footer .footer_bottom .light {
      position: absolute;
      bottom: 0;
      z-index: -1;
      opacity: 0;
      -webkit-animation: footerFade 4s infinite forwards;
      animation: footerFade 4s infinite forwards; }
  .wrapper footer dl::-moz-selection {
    color: #000000;
    background: #cd1f1f; }
  .wrapper footer dl::selection {
    color: #000000;
    background: #cd1f1f; }

#play .wrapper {
  position: relative;
  overflow: hidden;
  z-index: 999;
  opacity: 0; }
  #play .wrapper p {
    line-height: 2; }
  #play .wrapper .bg-sprite > * {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 100% 100% !important;
    opacity: 1; }
  #play .wrapper .anime .bg-sprite > * {
    opacity: 1;
    -webkit-transition: opacity 1400ms;
    -o-transition: opacity 1400ms;
    transition: opacity 1400ms; }
    #play .wrapper .anime .bg-sprite > *:nth-child(1) {
      -webkit-transition-delay: 83ms;
      -o-transition-delay: 83ms;
      transition-delay: 83ms; }
    #play .wrapper .anime .bg-sprite > *:nth-child(2) {
      -webkit-transition-delay: 166ms;
      -o-transition-delay: 166ms;
      transition-delay: 166ms; }
    #play .wrapper .anime .bg-sprite > *:nth-child(3) {
      -webkit-transition-delay: 249ms;
      -o-transition-delay: 249ms;
      transition-delay: 249ms; }
    #play .wrapper .anime .bg-sprite > *:nth-child(4) {
      -webkit-transition-delay: 332ms;
      -o-transition-delay: 332ms;
      transition-delay: 332ms; }
    #play .wrapper .anime .bg-sprite > *:nth-child(5) {
      -webkit-transition-delay: 415ms;
      -o-transition-delay: 415ms;
      transition-delay: 415ms; }
    #play .wrapper .anime .bg-sprite > *:nth-child(6) {
      -webkit-transition-delay: 498ms;
      -o-transition-delay: 498ms;
      transition-delay: 498ms; }
  #play .wrapper .contents {
    background: url(../img/bg.jpg) repeat;
    background-size: 100%; }
  #play .wrapper .play .play-area {
    padding: 150px 0 0;
    position: relative; }
    #play .wrapper .play .play-area .bg-play-container {
      position: absolute;
      width: 1280px;
      height: 1192px;
      top: 0;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0); }
      #play .wrapper .play .play-area .bg-play-container .bg-play.bg-play01 {
        background: url(../img/bg_story_sp01.png) no-repeat center top; }
      #play .wrapper .play .play-area .bg-play-container .bg-play.bg-play02 {
        background: url(../img/bg_story_sp02.png) no-repeat center top; }
  #play .wrapper .play .play-title {
    width: 750px;
    margin: 0 auto; }
    #play .wrapper .play .play-title.anime .mask-title {
      -webkit-animation-delay: 400ms;
      animation-delay: 400ms; }
    #play .wrapper .play .play-title h1 {
      width: 643px;
      text-align: left;
      margin: 0 0 50px;
      left: auto;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none; }
      #play .wrapper .play .play-title h1 img {
        width: 100%; }
  #play .wrapper .play .play-detail-top {
    width: 750px;
    height: 45px;
    background: url(../img/play/play_bg_top_sp.png) no-repeat center top;
    position: relative;
    top: 1px; }
  #play .wrapper .play .play-detail {
    position: relative;
    width: 750px;
    margin: 0 auto; }
    #play .wrapper .play .play-detail h2 {
      width: 670px;
      margin: 0 0 40px; }
      #play .wrapper .play .play-detail h2 img {
        width: 100%; }
    #play .wrapper .play .play-detail.play-detail01 {
      background: url(../img/bg_gray.png) repeat center top; }
    #play .wrapper .play .play-detail.play-detail02 {
      background: url(../img/bg_black.png) repeat center top; }
    #play .wrapper .play .play-detail .play-detail-bg .bg-detail {
      opacity: 1;
      position: absolute;
      top: -47px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 750px;
      height: 1413px;
      background: url(../img/play/play_bg_mask_sp.png) no-repeat center top; }
    #play .wrapper .play .play-detail p {
      position: relative;
      padding: 20px 35px 170px;
      text-align: left;
      color: #fff;
      font-size: 28px; }
      #play .wrapper .play .play-detail p span {
        color: #ad0000; }
      #play .wrapper .play .play-detail p.first {
        opacity: 0;
        -webkit-transition: 0.5s all;
        -o-transition: 0.5s all;
        transition: 0.5s all; }
        #play .wrapper .play .play-detail p.first.show {
          opacity: 1;
          -webkit-transition: 0.5s all;
          -o-transition: 0.5s all;
          transition: 0.5s all; }
    #play .wrapper .play .play-detail ul {
      position: relative;
      width: 750px;
      margin: 0 auto;
      overflow: hidden;
      opacity: 0;
      -webkit-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s; }
      #play .wrapper .play .play-detail ul.show {
        opacity: 1;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s; }
      #play .wrapper .play .play-detail ul li {
        float: none;
        width: 691px;
        margin: 0 auto; }
        #play .wrapper .play .play-detail ul li img {
          width: 100%; }
    #play .wrapper .play .play-detail .monster {
      padding: 0 0 100px; }
      #play .wrapper .play .play-detail .monster .monster-img {
        position: relative;
        display: inline-block;
        margin: 0 0 0 -40px; }
        #play .wrapper .play .play-detail .monster .monster-img p {
          position: relative;
          padding: 0;
          z-index: 2;
          opacity: 1;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s;
          width: 491px;
          margin: 0 auto; }
        #play .wrapper .play .play-detail .monster .monster-img .monster-bg {
          position: absolute;
          top: 170px;
          left: 170px;
          width: 728px;
          height: 489px;
          background: url(../img/play/monster_bg.png) no-repeat;
          opacity: 1; }
        #play .wrapper .play .play-detail .monster .monster-img .img {
          width: 770px;
          margin: -160px 0 0 70px;
          position: relative;
          z-index: 1; }
          #play .wrapper .play .play-detail .monster .monster-img .img img {
            width: 100%; }
      #play .wrapper .play .play-detail .monster .monster-txt {
        position: relative;
        width: 710px;
        float: none;
        margin: 0 auto 30px; }
        #play .wrapper .play .play-detail .monster .monster-txt p {
          text-align: left;
          padding: 0;
          color: #000;
          opacity: 0;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s; }
          #play .wrapper .play .play-detail .monster .monster-txt p.anime {
            opacity: 1;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
    #play .wrapper .play .play-detail .kaji {
      width: 710px;
      margin: 0 auto; }
      #play .wrapper .play .play-detail .kaji.anime p {
        opacity: 1;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s; }
      #play .wrapper .play .play-detail .kaji h2 {
        padding: 100px 0 0 0; }
      #play .wrapper .play .play-detail .kaji p {
        opacity: 0;
        padding: 0;
        text-align: left;
        color: #000;
        margin: 0 0 52px; }
      #play .wrapper .play .play-detail .kaji .img {
        width: 683px;
        margin: 0 auto;
        padding: 0 0 100px; }
  #play .wrapper .footer {
    background: url(../img/foot_sp.png) no-repeat center bottom, url(../img/footer_bg.jpg) repeat;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 0 20px; }
    #play .wrapper .footer .footer-top {
      background: url(../img/footer_top_sp.png) repeat-x center top, url(../img/bg_black.png) repeat-x center top;
      height: 200px; }
    #play .wrapper .footer .spec {
      padding: 0 20px;
      position: relative; }
      #play .wrapper .footer .spec h2 {
        opacity: 0;
        margin: 0 0 60px; }
      #play .wrapper .footer .spec .spec-detail {
        opacity: 1 !important;
        -webkit-animation: none !important;
        animation: none !important; }
        #play .wrapper .footer .spec .spec-detail::-moz-selection {
          color: #000000;
          background: #cd1f1f; }
        #play .wrapper .footer .spec .spec-detail::selection {
          color: #000000;
          background: #cd1f1f; }
      #play .wrapper .footer .spec dl {
        color: #fff;
        font-size: 26px; }
        #play .wrapper .footer .spec dl dt {
          float: left;
          width: 218px;
          border-right: 2px solid #fff; }
          #play .wrapper .footer .spec dl dt::-moz-selection {
            color: #000000;
            background: #cd1f1f; }
          #play .wrapper .footer .spec dl dt::selection {
            color: #000000;
            background: #cd1f1f; }
        #play .wrapper .footer .spec dl dd {
          margin: 0 0 20px 245px; }
          #play .wrapper .footer .spec dl dd::-moz-selection {
            color: #000000;
            background: #cd1f1f; }
          #play .wrapper .footer .spec dl dd::selection {
            color: #000000;
            background: #cd1f1f; }
    #play .wrapper .footer .tokuten {
      margin: 60px 20px;
      border: 1px solid #fff; }
      #play .wrapper .footer .tokuten p {
        padding: 30px 0 0;
        text-align: center;
        font-size: 22px;
        color: #fff;
        margin: 0 0 30px; }
        #play .wrapper .footer .tokuten p span {
          color: #00c6ff;
          font-size: 26px; }
      #play .wrapper .footer .tokuten ul.download li {
        width: 498px;
        height: 158px;
        float: left;
        margin: 0 auto; }
        #play .wrapper .footer .tokuten ul.download li.ps {
          margin-bottom: 20px;
          margin-right: 16px; }
          #play .wrapper .footer .tokuten ul.download li.ps a {
            background: url(../img/ps_btn.png) no-repeat;
            background-size: 100%;
            width: 498px;
            height: 158px;
            display: block; }
        #play .wrapper .footer .tokuten ul.download li.nd a {
          background: url(../img/nin_btn.png) no-repeat;
          background-size: 100%;
          width: 498px;
          height: 158px;
          display: block; }
        #play .wrapper .footer .tokuten ul.download li img {
          width: 100%; }
    #play .wrapper .footer .download {
      overflow: hidden;
      width: 508px;
      margin: 0 auto 25px; }
      #play .wrapper .footer .download ul li {
        width: 245px;
        height: 75px;
        float: left; }
        #play .wrapper .footer .download ul li.ps {
          margin-right: 16px; }
          #play .wrapper .footer .download ul li.ps a {
            background: url(../img/ps_btn.png) no-repeat;
            background-size: 100%;
            width: 245px;
            height: 75px;
            display: block;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
            #play .wrapper .footer .download ul li.ps a:hover {
              background: url(../img/ps_btn_hover.png) no-repeat;
              background-size: 100%;
              width: 245px;
              height: 75px;
              display: block;
              -webkit-transition: all 0.5s;
              -o-transition: all 0.5s;
              transition: all 0.5s; }
        #play .wrapper .footer .download ul li.nd a {
          background: url(../img/nin_btn.png) no-repeat;
          background-size: 100%;
          width: 245px;
          height: 75px;
          display: block;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s; }
          #play .wrapper .footer .download ul li.nd a:hover {
            background: url(../img/nin_btn_hover.png) no-repeat;
            background-size: 100%;
            width: 245px;
            height: 75px;
            display: block;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
        #play .wrapper .footer .download ul li img {
          width: 100%; }
    #play .wrapper .footer .share {
      position: relative; }
      #play .wrapper .footer .share p {
        text-align: center;
        margin: 60px 0 40px; }
        #play .wrapper .footer .share p a {
          display: block;
          width: 177px;
          height: 169px;
          margin: 0 auto;
          background: url(../img/tw_share_off.png) no-repeat center;
          background-size: 100%;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
    #play .wrapper .footer .copyright {
      position: relative;
      text-align: center;
      font-size: 24px;
      color: #fff; }
      #play .wrapper .footer .copyright::-moz-selection {
        color: #000000;
        background: #cd1f1f; }
      #play .wrapper .footer .copyright::selection {
        color: #000000;
        background: #cd1f1f; }
    #play .wrapper .footer .footer_bottom .light {
      position: absolute;
      bottom: 0;
      z-index: -1;
      opacity: 0;
      -webkit-animation: footerFade 4s infinite forwards;
      animation: footerFade 4s infinite forwards; }
  #play .wrapper footer dl::-moz-selection {
    color: #000000;
    background: #cd1f1f; }
  #play .wrapper footer dl::selection {
    color: #000000;
    background: #cd1f1f; }

#system p {
  color: #222222;
  line-height: 2; }

#system .wrapper {
  position: relative;
  overflow: hidden;
  z-index: 999;
  opacity: 0; }
  #system .wrapper .bg-sprite > * {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 100% 100% !important;
    opacity: 1; }
  #system .wrapper .anime .bg-sprite > * {
    opacity: 1;
    -webkit-transition: opacity 1400ms;
    -o-transition: opacity 1400ms;
    transition: opacity 1400ms; }
    #system .wrapper .anime .bg-sprite > *:nth-child(1) {
      -webkit-transition-delay: 83ms;
      -o-transition-delay: 83ms;
      transition-delay: 83ms; }
    #system .wrapper .anime .bg-sprite > *:nth-child(2) {
      -webkit-transition-delay: 166ms;
      -o-transition-delay: 166ms;
      transition-delay: 166ms; }
    #system .wrapper .anime .bg-sprite > *:nth-child(3) {
      -webkit-transition-delay: 249ms;
      -o-transition-delay: 249ms;
      transition-delay: 249ms; }
    #system .wrapper .anime .bg-sprite > *:nth-child(4) {
      -webkit-transition-delay: 332ms;
      -o-transition-delay: 332ms;
      transition-delay: 332ms; }
    #system .wrapper .anime .bg-sprite > *:nth-child(5) {
      -webkit-transition-delay: 415ms;
      -o-transition-delay: 415ms;
      transition-delay: 415ms; }
    #system .wrapper .anime .bg-sprite > *:nth-child(6) {
      -webkit-transition-delay: 498ms;
      -o-transition-delay: 498ms;
      transition-delay: 498ms; }
  #system .wrapper .contents {
    background: url(../img/bg.jpg) repeat;
    width: 100%;
    min-width: auto; }
  #system .wrapper .system {
    padding: 0; }
    #system .wrapper .system .bottom-bg {
      height: 150px;
      -webkit-transform: scale(1, -1);
      -ms-transform: scale(1, -1);
      transform: scale(1, -1);
      background: url(../img/footer_top.png) repeat-x center bottom;
      position: relative;
      z-index: 1; }
    #system .wrapper .system .system-area {
      padding: 150px 0 0;
      position: relative; }
      #system .wrapper .system .system-area .bg-system-container {
        position: absolute;
        width: 1280px;
        height: 1192px;
        top: 0;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0); }
        #system .wrapper .system .system-area .bg-system-container .bg-system.bg-system01 {
          background: url(../img/bg_story_sp01.png) no-repeat center top; }
        #system .wrapper .system .system-area .bg-system-container .bg-system.bg-system02 {
          background: url(../img/bg_story_sp02.png) no-repeat center top; }
    #system .wrapper .system .system-title {
      width: 750px;
      margin: 0 auto; }
      #system .wrapper .system .system-title.anime .mask-title {
        -webkit-animation-delay: 400ms;
        animation-delay: 400ms; }
      #system .wrapper .system .system-title h1 {
        width: 643px;
        text-align: left;
        margin: 0 0 50px;
        left: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none; }
        #system .wrapper .system .system-title h1 img {
          width: 100%; }
    #system .wrapper .system .system-detail-top {
      width: 750px;
      height: 45px;
      background: url(../img/play/play_bg_top_sp.png) no-repeat center top;
      position: relative;
      top: 1px; }
    #system .wrapper .system .system-detail {
      position: relative;
      width: 750px;
      margin: 0 auto; }
      #system .wrapper .system .system-detail.system-detail01 {
        background: url(../img/bg_gray.png) repeat center top;
        overflow: hidden;
        padding: 0 0 85px; }
        #system .wrapper .system .system-detail.system-detail01 .system-inner {
          padding: 62px 20px 0; }
          #system .wrapper .system .system-detail.system-detail01 .system-inner h2 {
            width: 670px; }
            #system .wrapper .system .system-detail.system-detail01 .system-inner h2 img {
              width: 100%; }
          #system .wrapper .system .system-detail.system-detail01 .system-inner .img {
            width: 839px;
            float: none;
            margin: 0 0 0 -40px;
            padding: 0;
            opacity: 0; }
            #system .wrapper .system .system-detail.system-detail01 .system-inner .img.anime {
              opacity: 1;
              -webkit-transition: all 1s;
              -o-transition: all 1s;
              transition: all 1s;
              -webkit-transition-delay: 500ms;
              -o-transition-delay: 500ms;
              transition-delay: 500ms; }
            #system .wrapper .system .system-detail.system-detail01 .system-inner .img img {
              width: 100%; }
          #system .wrapper .system .system-detail.system-detail01 .system-inner .text {
            padding: 40px 0 0;
            opacity: 0;
            font-size: 28px; }
            #system .wrapper .system .system-detail.system-detail01 .system-inner .text.anime {
              opacity: 1;
              -webkit-transition: all 1s;
              -o-transition: all 1s;
              transition: all 1s;
              -webkit-transition-delay: 500ms;
              -o-transition-delay: 500ms;
              transition-delay: 500ms; }
      #system .wrapper .system .system-detail.system-detail02 {
        overflow: hidden;
        background: url(../img/bg_black.png) repeat; }
        #system .wrapper .system .system-detail.system-detail02 .system-inner {
          overflow: hidden;
          padding: 100px 20px 0; }
          #system .wrapper .system .system-detail.system-detail02 .system-inner h2 {
            width: 670px; }
            #system .wrapper .system .system-detail.system-detail02 .system-inner h2 img {
              width: 100%; }
          #system .wrapper .system .system-detail.system-detail02 .system-inner .img {
            width: 828px;
            float: none;
            margin: 0 0 0 -55px;
            padding: 0;
            opacity: 0; }
            #system .wrapper .system .system-detail.system-detail02 .system-inner .img.anime {
              opacity: 1;
              -webkit-transition: all 1s;
              -o-transition: all 1s;
              transition: all 1s; }
            #system .wrapper .system .system-detail.system-detail02 .system-inner .img img {
              width: 100%; }
          #system .wrapper .system .system-detail.system-detail02 .system-inner .text {
            padding: 40px 0 0;
            opacity: 0;
            font-size: 28px; }
            #system .wrapper .system .system-detail.system-detail02 .system-inner .text.anime {
              opacity: 1;
              -webkit-transition: all 1s;
              -o-transition: all 1s;
              transition: all 1s; }
        #system .wrapper .system .system-detail.system-detail02 .monster {
          overflow: hidden;
          margin: -270px 0 0; }
          #system .wrapper .system .system-detail.system-detail02 .monster .monster-img {
            position: relative;
            float: none;
            padding: 0 0 0 82px; }
            #system .wrapper .system .system-detail.system-detail02 .monster .monster-img .img {
              width: 521px;
              margin: -50px auto 0;
              padding: 100px 0 60px;
              left: -20px;
              position: relative;
              z-index: 1; }
              #system .wrapper .system .system-detail.system-detail02 .monster .monster-img .img img {
                width: 100%; }
            #system .wrapper .system .system-detail.system-detail02 .monster .monster-img .monster_bg {
              width: 480px;
              height: 330px;
              position: absolute;
              top: 380px;
              left: 160px;
              background: url(../img/system/monster_bg.png) no-repeat;
              background-size: 100%; }
          #system .wrapper .system .system-detail.system-detail02 .monster .text {
            font-size: 28px;
            padding: 0 20px; }
            #system .wrapper .system .system-detail.system-detail02 .monster .text p {
              padding: 0; }
          #system .wrapper .system .system-detail.system-detail02 .monster .monster-ss {
            width: 1097px;
            float: none;
            margin: -90px 0 -90px -325px;
            padding: 0 20px 0 0;
            opacity: 0; }
            #system .wrapper .system .system-detail.system-detail02 .monster .monster-ss.anime {
              opacity: 1;
              -webkit-transition: all 1s;
              -o-transition: all 1s;
              transition: all 1s; }
            #system .wrapper .system .system-detail.system-detail02 .monster .monster-ss img {
              width: 100%; }
      #system .wrapper .system .system-detail.system-detail03 {
        background: url(../img/bg_gray.png) repeat;
        overflow: hidden;
        padding: 0 0 80px;
        position: relative;
        z-index: 1; }
        #system .wrapper .system .system-detail.system-detail03 .system-inner .img {
          width: 999px;
          float: none;
          padding: 0;
          margin: 0 0 0 -110px;
          opacity: 0; }
          #system .wrapper .system .system-detail.system-detail03 .system-inner .img.anime {
            opacity: 1;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            -webkit-transition-delay: 500ms;
            -o-transition-delay: 500ms;
            transition-delay: 500ms; }
          #system .wrapper .system .system-detail.system-detail03 .system-inner .img img {
            width: 100%; }
        #system .wrapper .system .system-detail.system-detail03 .system-inner .text {
          float: none;
          padding: 100px 20px 0;
          opacity: 0; }
          #system .wrapper .system .system-detail.system-detail03 .system-inner .text.anime {
            opacity: 1;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            -webkit-transition-delay: 500ms;
            -o-transition-delay: 500ms;
            transition-delay: 500ms; }
          #system .wrapper .system .system-detail.system-detail03 .system-inner .text p {
            padding: 40px 0 0;
            font-size: 28px; }
          #system .wrapper .system .system-detail.system-detail03 .system-inner .text h2 {
            width: 670px; }
            #system .wrapper .system .system-detail.system-detail03 .system-inner .text h2 img {
              width: 100%; }
      #system .wrapper .system .system-detail p {
        position: relative;
        padding: 100px 0;
        text-align: left;
        color: #222;
        font-size: 18px; }
        #system .wrapper .system .system-detail p span {
          color: #ac0000; }
        #system .wrapper .system .system-detail p.first {
          width: 485px;
          margin: 0 auto; }
      #system .wrapper .system .system-detail ul {
        position: relative;
        width: 907px;
        margin: 0 auto 100px;
        overflow: hidden; }
        #system .wrapper .system .system-detail ul li {
          float: left; }
          #system .wrapper .system .system-detail ul li:nth-child(1) {
            margin: 0 15px 0 0; }
    #system .wrapper .system .bottom-body-bg {
      width: 1004px;
      height: 192px;
      margin: -140px auto 0;
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      background: url(../img/inner_bg_top.png) no-repeat; }
  #system .wrapper .footer {
    background: url(../img/foot_sp.png) no-repeat center bottom, url(../img/footer_bg.jpg) repeat;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 0 20px; }
    #system .wrapper .footer .footer-top {
      background: url(../img/footer_top_sp.png) repeat-x center top, url(../img/feature_bg.jpg) repeat-x center top;
      height: 200px; }
    #system .wrapper .footer .spec {
      padding: 0 20px;
      position: relative; }
      #system .wrapper .footer .spec h2 {
        opacity: 0;
        margin: 0 0 60px; }
      #system .wrapper .footer .spec .spec-detail {
        opacity: 1 !important;
        -webkit-animation: none !important;
        animation: none !important; }
        #system .wrapper .footer .spec .spec-detail::-moz-selection {
          color: #000000;
          background: #cd1f1f; }
        #system .wrapper .footer .spec .spec-detail::selection {
          color: #000000;
          background: #cd1f1f; }
      #system .wrapper .footer .spec dl {
        color: #fff;
        font-size: 26px; }
        #system .wrapper .footer .spec dl dt {
          float: left;
          width: 218px;
          border-right: 2px solid #fff; }
          #system .wrapper .footer .spec dl dt::-moz-selection {
            color: #000000;
            background: #cd1f1f; }
          #system .wrapper .footer .spec dl dt::selection {
            color: #000000;
            background: #cd1f1f; }
        #system .wrapper .footer .spec dl dd {
          margin: 0 0 20px 245px; }
          #system .wrapper .footer .spec dl dd::-moz-selection {
            color: #000000;
            background: #cd1f1f; }
          #system .wrapper .footer .spec dl dd::selection {
            color: #000000;
            background: #cd1f1f; }
    #system .wrapper .footer .tokuten {
      margin: 60px 20px;
      border: 1px solid #fff; }
      #system .wrapper .footer .tokuten p {
        padding: 30px 0 0;
        text-align: center;
        font-size: 22px;
        color: #fff;
        margin: 0 0 30px; }
        #system .wrapper .footer .tokuten p span {
          color: #00c6ff;
          font-size: 26px; }
      #system .wrapper .footer .tokuten ul.download li {
        width: 498px;
        height: 158px;
        float: left;
        margin: 0 auto; }
        #system .wrapper .footer .tokuten ul.download li.ps {
          margin-bottom: 20px;
          margin-right: 16px; }
          #system .wrapper .footer .tokuten ul.download li.ps a {
            background: url(../img/ps_btn.png) no-repeat;
            background-size: 100%;
            width: 498px;
            height: 158px;
            display: block; }
        #system .wrapper .footer .tokuten ul.download li.nd a {
          background: url(../img/nin_btn.png) no-repeat;
          background-size: 100%;
          width: 498px;
          height: 158px;
          display: block; }
        #system .wrapper .footer .tokuten ul.download li img {
          width: 100%; }
    #system .wrapper .footer .download {
      overflow: hidden;
      width: 508px;
      margin: 0 auto 25px; }
      #system .wrapper .footer .download ul li {
        width: 245px;
        height: 75px;
        float: left; }
        #system .wrapper .footer .download ul li.ps {
          margin-right: 16px; }
          #system .wrapper .footer .download ul li.ps a {
            background: url(../img/ps_btn.png) no-repeat;
            background-size: 100%;
            width: 245px;
            height: 75px;
            display: block;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
            #system .wrapper .footer .download ul li.ps a:hover {
              background: url(../img/ps_btn_hover.png) no-repeat;
              background-size: 100%;
              width: 245px;
              height: 75px;
              display: block;
              -webkit-transition: all 0.5s;
              -o-transition: all 0.5s;
              transition: all 0.5s; }
        #system .wrapper .footer .download ul li.nd a {
          background: url(../img/nin_btn.png) no-repeat;
          background-size: 100%;
          width: 245px;
          height: 75px;
          display: block;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s; }
          #system .wrapper .footer .download ul li.nd a:hover {
            background: url(../img/nin_btn_hover.png) no-repeat;
            background-size: 100%;
            width: 245px;
            height: 75px;
            display: block;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
        #system .wrapper .footer .download ul li img {
          width: 100%; }
    #system .wrapper .footer .share {
      position: relative; }
      #system .wrapper .footer .share p {
        text-align: center;
        margin: 60px 0 40px; }
        #system .wrapper .footer .share p a {
          display: block;
          width: 177px;
          height: 169px;
          margin: 0 auto;
          background: url(../img/tw_share_off.png) no-repeat center;
          background-size: 100%;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
    #system .wrapper .footer .copyright {
      position: relative;
      text-align: center;
      font-size: 24px;
      color: #fff; }
      #system .wrapper .footer .copyright::-moz-selection {
        color: #000000;
        background: #cd1f1f; }
      #system .wrapper .footer .copyright::selection {
        color: #000000;
        background: #cd1f1f; }
    #system .wrapper .footer .footer_bottom .light {
      position: absolute;
      bottom: 0;
      z-index: -1;
      opacity: 0;
      -webkit-animation: footerFade 4s infinite forwards;
      animation: footerFade 4s infinite forwards; }
  #system .wrapper footer dl::-moz-selection {
    color: #000000;
    background: #cd1f1f; }
  #system .wrapper footer dl::selection {
    color: #000000;
    background: #cd1f1f; }

#action p {
  line-height: 2; }

#action .wrapper {
  position: relative;
  overflow: hidden;
  z-index: 999;
  opacity: 0; }
  #action .wrapper .bg-sprite > * {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 100% 100% !important;
    opacity: 1; }
  #action .wrapper .anime .bg-sprite > * {
    opacity: 1;
    -webkit-transition: opacity 1400ms;
    -o-transition: opacity 1400ms;
    transition: opacity 1400ms; }
    #action .wrapper .anime .bg-sprite > *:nth-child(1) {
      -webkit-transition-delay: 83ms;
      -o-transition-delay: 83ms;
      transition-delay: 83ms; }
    #action .wrapper .anime .bg-sprite > *:nth-child(2) {
      -webkit-transition-delay: 166ms;
      -o-transition-delay: 166ms;
      transition-delay: 166ms; }
    #action .wrapper .anime .bg-sprite > *:nth-child(3) {
      -webkit-transition-delay: 249ms;
      -o-transition-delay: 249ms;
      transition-delay: 249ms; }
    #action .wrapper .anime .bg-sprite > *:nth-child(4) {
      -webkit-transition-delay: 332ms;
      -o-transition-delay: 332ms;
      transition-delay: 332ms; }
    #action .wrapper .anime .bg-sprite > *:nth-child(5) {
      -webkit-transition-delay: 415ms;
      -o-transition-delay: 415ms;
      transition-delay: 415ms; }
    #action .wrapper .anime .bg-sprite > *:nth-child(6) {
      -webkit-transition-delay: 498ms;
      -o-transition-delay: 498ms;
      transition-delay: 498ms; }
  #action .wrapper .contents {
    background: url(../img/bg.jpg) repeat;
    width: 100%;
    min-width: 750px; }
  #action .wrapper .action .bottom-bg {
    height: 150px;
    -webkit-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
    background: url(../img/footer_top.png) repeat-x center bottom;
    position: relative;
    z-index: 1; }
  #action .wrapper .action .action-area {
    padding: 150px 0 0;
    position: relative; }
    #action .wrapper .action .action-area .bg-action-container {
      position: absolute;
      width: 1280px;
      height: 1192px;
      top: 0;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0); }
      #action .wrapper .action .action-area .bg-action-container .bg-action.bg-action01 {
        background: url(../img/bg_story_sp01.png) no-repeat center top; }
      #action .wrapper .action .action-area .bg-action-container .bg-action.bg-action02 {
        background: url(../img/bg_story_sp02.png) no-repeat center top; }
  #action .wrapper .action .action-title {
    width: 750px;
    margin: 0 auto; }
    #action .wrapper .action .action-title.anime .mask-title {
      -webkit-animation-delay: 400ms;
      animation-delay: 400ms; }
    #action .wrapper .action .action-title h1 {
      width: 643px;
      text-align: left;
      margin: 0 0 50px;
      left: auto;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none; }
      #action .wrapper .action .action-title h1 img {
        width: 100%; }
  #action .wrapper .action .action-detail-top {
    width: 750px;
    height: 45px;
    background: url(../img/play/play_bg_top_sp.png) no-repeat center top;
    position: relative;
    top: 1px; }
  #action .wrapper .action .action-detail {
    position: relative;
    width: 750px;
    background: url(../img/bg_gray.png) repeat; }
    #action .wrapper .action .action-detail p {
      color: #222;
      font-size: 28px; }
      #action .wrapper .action .action-detail p span {
        color: #ad0000; }
        #action .wrapper .action .action-detail p span.big {
          font-size: 48px; }
        #action .wrapper .action .action-detail p span.small {
          font-size: 30px; }
    #action .wrapper .action .action-detail.action-detail01 p {
      color: #fff;
      font-size: 28px;
      text-shadow: #000 1px 1px 5px, #000 -1px 1px 5px, #000 1px -1px 5px, #000 -1px -1px 5px; }
    #action .wrapper .action .action-detail.action-detail01 .action-inner {
      padding: 0 20px 0;
      position: relative; }
      #action .wrapper .action .action-detail.action-detail01 .action-inner h3 {
        position: relative;
        height: 57px;
        font-size: 48px;
        margin-bottom: 25px;
        background: -webkit-gradient(linear, left bottom, left top, from(#006fff), color-stop(70%, #00b4ff));
        background: -webkit-linear-gradient(bottom, #006fff 0%, #00b4ff 70%);
        background: -o-linear-gradient(bottom, #006fff 0%, #00b4ff 70%);
        background: linear-gradient(to top, #006fff 0%, #00b4ff 70%);
        -webkit-background-clip: text;
        color: transparent; }
      @media all and (-ms-high-contrast: none) {
        #action .wrapper .action .action-detail.action-detail01 .action-inner h3 {
          background: none !important;
          color: #006fff !important; } }
      #action .wrapper .action .action-detail.action-detail01 .action-inner .text {
        font-size: 28px;
        margin: 0 0 45px;
        padding: 130px 0 0;
        opacity: 0;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s; }
        #action .wrapper .action .action-detail.action-detail01 .action-inner .text.anime {
          opacity: 1;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
      #action .wrapper .action .action-detail.action-detail01 .action-inner .action-bg {
        background: url(../img/action/action_bg_sp.png) no-repeat;
        width: 750px;
        height: 803px;
        background-size: 100%;
        position: absolute;
        top: -60px;
        left: 0; }
      #action .wrapper .action .action-detail.action-detail01 .action-inner .ss {
        position: relative;
        z-index: 1;
        margin: 0 0 0 -70px;
        width: 750px;
        opacity: 0;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s; }
        #action .wrapper .action .action-detail.action-detail01 .action-inner .ss.anime {
          opacity: 1;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
      #action .wrapper .action .action-detail.action-detail01 .action-inner .chara {
        position: absolute;
        top: -49px;
        right: 112px;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s; }
    #action .wrapper .action .action-detail.action-detail02 {
      background: url(../img/bg_black.png) repeat; }
      #action .wrapper .action .action-detail.action-detail02 .action-inner {
        padding: 100px 20px 0; }
        #action .wrapper .action .action-detail.action-detail02 .action-inner h2 {
          width: 670px; }
          #action .wrapper .action .action-detail.action-detail02 .action-inner h2 img {
            width: 100%; }
        #action .wrapper .action .action-detail.action-detail02 .action-inner .img {
          width: 503px;
          float: left;
          padding: 0; }
          #action .wrapper .action .action-detail.action-detail02 .action-inner .img img {
            width: 100%; }
        #action .wrapper .action .action-detail.action-detail02 .action-inner .text {
          padding: 40px 0 65px;
          font-size: 28px;
          opacity: 0;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
          #action .wrapper .action .action-detail.action-detail02 .action-inner .text.anime {
            opacity: 1;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s; }
        #action .wrapper .action .action-detail.action-detail02 .action-inner .katana {
          z-index: 2;
          width: 750px;
          margin: 0 0 0 -20px;
          padding: 0 0 90px;
          opacity: 0;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
          #action .wrapper .action .action-detail.action-detail02 .action-inner .katana.anime {
            opacity: 1;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s; }
        #action .wrapper .action .action-detail.action-detail02 .action-inner .katana_bg {
          width: 486px;
          height: 415px;
          opacity: 0.3;
          background: url(../img/action/katana_bg.png) no-repeat;
          position: absolute;
          top: 510px;
          left: 110px; }
      #action .wrapper .action .action-detail.action-detail02 .monster {
        overflow: hidden;
        margin: -270px 0 0; }
        #action .wrapper .action .action-detail.action-detail02 .monster .monster-img {
          position: relative;
          float: left;
          padding: 0 0 0 82px; }
          #action .wrapper .action .action-detail.action-detail02 .monster .monster-img .img {
            width: 417px;
            position: relative;
            z-index: 1; }
            #action .wrapper .action .action-detail.action-detail02 .monster .monster-img .img img {
              width: 100%; }
          #action .wrapper .action .action-detail.action-detail02 .monster .monster-img .monster_bg {
            width: 426px;
            height: 290px;
            position: absolute;
            top: 300px;
            background: url(../img/system/monster_bg.png) no-repeat;
            background-size: 100%; }
        #action .wrapper .action .action-detail.action-detail02 .monster .monster-ss {
          width: 657px;
          float: right;
          margin: -470px 0 0;
          padding: 0 20px 0 0; }
          #action .wrapper .action .action-detail.action-detail02 .monster .monster-ss img {
            width: 100%; }
    #action .wrapper .action .action-detail.action-detail03 {
      background: url(../img/bg_gray.png) repeat;
      overflow: hidden;
      padding: 0 0 80px;
      position: relative;
      z-index: 1; }
      #action .wrapper .action .action-detail.action-detail03 .action-inner {
        padding: 100px 20px 0;
        position: relative; }
        #action .wrapper .action .action-detail.action-detail03 .action-inner h2 {
          width: 670px; }
          #action .wrapper .action .action-detail.action-detail03 .action-inner h2 img {
            width: 100%; }
        #action .wrapper .action .action-detail.action-detail03 .action-inner .detail {
          opacity: 0;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
          #action .wrapper .action .action-detail.action-detail03 .action-inner .detail.anime {
            opacity: 1;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s; }
        #action .wrapper .action .action-detail.action-detail03 .action-inner .img {
          position: absolute;
          width: 590px;
          float: left;
          padding: 0;
          margin: 0 0 0 -30px; }
          #action .wrapper .action .action-detail.action-detail03 .action-inner .img img {
            width: 100%; }
        #action .wrapper .action .action-detail.action-detail03 .action-inner .ss-min {
          width: 748px;
          margin: 0 0 0 -30px; }
          #action .wrapper .action .action-detail.action-detail03 .action-inner .ss-min img {
            width: 100%; }
        #action .wrapper .action .action-detail.action-detail03 .action-inner .text {
          padding: 40px 0 0 0;
          margin-right: 20px;
          font-size: 28px; }
          #action .wrapper .action .action-detail.action-detail03 .action-inner .text p {
            padding: 0; }
          #action .wrapper .action .action-detail.action-detail03 .action-inner .text h2 {
            width: 670px; }
            #action .wrapper .action .action-detail.action-detail03 .action-inner .text h2 img {
              width: 100%; }
          #action .wrapper .action .action-detail.action-detail03 .action-inner .text.left {
            margin-right: 0; }
    #action .wrapper .action .action-detail p {
      position: relative;
      text-align: left;
      font-size: 28px; }
      #action .wrapper .action .action-detail p.first {
        width: 485px;
        margin: 0 auto; }
    #action .wrapper .action .action-detail ul {
      position: relative;
      width: 907px;
      margin: 0 auto 100px;
      overflow: hidden; }
      #action .wrapper .action .action-detail ul li {
        float: left; }
        #action .wrapper .action .action-detail ul li:nth-child(1) {
          margin: 0 15px 0 0; }
  #action .wrapper .action .bottom-body-bg {
    width: 1004px;
    height: 192px;
    margin: -140px auto 0;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    background: url(../img/inner_bg_top.png) no-repeat; }
  #action .wrapper .footer {
    background: url(../img/foot_sp.png) no-repeat center bottom, url(../img/footer_bg.jpg) repeat;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 0 20px; }
    #action .wrapper .footer .footer-top {
      background: url(../img/footer_top_sp.png) repeat-x center top, url(../img/feature_bg.jpg) repeat-x center top;
      height: 200px; }
    #action .wrapper .footer .spec {
      padding: 0 20px;
      position: relative; }
      #action .wrapper .footer .spec h2 {
        opacity: 0;
        margin: 0 0 60px; }
      #action .wrapper .footer .spec .spec-detail {
        opacity: 1 !important;
        -webkit-animation: none !important;
        animation: none !important; }
        #action .wrapper .footer .spec .spec-detail::-moz-selection {
          color: #000000;
          background: #cd1f1f; }
        #action .wrapper .footer .spec .spec-detail::selection {
          color: #000000;
          background: #cd1f1f; }
      #action .wrapper .footer .spec dl {
        color: #fff;
        font-size: 26px; }
        #action .wrapper .footer .spec dl dt {
          float: left;
          width: 218px;
          border-right: 2px solid #fff; }
          #action .wrapper .footer .spec dl dt::-moz-selection {
            color: #000000;
            background: #cd1f1f; }
          #action .wrapper .footer .spec dl dt::selection {
            color: #000000;
            background: #cd1f1f; }
        #action .wrapper .footer .spec dl dd {
          margin: 0 0 20px 245px; }
          #action .wrapper .footer .spec dl dd::-moz-selection {
            color: #000000;
            background: #cd1f1f; }
          #action .wrapper .footer .spec dl dd::selection {
            color: #000000;
            background: #cd1f1f; }
    #action .wrapper .footer .tokuten {
      margin: 60px 20px;
      border: 1px solid #fff; }
      #action .wrapper .footer .tokuten p {
        padding: 30px 0 0;
        text-align: center;
        font-size: 22px;
        color: #fff;
        margin: 0 0 30px; }
        #action .wrapper .footer .tokuten p span {
          color: #00c6ff;
          font-size: 26px; }
      #action .wrapper .footer .tokuten ul.download li {
        width: 498px;
        height: 158px;
        float: left;
        margin: 0 auto; }
        #action .wrapper .footer .tokuten ul.download li.ps {
          margin-bottom: 20px;
          margin-right: 16px; }
          #action .wrapper .footer .tokuten ul.download li.ps a {
            background: url(../img/ps_btn.png) no-repeat;
            background-size: 100%;
            width: 498px;
            height: 158px;
            display: block; }
        #action .wrapper .footer .tokuten ul.download li.nd a {
          background: url(../img/nin_btn.png) no-repeat;
          background-size: 100%;
          width: 498px;
          height: 158px;
          display: block; }
        #action .wrapper .footer .tokuten ul.download li img {
          width: 100%; }
    #action .wrapper .footer .download {
      overflow: hidden;
      width: 508px;
      margin: 0 auto 25px; }
      #action .wrapper .footer .download ul li {
        width: 245px;
        height: 75px;
        float: left; }
        #action .wrapper .footer .download ul li.ps {
          margin-right: 16px; }
          #action .wrapper .footer .download ul li.ps a {
            background: url(../img/ps_btn.png) no-repeat;
            background-size: 100%;
            width: 245px;
            height: 75px;
            display: block;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
            #action .wrapper .footer .download ul li.ps a:hover {
              background: url(../img/ps_btn_hover.png) no-repeat;
              background-size: 100%;
              width: 245px;
              height: 75px;
              display: block;
              -webkit-transition: all 0.5s;
              -o-transition: all 0.5s;
              transition: all 0.5s; }
        #action .wrapper .footer .download ul li.nd a {
          background: url(../img/nin_btn.png) no-repeat;
          background-size: 100%;
          width: 245px;
          height: 75px;
          display: block;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s; }
          #action .wrapper .footer .download ul li.nd a:hover {
            background: url(../img/nin_btn_hover.png) no-repeat;
            background-size: 100%;
            width: 245px;
            height: 75px;
            display: block;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
        #action .wrapper .footer .download ul li img {
          width: 100%; }
    #action .wrapper .footer .share {
      position: relative; }
      #action .wrapper .footer .share p {
        text-align: center;
        margin: 60px 0 40px; }
        #action .wrapper .footer .share p a {
          display: block;
          width: 177px;
          height: 169px;
          margin: 0 auto;
          background: url(../img/tw_share_off.png) no-repeat center;
          background-size: 100%;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
    #action .wrapper .footer .copyright {
      position: relative;
      text-align: center;
      font-size: 24px;
      color: #fff; }
      #action .wrapper .footer .copyright::-moz-selection {
        color: #000000;
        background: #cd1f1f; }
      #action .wrapper .footer .copyright::selection {
        color: #000000;
        background: #cd1f1f; }
    #action .wrapper .footer .footer_bottom .light {
      position: absolute;
      bottom: 0;
      z-index: -1;
      opacity: 0;
      -webkit-animation: footerFade 4s infinite forwards;
      animation: footerFade 4s infinite forwards; }
  #action .wrapper footer dl::-moz-selection {
    color: #000000;
    background: #cd1f1f; }
  #action .wrapper footer dl::selection {
    color: #000000;
    background: #cd1f1f; }

#management .wrapper {
  position: relative;
  overflow: hidden;
  z-index: 999;
  opacity: 0; }
  #management .wrapper p {
    line-height: 2; }
  #management .wrapper .bg-sprite > * {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 100% 100% !important;
    opacity: 1; }
  #management .wrapper .anime .bg-sprite > * {
    opacity: 1;
    -webkit-transition: opacity 1400ms;
    -o-transition: opacity 1400ms;
    transition: opacity 1400ms; }
    #management .wrapper .anime .bg-sprite > *:nth-child(1) {
      -webkit-transition-delay: 83ms;
      -o-transition-delay: 83ms;
      transition-delay: 83ms; }
    #management .wrapper .anime .bg-sprite > *:nth-child(2) {
      -webkit-transition-delay: 166ms;
      -o-transition-delay: 166ms;
      transition-delay: 166ms; }
    #management .wrapper .anime .bg-sprite > *:nth-child(3) {
      -webkit-transition-delay: 249ms;
      -o-transition-delay: 249ms;
      transition-delay: 249ms; }
    #management .wrapper .anime .bg-sprite > *:nth-child(4) {
      -webkit-transition-delay: 332ms;
      -o-transition-delay: 332ms;
      transition-delay: 332ms; }
    #management .wrapper .anime .bg-sprite > *:nth-child(5) {
      -webkit-transition-delay: 415ms;
      -o-transition-delay: 415ms;
      transition-delay: 415ms; }
    #management .wrapper .anime .bg-sprite > *:nth-child(6) {
      -webkit-transition-delay: 498ms;
      -o-transition-delay: 498ms;
      transition-delay: 498ms; }
  #management .wrapper .contents {
    background: url(../img/bg.jpg) repeat;
    width: 100%;
    min-width: 750px; }
  #management .wrapper .management .bottom-bg {
    height: 150px;
    -webkit-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
    background: url(../img/footer_top.png) repeat-x center bottom;
    position: relative;
    z-index: 1; }
  #management .wrapper .management .management-area {
    padding: 150px 0 0;
    position: relative; }
    #management .wrapper .management .management-area .bg-management-container {
      position: absolute;
      width: 1280px;
      height: 1192px;
      top: 0;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0); }
      #management .wrapper .management .management-area .bg-management-container .bg-management.bg-management01 {
        background: url(../img/bg_story_sp01.png) no-repeat center top; }
      #management .wrapper .management .management-area .bg-management-container .bg-management.bg-management02 {
        background: url(../img/bg_story_sp02.png) no-repeat center top; }
  #management .wrapper .management .management-title {
    width: 750px;
    margin: 0 auto; }
    #management .wrapper .management .management-title.anime .mask-title {
      -webkit-animation-delay: 400ms;
      animation-delay: 400ms; }
    #management .wrapper .management .management-title h1 {
      width: 643px;
      text-align: left;
      margin: 0 0 50px;
      left: auto;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none; }
      #management .wrapper .management .management-title h1 img {
        width: 100%; }
  #management .wrapper .management .management-detail-top {
    width: 750px;
    height: 45px;
    background: url(../img/play/play_bg_top_sp.png) no-repeat center top;
    position: relative;
    top: 1px; }
  #management .wrapper .management .management-detail {
    position: relative;
    width: 750px;
    background: url(../img/bg_gray.png) repeat; }
    #management .wrapper .management .management-detail p span {
      color: #ad0000; }
    #management .wrapper .management .management-detail.management-detail01 .management-inner {
      padding: 62px 52px 0;
      position: relative;
      padding: 0 0 1px; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner h2 {
        width: 670px;
        padding: 62px 0 0 20px; }
        #management .wrapper .management .management-detail.management-detail01 .management-inner h2 img {
          width: 100%; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner h3 {
        font-size: 28px;
        margin-bottom: 5px;
        position: relative;
        background: -webkit-gradient(linear, left bottom, left top, from(#006fff), to(#00b4ff));
        background: -webkit-linear-gradient(bottom, #006fff 0%, #00b4ff 100%);
        background: -o-linear-gradient(bottom, #006fff 0%, #00b4ff 100%);
        background: linear-gradient(to top, #006fff 0%, #00b4ff 100%);
        -webkit-background-clip: text;
        color: transparent; }
      @media all and (-ms-high-contrast: none) {
        #management .wrapper .management .management-detail.management-detail01 .management-inner h3 {
          background: none !important;
          color: #006fff !important; } }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .text {
        font-size: 20px;
        width: 670px;
        margin: 200px 0 40px; }
        #management .wrapper .management .management-detail.management-detail01 .management-inner .text p {
          margin: 0 0 30px;
          text-shadow: none; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area {
        margin: 0 0 85px; }
        #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area .text {
          opacity: 0; }
        #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area.anime .text {
          opacity: 1;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area01 {
        padding: 0 0 0 100px; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area02 {
        padding: 50px 0 0 20px; }
        #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area02 .text {
          margin: 0; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area03 {
        padding: 0 0 0 320px;
        margin: -40px 0 85px; }
        #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area03 .text {
          margin: 0;
          padding: 0 0 0 40px; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area04 {
        padding: 30px 0 0 24px; }
        #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area04 .text {
          margin: 0; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .management-bg.bg01 {
        background: url(../img/management/manage_bg_01.png) no-repeat;
        width: 844px;
        height: 704px;
        background-size: 100%;
        position: absolute;
        top: 160px;
        left: -116px; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .management-bg.bg02 {
        background: url(../img/management/manage_bg_02.png) no-repeat;
        width: 957px;
        height: 975px;
        background-size: 100%;
        position: absolute;
        top: 730px;
        left: -85px; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .management-bg.bg03 {
        background: url(../img/management/manage_bg_03.png) no-repeat;
        width: 875px;
        height: 747px;
        background-size: 100%;
        position: absolute;
        top: 1270px;
        left: -85px; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .management-bg.bg04 {
        background: url(../img/management/manage_bg_04.png) no-repeat;
        width: 727px;
        height: 498px;
        background-size: 100%;
        position: absolute;
        top: 1830px;
        left: -195px; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .ss {
        width: 414px;
        position: relative;
        z-index: 1; }
        #management .wrapper .management .management-detail.management-detail01 .management-inner .ss img {
          width: 100%; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .chara-01 {
        width: 333px;
        position: absolute;
        top: 460px;
        right: 0px;
        z-index: 111; }
      #management .wrapper .management .management-detail.management-detail01 .management-inner .chara-02 {
        position: absolute;
        width: 224px;
        top: 1298px;
        left: 122px;
        z-index: 111; }
        #management .wrapper .management .management-detail.management-detail01 .management-inner .chara-02 img {
          width: 100%; }
    #management .wrapper .management .management-detail.management-detail02 {
      background: url(../img/bg_black.png) repeat; }
      #management .wrapper .management .management-detail.management-detail02 .management-inner {
        padding: 60px 20px 0;
        overflow: hidden; }
        #management .wrapper .management .management-detail.management-detail02 .management-inner h2 {
          width: 650px;
          margin: 0 0 40px; }
          #management .wrapper .management .management-detail.management-detail02 .management-inner h2 img {
            width: 100%; }
        #management .wrapper .management .management-detail.management-detail02 .management-inner .img {
          width: 503px;
          float: left;
          padding: 0; }
          #management .wrapper .management .management-detail.management-detail02 .management-inner .img img {
            width: 100%; }
        #management .wrapper .management .management-detail.management-detail02 .management-inner .ss {
          width: 747px;
          margin: 0 0 0 -20px;
          opacity: 0;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
          #management .wrapper .management .management-detail.management-detail02 .management-inner .ss.anime {
            opacity: 1;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s; }
        #management .wrapper .management .management-detail.management-detail02 .management-inner .text {
          float: left;
          padding: 80px 0 0;
          color: #222; }
          #management .wrapper .management .management-detail.management-detail02 .management-inner .text p {
            color: #222;
            font-size: 28px; }
        #management .wrapper .management .management-detail.management-detail02 .management-inner .ss-min {
          width: 740px;
          display: inline-block;
          position: relative;
          left: -25px; }
          #management .wrapper .management .management-detail.management-detail02 .management-inner .ss-min img {
            width: 100%; }
        #management .wrapper .management .management-detail.management-detail02 .management-inner .detail {
          margin: -40px 0 0;
          opacity: 0;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
          #management .wrapper .management .management-detail.management-detail02 .management-inner .detail.anime {
            opacity: 1;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s; }
    #management .wrapper .management .management-detail.management-detail03 {
      background: url(../img/bg_gray.png) repeat;
      overflow: hidden;
      padding: 0 0 50px;
      position: relative;
      z-index: 1; }
      #management .wrapper .management .management-detail.management-detail03 .management-inner h2 {
        margin: 80px 0 40px; }
      #management .wrapper .management .management-detail.management-detail03 .management-inner .img {
        width: 748px;
        display: inline-block;
        padding: 35px 0 0 20px;
        margin: 0 0 0 -30px;
        opacity: 0;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s; }
        #management .wrapper .management .management-detail.management-detail03 .management-inner .img.anime {
          opacity: 1;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
        #management .wrapper .management .management-detail.management-detail03 .management-inner .img img {
          width: 100%; }
      #management .wrapper .management .management-detail.management-detail03 .management-inner .text {
        padding: 0 0 0 20px;
        margin-right: 40px; }
        #management .wrapper .management .management-detail.management-detail03 .management-inner .text p {
          padding: 0;
          color: #222;
          font-size: 28px;
          opacity: 0;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
          #management .wrapper .management .management-detail.management-detail03 .management-inner .text p.anime {
            opacity: 1;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s; }
        #management .wrapper .management .management-detail.management-detail03 .management-inner .text h2 {
          width: 670px; }
          #management .wrapper .management .management-detail.management-detail03 .management-inner .text h2 img {
            width: 100%; }
    #management .wrapper .management .management-detail.management-detail04 {
      background: url(../img/bg_black.png) repeat;
      overflow: hidden;
      padding: 0 0 50px;
      position: relative;
      z-index: 1; }
      #management .wrapper .management .management-detail.management-detail04 .management-inner h2 {
        margin: 80px 0 40px; }
      #management .wrapper .management .management-detail.management-detail04 .management-inner .img {
        width: 748px;
        display: inline-block;
        float: right;
        padding: 40px 10px 0 0;
        opacity: 0;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s; }
        #management .wrapper .management .management-detail.management-detail04 .management-inner .img.anime {
          opacity: 1;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
        #management .wrapper .management .management-detail.management-detail04 .management-inner .img img {
          width: 100%; }
      #management .wrapper .management .management-detail.management-detail04 .management-inner .text {
        padding: 0 0 0 20px;
        margin-right: 20px; }
        #management .wrapper .management .management-detail.management-detail04 .management-inner .text p {
          padding: 0;
          color: #222;
          font-size: 28px;
          opacity: 0;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
          #management .wrapper .management .management-detail.management-detail04 .management-inner .text p.anime {
            opacity: 1;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s; }
        #management .wrapper .management .management-detail.management-detail04 .management-inner .text h2 {
          width: 670px; }
          #management .wrapper .management .management-detail.management-detail04 .management-inner .text h2 img {
            width: 100%; }
    #management .wrapper .management .management-detail.management-detail05 {
      background: url(../img/bg_gray.png) repeat;
      overflow: hidden;
      padding: 0 0 0;
      position: relative;
      z-index: 1; }
      #management .wrapper .management .management-detail.management-detail05 .management-inner h2 {
        margin: 80px 0 50px; }
      #management .wrapper .management .management-detail.management-detail05 .management-inner .img {
        width: 1000px;
        display: inline-block;
        position: relative;
        left: -110px;
        opacity: 0;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s; }
        #management .wrapper .management .management-detail.management-detail05 .management-inner .img.anime {
          opacity: 1;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
        #management .wrapper .management .management-detail.management-detail05 .management-inner .img img {
          width: 100%; }
      #management .wrapper .management .management-detail.management-detail05 .management-inner .text {
        padding: 0 20px 0 20px;
        margin-top: 60px;
        margin-right: 0px; }
        #management .wrapper .management .management-detail.management-detail05 .management-inner .text p {
          padding: 0;
          color: #222;
          font-size: 28px;
          opacity: 0;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
          #management .wrapper .management .management-detail.management-detail05 .management-inner .text p.anime {
            opacity: 1;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s; }
          #management .wrapper .management .management-detail.management-detail05 .management-inner .text p.img {
            width: 684px;
            margin: 20px 0 0;
            left: 10px;
            opacity: 0;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s; }
            #management .wrapper .management .management-detail.management-detail05 .management-inner .text p.img.anime {
              opacity: 1;
              -webkit-transition: all 1s;
              -o-transition: all 1s;
              transition: all 1s; }
        #management .wrapper .management .management-detail.management-detail05 .management-inner .text h2 {
          width: 670px;
          margin: 0 0 40px; }
          #management .wrapper .management .management-detail.management-detail05 .management-inner .text h2 img {
            width: 100%; }
    #management .wrapper .management .management-detail p {
      position: relative;
      text-align: left;
      color: #fff;
      font-size: 20px; }
      #management .wrapper .management .management-detail p.first {
        width: 485px;
        margin: 0 auto; }
    #management .wrapper .management .management-detail ul {
      position: relative;
      width: 907px;
      margin: 0 auto 100px;
      overflow: hidden; }
      #management .wrapper .management .management-detail ul li {
        float: left; }
        #management .wrapper .management .management-detail ul li:nth-child(1) {
          margin: 0 15px 0 0; }
  #management .wrapper .management .bottom-body-bg {
    width: 1004px;
    height: 192px;
    margin: -140px auto 0;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    background: url(../img/inner_bg_top.png) no-repeat; }
  #management .wrapper .footer {
    background: url(../img/foot_sp.png) no-repeat center bottom, url(../img/footer_bg.jpg) repeat;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 0 20px; }
    #management .wrapper .footer .footer-top {
      background: url(../img/footer_top_sp.png) repeat-x center top, url(../img/feature_bg.jpg) repeat-x center top;
      height: 200px; }
    #management .wrapper .footer .spec {
      padding: 0 20px;
      position: relative; }
      #management .wrapper .footer .spec h2 {
        opacity: 0;
        margin: 0 0 60px; }
      #management .wrapper .footer .spec .spec-detail {
        opacity: 1 !important;
        -webkit-animation: none !important;
        animation: none !important; }
        #management .wrapper .footer .spec .spec-detail::-moz-selection {
          color: #000000;
          background: #cd1f1f; }
        #management .wrapper .footer .spec .spec-detail::selection {
          color: #000000;
          background: #cd1f1f; }
      #management .wrapper .footer .spec dl {
        color: #fff;
        font-size: 26px; }
        #management .wrapper .footer .spec dl dt {
          float: left;
          width: 218px;
          border-right: 2px solid #fff; }
          #management .wrapper .footer .spec dl dt::-moz-selection {
            color: #000000;
            background: #cd1f1f; }
          #management .wrapper .footer .spec dl dt::selection {
            color: #000000;
            background: #cd1f1f; }
        #management .wrapper .footer .spec dl dd {
          margin: 0 0 20px 245px; }
          #management .wrapper .footer .spec dl dd::-moz-selection {
            color: #000000;
            background: #cd1f1f; }
          #management .wrapper .footer .spec dl dd::selection {
            color: #000000;
            background: #cd1f1f; }
    #management .wrapper .footer .tokuten {
      margin: 60px 20px;
      border: 1px solid #fff; }
      #management .wrapper .footer .tokuten p {
        padding: 30px 0 0;
        text-align: center;
        font-size: 22px;
        color: #fff;
        margin: 0 0 30px; }
        #management .wrapper .footer .tokuten p span {
          color: #00c6ff;
          font-size: 26px; }
      #management .wrapper .footer .tokuten ul.download li {
        width: 498px;
        height: 158px;
        float: left;
        margin: 0 auto; }
        #management .wrapper .footer .tokuten ul.download li.ps {
          margin-bottom: 20px;
          margin-right: 16px; }
          #management .wrapper .footer .tokuten ul.download li.ps a {
            background: url(../img/ps_btn.png) no-repeat;
            background-size: 100%;
            width: 498px;
            height: 158px;
            display: block; }
        #management .wrapper .footer .tokuten ul.download li.nd a {
          background: url(../img/nin_btn.png) no-repeat;
          background-size: 100%;
          width: 498px;
          height: 158px;
          display: block; }
        #management .wrapper .footer .tokuten ul.download li img {
          width: 100%; }
    #management .wrapper .footer .download {
      overflow: hidden;
      width: 508px;
      margin: 0 auto 25px; }
      #management .wrapper .footer .download ul li {
        width: 245px;
        height: 75px;
        float: left; }
        #management .wrapper .footer .download ul li.ps {
          margin-right: 16px; }
          #management .wrapper .footer .download ul li.ps a {
            background: url(../img/ps_btn.png) no-repeat;
            background-size: 100%;
            width: 245px;
            height: 75px;
            display: block;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
            #management .wrapper .footer .download ul li.ps a:hover {
              background: url(../img/ps_btn_hover.png) no-repeat;
              background-size: 100%;
              width: 245px;
              height: 75px;
              display: block;
              -webkit-transition: all 0.5s;
              -o-transition: all 0.5s;
              transition: all 0.5s; }
        #management .wrapper .footer .download ul li.nd a {
          background: url(../img/nin_btn.png) no-repeat;
          background-size: 100%;
          width: 245px;
          height: 75px;
          display: block;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s; }
          #management .wrapper .footer .download ul li.nd a:hover {
            background: url(../img/nin_btn_hover.png) no-repeat;
            background-size: 100%;
            width: 245px;
            height: 75px;
            display: block;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
        #management .wrapper .footer .download ul li img {
          width: 100%; }
    #management .wrapper .footer .share {
      position: relative; }
      #management .wrapper .footer .share p {
        text-align: center;
        margin: 60px 0 40px; }
        #management .wrapper .footer .share p a {
          display: block;
          width: 177px;
          height: 169px;
          margin: 0 auto;
          background: url(../img/tw_share_off.png) no-repeat center;
          background-size: 100%;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
    #management .wrapper .footer .copyright {
      position: relative;
      text-align: center;
      font-size: 24px;
      color: #fff; }
      #management .wrapper .footer .copyright::-moz-selection {
        color: #000000;
        background: #cd1f1f; }
      #management .wrapper .footer .copyright::selection {
        color: #000000;
        background: #cd1f1f; }
    #management .wrapper .footer .footer_bottom .light {
      position: absolute;
      bottom: 0;
      z-index: -1;
      opacity: 0;
      -webkit-animation: footerFade 4s infinite forwards;
      animation: footerFade 4s infinite forwards; }
  #management .wrapper footer dl::-moz-selection {
    color: #000000;
    background: #cd1f1f; }
  #management .wrapper footer dl::selection {
    color: #000000;
    background: #cd1f1f; }

@media print, screen and (min-width: 751px) {
  .wrapper .header .lang-btn a, #top .wrapper .header .lang-btn a {
    display: block;
    width: 109px;
    height: 39px;
    background: url(../img/lang_tw.png) no-repeat;
    background-size: 100%;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
  .wrapper .header .lang-btn a:hover, #top .wrapper .header .lang-btn a:hover {
    display: block;
    width: 109px;
    height: 39px;
    background: url(../img/lang_tw_hover.png) no-repeat;
    background-size: 100%;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
  .pc {
    display: block; }
  .sp {
    display: none; }
  .text {
    font-size: 16px !important; }
  .clearfix::after {
    content: "";
    display: block;
    clear: both; }
  #loading {
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999; }
    #loading .op {
      position: relative;
      height: 100%; }
      #loading .op .op-clip .load-img {
        margin: 0 auto; }
        #loading .op .op-clip .load-img .light {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -56%);
          -ms-transform: translate(-50%, -56%);
          transform: translate(-50%, -56%); }
        #loading .op .op-clip .load-img .load-left {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-80%, -50%);
          -ms-transform: translate(-80%, -50%);
          transform: translate(-80%, -50%);
          background: url(../img/loading_left_low.png) no-repeat;
          background-size: 80%; }
          #loading .op .op-clip .load-img .load-left img {
            width: 80%; }
        #loading .op .op-clip .load-img .load-right {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(0%, -50%);
          -ms-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
          background: url(../img/loading_right_low.png) no-repeat;
          background-size: 80%; }
          #loading .op .op-clip .load-img .load-right img {
            width: 80%; }
      #loading .op .op-clip h2 {
        text-align: center; }
        #loading .op .op-clip h2.left {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-90%, 640%);
          -ms-transform: translate(-90%, 640%);
          transform: translate(-90%, 640%); }
          #loading .op .op-clip h2.left img {
            width: 80%; }
        #loading .op .op-clip h2.right {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(0%, 490%);
          -ms-transform: translate(0%, 490%);
          transform: translate(0%, 490%); }
          #loading .op .op-clip h2.right img {
            width: 80%; }
  #op-anim {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 999; }
    #op-anim.js-fire .white {
      background: #fff;
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      z-index: 999; }
    #op-anim.js-fire .op-text {
      opacity: 0;
      background: url(../img/bg.jpg) repeat center;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: 99; }
      #op-anim.js-fire .op-text .inner {
        max-width: 1200px;
        width: 100%;
        height: 100vh;
        min-height: 780px;
        position: relative;
        margin: 0 auto;
        padding: 90px 0 0; }
      #op-anim.js-fire .op-text .text {
        position: absolute; }
        #op-anim.js-fire .op-text .text img {
          width: 70%; }
        #op-anim.js-fire .op-text .text:nth-child(1) {
          opacity: 0;
          bottom: 50%;
          left: calc(50% - 330px); }
        #op-anim.js-fire .op-text .text:nth-child(2) {
          opacity: 0;
          bottom: 45%;
          right: calc(50% - 400px); }
        #op-anim.js-fire .op-text .text:nth-child(3) {
          opacity: 0;
          bottom: 20%;
          left: calc(50% - 280px); }
        #op-anim.js-fire .op-text .text:nth-child(4) {
          opacity: 0;
          bottom: 15%;
          right: calc(50% - 390px); }
    #op-anim.js-fire .fade01 {
      width: 331px;
      height: 100%;
      position: absolute;
      top: 45%;
      left: 50%;
      z-index: 999;
      background: url(../img/mask.png) no-repeat;
      opacity: 0; }
    #op-anim.js-fire .fade02 {
      width: 669px;
      height: 100%;
      position: absolute;
      top: 22%;
      left: 50%;
      z-index: 999;
      background: url(../img/mask02.png) no-repeat;
      opacity: 0; }
    #op-anim.js-fire .fade03 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: -2%;
      z-index: 999;
      background: url(../img/mask03.png) no-repeat;
      background-size: 100%;
      opacity: 0; }
    #op-anim.js-fire .fade04 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      background: url(../img/mask04.png) no-repeat;
      background-size: cover;
      opacity: 0; }
  .bg-video-container {
    min-width: 1000px;
    height: 86vh; }
  #wrapper_bgVideo {
    min-height: 750px !important;
    height: 100vh;
    min-width: 1000px !important;
    width: 100%; }
    #wrapper_bgVideo iframe {
      min-width: 1000px;
      min-height: 1220px;
      top: 50% !important;
      left: 50% !important;
      -webkit-transform: translate(-50%, -50%) !important;
      -ms-transform: translate(-50%, -50%) !important;
      transform: translate(-50%, -50%) !important;
      margin-top: 0 !important;
      margin-left: 0 !important; } }

@media print, screen and (min-width: 751px) and (max-width: 2000px) and (min-width: 2001px) {
  .bg-video-container {
    height: 86vh; }
  #wrapper_bgVideo iframe {
    min-height: 1220px;
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    margin-top: 0 !important;
    margin-left: 0 !important; } }

@media print, screen and (min-width: 751px) and (max-width: 1854px) {
  .bg-video-container {
    height: 86vh; }
  #wrapper_bgVideo iframe {
    min-height: 1220px;
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -51%) !important;
    -ms-transform: translate(-50%, -51%) !important;
    transform: translate(-50%, -51%) !important;
    margin-top: 0 !important;
    margin-left: 0 !important; } }

@media print, screen and (min-width: 751px) and (max-width: 1300px) {
  .bg-video-container {
    height: 70vh; }
  #wrapper_bgVideo iframe {
    min-width: 1000px;
    min-height: 1220px;
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -51%) !important;
    -ms-transform: translate(-50%, -51%) !important;
    transform: translate(-50%, -51%) !important;
    margin-top: 0 !important;
    margin-left: 0 !important; } }

@media print, screen and (min-width: 751px) and (max-width: 1000px) {
  .bg-video-container {
    height: 55vh; }
  #wrapper_bgVideo iframe {
    min-width: 1000px;
    min-height: 1220px;
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -51%) !important;
    -ms-transform: translate(-50%, -51%) !important;
    transform: translate(-50%, -51%) !important;
    margin-top: 0 !important;
    margin-left: 0 !important; } }

@media print, screen and (min-width: 751px) {
  #top .wrapper .header {
    position: fixed;
    width: 100%;
    min-width: 100%;
    opacity: 1; }
  #top .wrapper .main-contents {
    background: url(../img/bg.jpg) repeat;
    width: 100%;
    min-height: 720px;
    height: 100vh;
    overflow: hidden;
    position: relative; }
    #top .wrapper .main-contents h1 {
      width: 275px;
      margin: 0 auto;
      padding: 125px 0 0;
      text-align: center; }
      #top .wrapper .main-contents h1 img {
        width: 100%; }
    #top .wrapper .main-contents p {
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      margin: 10px 0 0;
      line-height: 1.6; }
    #top .wrapper .main-contents ul {
      width: 574px;
      margin: 40px auto 0;
      overflow: hidden; }
      #top .wrapper .main-contents ul li {
        float: left; }
        #top .wrapper .main-contents ul li:first-child {
          margin-right: 46px; }
        #top .wrapper .main-contents ul li a.yes {
          display: block;
          width: 264px;
          height: 83px;
          background: url(../img/top/yes_d.png) no-repeat center;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
        #top .wrapper .main-contents ul li a.no {
          display: block;
          width: 264px;
          height: 83px;
          background: url(../img/top/no_d.png) no-repeat center;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
        #top .wrapper .main-contents ul li img {
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s;
          opacity: 1;
          width: 100%; }
        #top .wrapper .main-contents ul li:hover a.yes {
          display: block;
          width: 264px;
          height: 83px;
          background: url(../img/top/yes_on.png) no-repeat center;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
        #top .wrapper .main-contents ul li:hover a.no {
          display: block;
          width: 264px;
          height: 83px;
          background: url(../img/top/no_on.png) no-repeat center;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s; }
        #top .wrapper .main-contents ul li:hover img {
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s;
          opacity: 0;
          width: 100%; }
    #top .wrapper .main-contents .copyright {
      position: absolute;
      bottom: 10px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
      #top .wrapper .main-contents .copyright p {
        margin: 0;
        font-size: 10px;
        font-weight: bold; }
      #top .wrapper .main-contents .copyright.fix {
        position: relative;
        left: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        margin: 80px 0 0; }
  .wrapper {
    position: relative;
    overflow: unset; }
    .wrapper .header {
      min-width: 1000px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9997; }
      .wrapper .header h1 {
        background: url(../img/header_bg.png) no-repeat;
        background-size: 100%;
        padding: 8px 0 100px 10px;
        width: 434px; }
        .wrapper .header h1 img {
          width: 45%; }
      .wrapper .header .lang-btn {
        right: 80px; }
    .wrapper .movie-btn a {
      margin: 0 0 0 0;
      background: url(../img/movie_btn_hover.png) no-repeat;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
      background-size: 100px; }
      .wrapper .movie-btn a:hover img {
        opacity: 0;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s; }
      .wrapper .movie-btn a img {
        opacity: 1;
        width: 100px;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s; }
    .wrapper .movie-btn.active a {
      background: url(../img/nav_close.png) no-repeat; }
    .wrapper .menu-btn {
      opacity: 0;
      position: fixed;
      top: 0;
      right: 0;
      display: block;
      width: 79px;
      height: 79px;
      background: url(../img/menu.png) no-repeat;
      background-size: 100%;
      -webkit-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      z-index: 9999; }
      .wrapper .menu-btn.show {
        opacity: 1; }
      .wrapper .menu-btn:hover {
        width: 79px;
        height: 79px;
        background: url(../img/menu_hover.png) no-repeat;
        background-size: 100%; }
      .wrapper .menu-btn.active {
        opacity: 0; }
      .wrapper .menu-btn.close {
        right: 10px;
        opacity: 0;
        width: 53px;
        height: 71px;
        background: url(../img/nav_close.png) no-repeat;
        background-size: 100%;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        pointer-events: none; }
        .wrapper .menu-btn.close.active {
          opacity: 1;
          pointer-events: auto; }
    .wrapper .menu-fade .fade01 {
      width: 331px;
      height: 100%;
      position: absolute;
      top: 45%;
      left: 50%;
      z-index: 999;
      background: url(../img/mask.png) no-repeat;
      opacity: 0; }
    .wrapper .menu-fade .fade02 {
      width: 669px;
      height: 100%;
      position: absolute;
      top: 22%;
      left: 50%;
      z-index: 999;
      background: url(../img/mask02.png) no-repeat;
      opacity: 0; }
    .wrapper .menu-fade .fade03 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: -2%;
      z-index: 999;
      background: url(../img/mask03.png) no-repeat;
      background-size: 100%;
      opacity: 0; }
    .wrapper .menu-fade .fade04 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      background: url(../img/mask04.png) no-repeat;
      background-size: cover;
      opacity: 0; }
    .wrapper .nav {
      position: fixed;
      opacity: 0;
      -webkit-transition-delay: 50ms;
      -o-transition-delay: 50ms;
      transition-delay: 50ms; }
      .wrapper .nav.active {
        opacity: 1;
        position: fixed;
        width: 100%;
        height: 100%;
        min-height: 750px;
        z-index: 9998;
        background: url(../img/menu_bg.jpg) no-repeat center 0;
        background-size: cover;
        -webkit-transition-delay: 500ms;
        -o-transition-delay: 500ms;
        transition-delay: 500ms; }
      .wrapper .nav nav {
        padding: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%); }
        .wrapper .nav nav li {
          color: #fff;
          font-size: 28px;
          text-align: center;
          margin: 0 0 35px; }
          .wrapper .nav nav li:nth-child(5) {
            margin: 0 0 35px; }
          .wrapper .nav nav li.share {
            position: relative; }
            .wrapper .nav nav li.share p {
              text-align: center;
              margin: 60px 0 40px; }
              .wrapper .nav nav li.share p a {
                display: block;
                width: 88.5px;
                height: 84.5px;
                margin: 0 auto;
                background: url(../img/tw_share_on.png) no-repeat center;
                background-size: 100%;
                -webkit-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s; }
                .wrapper .nav nav li.share p a img {
                  width: 100%; }
                .wrapper .nav nav li.share p a:hover img {
                  -webkit-transition: all 1s;
                  -o-transition: all 1s;
                  transition: all 1s;
                  opacity: 0;
                  width: 100%; }
    .wrapper .main {
      background-position-x: 0;
      background-size: 100%;
      width: 100%;
      height: 100vh;
      min-width: 1000px;
      position: relative;
      min-height: 720px;
      background: #000; }
      .wrapper .main .movie-banner {
        position: absolute;
        bottom: 100px;
        left: 70px;
        z-index: 9; }
        .wrapper .main .movie-banner a {
          display: block;
          background: url(../img/movie_bnr_d.png) no-repeat;
          background-size: 100%;
          width: 340px;
          height: 71px;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s; }
          .wrapper .main .movie-banner a:hover {
            background: url(../img/movie_bnr_on.png) no-repeat;
            background-size: 100%;
            width: 340px;
            height: 71px;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
      .wrapper .main .tw-banner {
        position: absolute;
        bottom: 175px;
        left: 70px;
        z-index: 9; }
        .wrapper .main .tw-banner a {
          display: block;
          background: url(../img/twitter_bnr_d.png) no-repeat;
          background-size: 100%;
          width: 340px;
          height: 71px;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s; }
          .wrapper .main .tw-banner a:hover {
            background: url(../img/twitter_bnr_on.png) no-repeat;
            background-size: 100%;
            width: 340px;
            height: 71px;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
      .wrapper .main:before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100vh;
        background: url(../img/kv_bg.jpg) no-repeat 0 0;
        background-size: cover;
        overflow: hidden; }
      .wrapper .main .main-inner {
        width: 100%;
        min-width: 1000px;
        margin: 0 auto;
        position: absolute;
        height: 100vh;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: 111;
        pointer-events: none; }
      .wrapper .main p {
        margin: 0; }
      .wrapper .main h1 {
        width: 540px;
        display: block;
        position: absolute;
        bottom: 0;
        right: 70px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none; }
        .wrapper .main h1.first img {
          width: 100%; }
        .wrapper .main h1.second img {
          width: 100%; }
        .wrapper .main h1 img {
          width: 100%; }
      .wrapper .main .release {
        width: 550px;
        position: absolute;
        bottom: 0px;
        left: 70px;
        z-index: 999;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none; }
        .wrapper .main .release img {
          width: 100%; }
      .wrapper .main .shadow {
        background: url(../img/shadow_pc.png) repeat-x center;
        width: 100%;
        height: 256px;
        position: absolute;
        bottom: -200px; }
    .wrapper .contents {
      background: url(../img/bg.jpg) repeat;
      width: 100%;
      min-width: 1000px;
      margin: 0; }
      .wrapper .contents.top {
        margin: 0; }
    .wrapper .story .movie-area {
      width: 100%;
      position: relative;
      min-width: 1000px;
      margin: 50px 0 0;
      overflow: hidden; }
      .wrapper .story .movie-area .movie-inner .movie {
        background: url(../img/footer_bg.jpg) repeat; }
      .wrapper .story .movie-area .movie-inner h2 {
        position: relative;
        z-index: 1;
        left: calc(50% - 1280px/2); }
      .wrapper .story .movie-area .movie-inner .catch-area {
        position: relative;
        width: 1000px;
        margin: 0 auto;
        min-width: 1000px;
        top: -810px; }
      .wrapper .story .movie-area .movie-inner .copy {
        position: absolute;
        top: 115px;
        left: 50%;
        -webkit-transform: translateX(-30%);
        -ms-transform: translateX(-30%);
        transform: translateX(-30%);
        z-index: 2; }
        .wrapper .story .movie-area .movie-inner .copy img {
          width: 70%; }
      .wrapper .story .movie-area .movie-inner .btn {
        position: absolute;
        top: 620px;
        left: 50%;
        -webkit-transform: translateX(-17%);
        -ms-transform: translateX(-17%);
        transform: translateX(-17%);
        z-index: 2;
        background: url(../img/btn_on.png) no-repeat;
        background-size: 50%; }
        .wrapper .story .movie-area .movie-inner .btn img {
          opacity: 1;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s;
          width: 50%; }
        .wrapper .story .movie-area .movie-inner .btn:hover {
          -webkit-transition: all 500s;
          -o-transition: all 500s;
          transition: all 500s; }
          .wrapper .story .movie-area .movie-inner .btn:hover img {
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            opacity: 0; }
      .wrapper .story .movie-area .bottom-bg {
        height: 150px;
        -webkit-transform: scale(1, -1);
        -ms-transform: scale(1, -1);
        transform: scale(1, -1);
        background: url(../img/footer_top.png) repeat-x center bottom; }
    .wrapper .story .story-area {
      background: url(../img/bg_story.png) no-repeat center top;
      padding: 166px 0 0;
      margin: -230px 0 0;
      position: relative;
      min-width: 1000px; }
      .wrapper .story .story-area .story-inner {
        overflow: hidden;
        width: 1000px;
        margin: 0 auto; }
        .wrapper .story .story-area .story-inner h2 {
          text-align: left;
          margin: 0 0 50px;
          left: auto;
          -webkit-transform: none;
          -ms-transform: none;
          transform: none; }
          .wrapper .story .story-area .story-inner h2 img {
            width: 40%; }
        .wrapper .story .story-area .story-inner .text-area {
          float: left; }
          .wrapper .story .story-area .story-inner .text-area p {
            font-size: 16px;
            color: #fff;
            line-height: 2.5; }
          .wrapper .story .story-area .story-inner .text-area h3 {
            font-size: 24px;
            color: #fff;
            margin: 50px 0; }
        .wrapper .story .story-area .story-inner .ss-area {
          width: 533px;
          float: right;
          margin: 110px 40px 166px 0; }
          .wrapper .story .story-area .story-inner .ss-area img {
            width: 100%; }
      .wrapper .story .story-area .ss {
        margin: 40px 0;
        background: url(../img/story_bg_01.png) no-repeat center top;
        overflow: hidden;
        padding: 0 0 282px; }
        .wrapper .story .story-area .ss .inner {
          width: 1000px;
          min-width: 1000px;
          margin: 60px auto 0;
          overflow: hidden;
          position: relative; }
          .wrapper .story .story-area .ss .inner h3 {
            position: absolute;
            top: 153px;
            right: 0px; }
          .wrapper .story .story-area .ss .inner p.first, .wrapper .story .story-area .ss .inner p.second {
            margin: 0 0 0 -10px; }
          .wrapper .story .story-area .ss .inner p.third {
            float: right;
            margin: -140px 0 0 0; }
    .wrapper .character {
      background: url(../img/character_bg.png) no-repeat center top;
      overflow: hidden;
      margin: -280px 0 0;
      padding: 0 0 160px; }
      .wrapper .character .chara-inner .chara-list {
        width: 1000px;
        height: 1150px;
        min-width: 1000px;
        margin: 0 auto;
        position: relative; }
        .wrapper .character .chara-inner .chara-list h2 {
          padding: 120px 0 0; }
          .wrapper .character .chara-inner .chara-list h2 img {
            width: 50%; }
        .wrapper .character .chara-inner .chara-list li:nth-child(2) {
          margin: 0;
          position: absolute;
          top: 237px;
          left: 27px;
          z-index: 2; }
          .wrapper .character .chara-inner .chara-list li:nth-child(2) img {
            width: 55%; }
        .wrapper .character .chara-inner .chara-list li:nth-child(1) {
          margin: 0;
          position: absolute;
          top: 238px;
          left: 50%;
          -webkit-transform: translateX(-65%);
          -ms-transform: translateX(-65%);
          transform: translateX(-65%);
          z-index: 3; }
          .wrapper .character .chara-inner .chara-list li:nth-child(1) img {
            width: 100%; }
        .wrapper .character .chara-inner .chara-list li:nth-child(3) {
          margin: 0;
          position: absolute;
          top: 323px;
          right: 60px;
          z-index: 3; }
          .wrapper .character .chara-inner .chara-list li:nth-child(3) img {
            width: 85%; }
        .wrapper .character .chara-inner .chara-list p {
          font-style: italic;
          font-size: 18px;
          display: inline-block;
          text-align: left;
          position: absolute; }
          .wrapper .character .chara-inner .chara-list p span {
            font-size: 36px;
            text-shadow: #0092b7 1px 1px 10px, #0092b7 -1px 1px 10px, #0092b7 1px -1px 10px, #0092b7 -1px -1px 10px; }
          .wrapper .character .chara-inner .chara-list p.name01 {
            top: 420px;
            left: -130px;
            color: #fff;
            padding: 100px 80px 130px 130px;
            background: url(../img/name_bg.png) no-repeat center;
            background-size: 90%; }
          .wrapper .character .chara-inner .chara-list p.name02 {
            top: 170px;
            left: 50%;
            color: #fff;
            -webkit-transform: translateX(-15%);
            -ms-transform: translateX(-15%);
            transform: translateX(-15%);
            padding: 100px 130px 130px 130px;
            background: url(../img/name_bg.png) no-repeat center;
            background-size: 90%; }
          .wrapper .character .chara-inner .chara-list p.name03 {
            top: 670px;
            right: -110px;
            color: #fff;
            padding: 100px 130px 130px 140px;
            background: url(../img/name_bg.png) no-repeat center;
            background-size: 80%; }
        .wrapper .character .chara-inner .chara-list h3 {
          position: absolute;
          bottom: 95px;
          left: 0;
          z-index: 10; }
    .wrapper .feature .feature-top {
      background: url(../img/feature_top.png) repeat-x;
      height: 47px; }
    .wrapper .feature .feature-content {
      background: url(../img/feature_bg.jpg) repeat;
      overflow: hidden;
      padding: 0; }
      .wrapper .feature .feature-content .inner {
        width: 1000px;
        min-width: 1000px;
        margin: 0 auto;
        padding: 115px 0 0; }
        .wrapper .feature .feature-content .inner h2 {
          margin: 0; }
          .wrapper .feature .feature-content .inner h2 img {
            width: 50%; }
        .wrapper .feature .feature-content .inner .feature-box01 {
          margin: 0; }
          .wrapper .feature .feature-content .inner .feature-box01 .left-box {
            width: 50%;
            float: left;
            background: url(../img/feature_ss01_bg.png) no-repeat 30px 50px;
            background-size: 100%;
            padding: 100px 60px 90px 0px;
            margin: -50px 0px 0px -90px; }
            .wrapper .feature .feature-content .inner .feature-box01 .left-box p {
              font-size: 28px;
              letter-spacing: -0.02em;
              line-height: 1.875;
              color: #000;
              margin: 0 0 0 100px; }
              .wrapper .feature .feature-content .inner .feature-box01 .left-box p img {
                width: 100%; }
          .wrapper .feature .feature-content .inner .feature-box01 .right-box {
            width: 500px;
            float: right;
            background: none;
            margin: 10px 0 0;
            padding: 45px 0 80px; }
            .wrapper .feature .feature-content .inner .feature-box01 .right-box h3 {
              font-style: italic;
              font-weight: bold;
              font-size: 36px;
              letter-spacing: -0.03em;
              margin: 0 0 30px;
              color: #fff;
              text-shadow: #0092b7 1px 1px 10px, #0092b7 -1px 1px 10px, #0092b7 1px -1px 10px, #0092b7 -1px -1px 10px; }
            .wrapper .feature .feature-content .inner .feature-box01 .right-box p {
              width: auto;
              font-size: 16px;
              letter-spacing: -0.02em;
              line-height: 1.875;
              color: #000;
              text-shadow: #fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px; }
        .wrapper .feature .feature-content .inner .feature-box02 .left-box {
          width: 500px;
          float: left;
          position: relative;
          top: 40px; }
          .wrapper .feature .feature-content .inner .feature-box02 .left-box h3 {
            font-style: italic;
            font-weight: bold;
            font-size: 36px;
            letter-spacing: -0.03em;
            margin: 0 0 30px;
            color: #fff;
            text-shadow: #0092b7 1px 1px 10px, #0092b7 -1px 1px 10px, #0092b7 1px -1px 10px, #0092b7 -1px -1px 10px; }
          .wrapper .feature .feature-content .inner .feature-box02 .left-box p {
            font-size: 16px;
            letter-spacing: -0.02em;
            line-height: 1.875;
            color: #000; }
        .wrapper .feature .feature-content .inner .feature-box02 .right-box {
          width: 50%;
          float: right;
          background: url(../img/feature_ss02_bg.png) no-repeat 0px 96px;
          padding: 150px 0 170px 30px;
          margin: -360px -30px 0 0;
          background-size: 100%; }
          .wrapper .feature .feature-content .inner .feature-box02 .right-box p {
            width: 100%;
            margin: 0 0 0 60px; }
            .wrapper .feature .feature-content .inner .feature-box02 .right-box p img {
              width: 80%; }
        .wrapper .feature .feature-content .inner .feature-box03 {
          margin: 0; }
          .wrapper .feature .feature-content .inner .feature-box03 .left-box {
            width: 50%;
            float: left;
            background: url(../img/feature_ss01_bg.png) no-repeat 30px 50px;
            background-size: 100%;
            padding: 100px 60px 90px 0px;
            margin: -50px 0px 0px -90px; }
            .wrapper .feature .feature-content .inner .feature-box03 .left-box p {
              font-size: 28px;
              letter-spacing: -0.02em;
              line-height: 1.875;
              color: #000;
              margin: 0 0 0 100px; }
              .wrapper .feature .feature-content .inner .feature-box03 .left-box p img {
                width: 100%; }
          .wrapper .feature .feature-content .inner .feature-box03 .right-box {
            width: 500px;
            float: right;
            background: none;
            margin: 10px 0 0;
            padding: 45px 0 80px; }
            .wrapper .feature .feature-content .inner .feature-box03 .right-box h3 {
              font-style: italic;
              font-weight: bold;
              font-size: 36px;
              letter-spacing: -0.03em;
              margin: 0 0 30px;
              color: #fff;
              text-shadow: #0092b7 1px 1px 10px, #0092b7 -1px 1px 10px, #0092b7 1px -1px 10px, #0092b7 -1px -1px 10px; }
            .wrapper .feature .feature-content .inner .feature-box03 .right-box p {
              width: auto;
              font-size: 16px;
              letter-spacing: -0.02em;
              line-height: 1.875;
              color: #000;
              text-shadow: #fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px; }
        .wrapper .feature .feature-content .inner .feature-box04 .left-box {
          width: 500px;
          float: left;
          position: relative;
          top: 40px; }
          .wrapper .feature .feature-content .inner .feature-box04 .left-box h3 {
            font-style: italic;
            font-weight: bold;
            font-size: 36px;
            letter-spacing: -0.03em;
            margin: 0 0 30px;
            color: #fff;
            text-shadow: #0092b7 1px 1px 10px, #0092b7 -1px 1px 10px, #0092b7 1px -1px 10px, #0092b7 -1px -1px 10px; }
          .wrapper .feature .feature-content .inner .feature-box04 .left-box p {
            font-size: 16px;
            letter-spacing: -0.02em;
            line-height: 1.875;
            color: #000; }
        .wrapper .feature .feature-content .inner .feature-box04 .right-box {
          width: 50%;
          float: right;
          background: url(../img/feature_ss02_bg.png) no-repeat 0px 96px;
          padding: 150px 0 170px 30px;
          margin: -360px -30px 0 0;
          background-size: 100%; }
          .wrapper .feature .feature-content .inner .feature-box04 .right-box p {
            width: 100%;
            margin: 0 0 0 60px; }
            .wrapper .feature .feature-content .inner .feature-box04 .right-box p img {
              width: 80%; }
    .wrapper .footer {
      background: url(../img/foot.png) repeat-x center bottom, url(../img/footer_top.png) repeat-x center top, url(../img/footer_bg.jpg) repeat;
      position: relative;
      width: 100%;
      z-index: 10;
      margin: 0;
      padding: 0 0 10px;
      z-index: 111;
      min-width: 1000px; }
      .wrapper .footer .footer-top {
        background: url(../img/footer_top.png) repeat-x center top, url(../img/feature_bg.jpg) repeat-x center top;
        height: 150px; }
      .wrapper .footer #particles-js {
        bottom: 0;
        height: 400px; }
      .wrapper .footer .spec {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        padding: 0 0 0 20px;
        overflow: hidden; }
        .wrapper .footer .spec h2 {
          margin: 0 0 40px; }
          .wrapper .footer .spec h2 img {
            width: 50%; }
        .wrapper .footer .spec dl {
          color: #fff;
          font-size: 14px; }
          .wrapper .footer .spec dl.left {
            float: left;
            margin-right: 87px; }
          .wrapper .footer .spec dl.right {
            overflow: hidden; }
          .wrapper .footer .spec dl dt {
            float: left;
            width: 148px;
            border-right: 2px solid #fff; }
          .wrapper .footer .spec dl dd {
            margin: 0 0 20px 175px; }
      .wrapper .footer .tokuten {
        width: 500px;
        margin: 0 auto;
        border: 1px solid #fff;
        padding: 15px 0;
        margin-bottom: 20px; }
        .wrapper .footer .tokuten p {
          border: none;
          padding: 0;
          text-align: center;
          font-size: 12px;
          color: #fff;
          margin: 0; }
          .wrapper .footer .tokuten p span {
            font-size: 14px;
            color: #00c6ff; }
      .wrapper .footer .share p {
        text-align: center;
        margin: 0px auto 20px;
        max-width: 1200px; }
        .wrapper .footer .share p a {
          display: block;
          width: 88.5px;
          height: 84.5px;
          margin: 0 auto;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s;
          background: url(../img/tw_share_on.png) no-repeat center;
          background-size: 100%; }
          .wrapper .footer .share p a img {
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            opacity: 1;
            width: 100%; }
          .wrapper .footer .share p a:hover img {
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            opacity: 0;
            width: 100%; }
      .wrapper .footer .copyright {
        text-align: center;
        font-size: 10px;
        color: #fff; }
      .wrapper .footer .footer_bottom {
        width: 100%;
        height: 32vh;
        background: url(../img/foot_light.png) repeat-x center bottom;
        position: absolute;
        bottom: 0;
        z-index: -1;
        opacity: 0;
        -webkit-animation: footerFade 4s infinite forwards;
        animation: footerFade 4s infinite forwards; }
  #play .wrapper {
    position: relative;
    overflow: hidden;
    z-index: 999;
    opacity: 0; }
    #play .wrapper .bg-sprite > * {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: 100% 100% !important;
      opacity: 0; }
    #play .wrapper .anime .bg-sprite > * {
      opacity: 1;
      -webkit-transition: opacity 1400ms;
      -o-transition: opacity 1400ms;
      transition: opacity 1400ms; }
      #play .wrapper .anime .bg-sprite > *:nth-child(1) {
        -webkit-transition-delay: 83ms;
        -o-transition-delay: 83ms;
        transition-delay: 83ms; }
      #play .wrapper .anime .bg-sprite > *:nth-child(2) {
        -webkit-transition-delay: 166ms;
        -o-transition-delay: 166ms;
        transition-delay: 166ms; }
      #play .wrapper .anime .bg-sprite > *:nth-child(3) {
        -webkit-transition-delay: 249ms;
        -o-transition-delay: 249ms;
        transition-delay: 249ms; }
      #play .wrapper .anime .bg-sprite > *:nth-child(4) {
        -webkit-transition-delay: 332ms;
        -o-transition-delay: 332ms;
        transition-delay: 332ms; }
      #play .wrapper .anime .bg-sprite > *:nth-child(5) {
        -webkit-transition-delay: 415ms;
        -o-transition-delay: 415ms;
        transition-delay: 415ms; }
      #play .wrapper .anime .bg-sprite > *:nth-child(6) {
        -webkit-transition-delay: 498ms;
        -o-transition-delay: 498ms;
        transition-delay: 498ms; }
    #play .wrapper .contents {
      background: url(../img/bg.jpg) repeat; }
    #play .wrapper .play {
      padding: 0 0 60px; }
      #play .wrapper .play .play-area {
        padding: 102px 0 0;
        position: relative; }
        #play .wrapper .play .play-area .bg-play-container {
          position: absolute;
          width: 1280px;
          height: 1192px;
          top: 0;
          left: 50%;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
          #play .wrapper .play .play-area .bg-play-container .bg-play.bg-play01 {
            background: url(../img/bg_story01.png) no-repeat center top; }
          #play .wrapper .play .play-area .bg-play-container .bg-play.bg-play02 {
            background: url(../img/bg_story02.png) no-repeat center top; }
          #play .wrapper .play .play-area .bg-play-container .bg-play.bg-play03 {
            background: url(../img/bg_story03.png) no-repeat center top; }
          #play .wrapper .play .play-area .bg-play-container .bg-play.bg-play04 {
            background: url(../img/bg_story04.png) no-repeat center top; }
          #play .wrapper .play .play-area .bg-play-container .bg-play.bg-play05 {
            background: url(../img/bg_story05.png) no-repeat center top; }
          #play .wrapper .play .play-area .bg-play-container .bg-play.bg-play06 {
            background: url(../img/bg_story06.png) no-repeat center top; }
      #play .wrapper .play .play-title {
        width: 1000px;
        margin: 0 auto; }
        #play .wrapper .play .play-title.anime .mask-title {
          -webkit-animation-delay: 400ms;
          animation-delay: 400ms; }
        #play .wrapper .play .play-title h1 {
          width: 453px;
          text-align: left;
          margin: 0 0 30px;
          left: auto;
          -webkit-transform: none;
          -ms-transform: none;
          transform: none; }
          #play .wrapper .play .play-title h1 img {
            width: 100%; }
      #play .wrapper .play .play-detail {
        position: relative;
        width: 1004px;
        margin: 0 auto; }
        #play .wrapper .play .play-detail h2 {
          width: 478px;
          margin: 0 0 30px; }
          #play .wrapper .play .play-detail h2 img {
            width: 100%; }
        #play .wrapper .play .play-detail.play-detail01 {
          background: url(../img/inner_bg_top.png) no-repeat center top, url(../img/inner_bg_white.jpg) repeat-y; }
        #play .wrapper .play .play-detail.play-detail02 {
          background: url(../img/inner_bg_bottom.png) no-repeat center bottom, url(../img/inner_bg_black.jpg) repeat-y; }
        #play .wrapper .play .play-detail .play-detail-bg .bg-detail {
          opacity: 1;
          position: absolute;
          top: 4px;
          left: 45%;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          width: 875px;
          height: 1103px;
          background: url(../img/play/play_bg_mask.png) no-repeat center top; }
        #play .wrapper .play .play-detail p {
          position: relative;
          padding: 100px;
          text-align: center;
          color: #fff;
          font-size: 16px;
          line-height: 1.8; }
          #play .wrapper .play .play-detail p.first {
            opacity: 0;
            -webkit-transition: 0.5s all;
            -o-transition: 0.5s all;
            transition: 0.5s all;
            line-height: 2.2;
            padding: 100px 0 100px 273px;
            text-align: left; }
            #play .wrapper .play .play-detail p.first.show {
              opacity: 1;
              -webkit-transition: 0.5s all;
              -o-transition: 0.5s all;
              transition: 0.5s all; }
        #play .wrapper .play .play-detail ul {
          position: relative;
          width: 907px;
          margin: 0 auto;
          overflow: hidden;
          opacity: 0;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s; }
          #play .wrapper .play .play-detail ul.show {
            opacity: 1;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
          #play .wrapper .play .play-detail ul li {
            width: auto;
            float: left; }
            #play .wrapper .play .play-detail ul li:nth-child(1) {
              margin: 0 15px 0 0; }
        #play .wrapper .play .play-detail .monster {
          padding: 40px 0 160px; }
          #play .wrapper .play .play-detail .monster .monster-img {
            position: relative;
            display: inline-block;
            margin: 0 0 0 -40px; }
            #play .wrapper .play .play-detail .monster .monster-img p {
              position: relative;
              padding: 0;
              z-index: 1;
              opacity: 1; }
            #play .wrapper .play .play-detail .monster .monster-img .monster-bg {
              position: absolute;
              top: 170px;
              left: 20px;
              width: 728px;
              height: 489px;
              background: url(../img/play/monster_bg.png) no-repeat;
              opacity: 1;
              -webkit-transition: all 0.5s;
              -o-transition: all 0.5s;
              transition: all 0.5s;
              -webkit-transition-delay: 500ms;
              -o-transition-delay: 500ms;
              transition-delay: 500ms; }
          #play .wrapper .play .play-detail .monster .monster-txt {
            position: relative;
            width: 460px;
            float: right;
            padding: 0 50px 0 0;
            opacity: 0;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
            #play .wrapper .play .play-detail .monster .monster-txt.anime {
              opacity: 1;
              -webkit-transition: all 0.5s;
              -o-transition: all 0.5s;
              transition: all 0.5s; }
            #play .wrapper .play .play-detail .monster .monster-txt p {
              text-align: left;
              padding: 0;
              color: #000; }
        #play .wrapper .play .play-detail .kaji {
          width: auto; }
          #play .wrapper .play .play-detail .kaji.anime p {
            opacity: 1;
            -webkit-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s; }
          #play .wrapper .play .play-detail .kaji h2 {
            padding: 60px 0 0 52px; }
          #play .wrapper .play .play-detail .kaji p {
            opacity: 0;
            padding: 0 0 0 52px;
            text-align: left;
            color: #000;
            margin: 0 0 52px; }
          #play .wrapper .play .play-detail .kaji .img {
            padding: 0 0 100px;
            margin: 0 0 0 -40px; }
    #play .wrapper .footer {
      background: url(../img/foot.png) repeat-x center bottom, url(../img/footer_top.png) repeat-x center top, url(../img/footer_bg.jpg) repeat;
      position: relative;
      z-index: 10;
      margin: 0;
      padding: 0 0 10px;
      z-index: 111;
      min-width: 1000px; }
      #play .wrapper .footer .footer-top {
        background: url(../img/footer_top.png) repeat-x center top, url(../img/bg.jpg) repeat-x center top;
        height: 150px; }
      #play .wrapper .footer #particles-js {
        bottom: 0;
        height: 400px; }
      #play .wrapper .footer .spec {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        padding: 0 0 0 20px;
        overflow: hidden; }
        #play .wrapper .footer .spec h2 {
          margin: 0 0 40px; }
          #play .wrapper .footer .spec h2 img {
            width: 50%; }
        #play .wrapper .footer .spec dl {
          color: #fff;
          font-size: 14px; }
          #play .wrapper .footer .spec dl.left {
            float: left;
            margin-right: 87px; }
          #play .wrapper .footer .spec dl.right {
            overflow: hidden; }
          #play .wrapper .footer .spec dl dt {
            float: left;
            width: 148px;
            border-right: 2px solid #fff; }
          #play .wrapper .footer .spec dl dd {
            margin: 0 0 20px 175px; }
      #play .wrapper .footer .tokuten {
        width: 500px;
        margin: 0 auto;
        border: 1px solid #fff;
        padding: 15px 0;
        margin-bottom: 20px; }
        #play .wrapper .footer .tokuten p {
          border: none;
          padding: 0;
          text-align: center;
          font-size: 12px;
          color: #fff;
          margin: 0; }
          #play .wrapper .footer .tokuten p span {
            font-size: 14px;
            color: #00c6ff; }
      #play .wrapper .footer .share p {
        text-align: center;
        margin: 0px auto 20px;
        max-width: 1200px; }
        #play .wrapper .footer .share p a {
          display: block;
          width: 88.5px;
          height: 84.5px;
          margin: 0 auto;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s;
          background: url(../img/tw_share_on.png) no-repeat center;
          background-size: 100%; }
          #play .wrapper .footer .share p a img {
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            opacity: 1;
            width: 100%; }
          #play .wrapper .footer .share p a:hover img {
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            opacity: 0;
            width: 100%; }
      #play .wrapper .footer .copyright {
        text-align: center;
        font-size: 10px;
        color: #fff; }
      #play .wrapper .footer .footer_bottom {
        width: 100%;
        height: 32vh;
        background: url(../img/foot_light.png) repeat-x center bottom;
        position: absolute;
        bottom: 0;
        z-index: -1;
        opacity: 0;
        -webkit-animation: footerFade 4s infinite forwards;
        animation: footerFade 4s infinite forwards; }
    #play .wrapper footer dl::-moz-selection {
      color: #000000;
      background: #cd1f1f; }
    #play .wrapper footer dl::selection {
      color: #000000;
      background: #cd1f1f; }
  #system p {
    color: #222222; }
  #system .wrapper {
    position: relative;
    overflow: hidden;
    z-index: 999;
    opacity: 0; }
    #system .wrapper .bg-sprite > * {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: 100% 100% !important;
      opacity: 0; }
    #system .wrapper .anime .bg-sprite > * {
      opacity: 1;
      -webkit-transition: opacity 1400ms;
      -o-transition: opacity 1400ms;
      transition: opacity 1400ms; }
      #system .wrapper .anime .bg-sprite > *:nth-child(1) {
        -webkit-transition-delay: 83ms;
        -o-transition-delay: 83ms;
        transition-delay: 83ms; }
      #system .wrapper .anime .bg-sprite > *:nth-child(2) {
        -webkit-transition-delay: 166ms;
        -o-transition-delay: 166ms;
        transition-delay: 166ms; }
      #system .wrapper .anime .bg-sprite > *:nth-child(3) {
        -webkit-transition-delay: 249ms;
        -o-transition-delay: 249ms;
        transition-delay: 249ms; }
      #system .wrapper .anime .bg-sprite > *:nth-child(4) {
        -webkit-transition-delay: 332ms;
        -o-transition-delay: 332ms;
        transition-delay: 332ms; }
      #system .wrapper .anime .bg-sprite > *:nth-child(5) {
        -webkit-transition-delay: 415ms;
        -o-transition-delay: 415ms;
        transition-delay: 415ms; }
      #system .wrapper .anime .bg-sprite > *:nth-child(6) {
        -webkit-transition-delay: 498ms;
        -o-transition-delay: 498ms;
        transition-delay: 498ms; }
    #system .wrapper .contents {
      background: url(../img/bg.jpg) repeat;
      min-width: 1000px; }
    #system .wrapper .system {
      padding: 0 0 60px; }
      #system .wrapper .system .bottom-bg {
        height: 150px;
        -webkit-transform: scale(1, -1);
        -ms-transform: scale(1, -1);
        transform: scale(1, -1);
        background: url(../img/footer_top.png) repeat-x center bottom;
        position: relative;
        z-index: 1; }
      #system .wrapper .system .system-area {
        padding: 102px 0 0;
        position: relative; }
        #system .wrapper .system .system-area .bg-system-container {
          position: absolute;
          width: 1280px;
          height: 1192px;
          top: 0;
          left: 50%;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
          #system .wrapper .system .system-area .bg-system-container .bg-system.bg-system01 {
            background: url(../img/bg_story01.png) no-repeat center top; }
          #system .wrapper .system .system-area .bg-system-container .bg-system.bg-system02 {
            background: url(../img/bg_story02.png) no-repeat center top; }
          #system .wrapper .system .system-area .bg-system-container .bg-system.bg-system03 {
            background: url(../img/bg_story03.png) no-repeat center top; }
          #system .wrapper .system .system-area .bg-system-container .bg-system.bg-system04 {
            background: url(../img/bg_story04.png) no-repeat center top; }
          #system .wrapper .system .system-area .bg-system-container .bg-system.bg-system05 {
            background: url(../img/bg_story05.png) no-repeat center top; }
          #system .wrapper .system .system-area .bg-system-container .bg-system.bg-system06 {
            background: url(../img/bg_story06.png) no-repeat center top; }
      #system .wrapper .system .system-title {
        width: 1000px;
        margin: 0 auto; }
        #system .wrapper .system .system-title.anime .mask-title {
          -webkit-animation-delay: 400ms;
          animation-delay: 400ms; }
        #system .wrapper .system .system-title h1 {
          width: 453px;
          text-align: left;
          margin: 0 0 30px;
          left: auto;
          -webkit-transform: none;
          -ms-transform: none;
          transform: none; }
          #system .wrapper .system .system-title h1 img {
            width: 100%; }
      #system .wrapper .system .system-detail {
        position: relative;
        width: 1004px;
        margin: 0 auto; }
        #system .wrapper .system .system-detail.system-detail01 {
          overflow: hidden;
          padding: 0 0 52px;
          background: url(../img/inner_bg_top.png) no-repeat center top, url(../img/inner_bg_white.jpg) repeat-y; }
          #system .wrapper .system .system-detail.system-detail01 .system-inner {
            padding: 62px 52px 0; }
            #system .wrapper .system .system-detail.system-detail01 .system-inner h2 {
              width: 478px; }
              #system .wrapper .system .system-detail.system-detail01 .system-inner h2 img {
                width: 100%; }
            #system .wrapper .system .system-detail.system-detail01 .system-inner .img {
              width: 503px;
              float: left;
              padding: 0;
              opacity: 0; }
              #system .wrapper .system .system-detail.system-detail01 .system-inner .img.anime {
                opacity: 1;
                -webkit-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
                -webkit-transition-delay: 500ms;
                -o-transition-delay: 500ms;
                transition-delay: 500ms; }
              #system .wrapper .system .system-detail.system-detail01 .system-inner .img img {
                width: 100%; }
            #system .wrapper .system .system-detail.system-detail01 .system-inner .text {
              padding: 24px 0 0;
              opacity: 0; }
              #system .wrapper .system .system-detail.system-detail01 .system-inner .text.anime {
                opacity: 1;
                -webkit-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
                -webkit-transition-delay: 500ms;
                -o-transition-delay: 500ms;
                transition-delay: 500ms; }
        #system .wrapper .system .system-detail.system-detail02 {
          overflow: hidden;
          background: url(../img/inner_bg_black.jpg) repeat-y; }
          #system .wrapper .system .system-detail.system-detail02 .system-inner {
            overflow: hidden;
            padding: 60px 52px 0; }
            #system .wrapper .system .system-detail.system-detail02 .system-inner h2 {
              width: 478px; }
              #system .wrapper .system .system-detail.system-detail02 .system-inner h2 img {
                width: 100%; }
            #system .wrapper .system .system-detail.system-detail02 .system-inner .img {
              width: 503px;
              float: left;
              padding: 0;
              opacity: 0; }
              #system .wrapper .system .system-detail.system-detail02 .system-inner .img.anime {
                opacity: 1;
                -webkit-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
                -webkit-transition-delay: 500ms;
                -o-transition-delay: 500ms;
                transition-delay: 500ms; }
              #system .wrapper .system .system-detail.system-detail02 .system-inner .img img {
                width: 100%; }
            #system .wrapper .system .system-detail.system-detail02 .system-inner .text {
              padding: 44px 0 0;
              opacity: 0; }
              #system .wrapper .system .system-detail.system-detail02 .system-inner .text.anime {
                opacity: 1;
                -webkit-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
                -webkit-transition-delay: 500ms;
                -o-transition-delay: 500ms;
                transition-delay: 500ms; }
          #system .wrapper .system .system-detail.system-detail02 .monster {
            overflow: hidden;
            margin: -270px 0 0; }
            #system .wrapper .system .system-detail.system-detail02 .monster .monster-img {
              position: relative;
              float: left;
              padding: 0 0 0 82px; }
              #system .wrapper .system .system-detail.system-detail02 .monster .monster-img .img {
                width: 417px;
                position: relative;
                z-index: 1;
                margin: 0; }
                #system .wrapper .system .system-detail.system-detail02 .monster .monster-img .img img {
                  width: 100%; }
              #system .wrapper .system .system-detail.system-detail02 .monster .monster-img .monster_bg {
                width: 426px;
                height: 290px;
                position: absolute;
                left: 70px;
                top: 300px;
                background: url(../img/system/monster_bg.png) no-repeat;
                background-size: 100%; }
            #system .wrapper .system .system-detail.system-detail02 .monster .monster-ss {
              width: 657px;
              float: right;
              margin: -430px 0 0;
              padding: 0 20px 0 0; }
              #system .wrapper .system .system-detail.system-detail02 .monster .monster-ss img {
                width: 100%; }
        #system .wrapper .system .system-detail.system-detail03 {
          background: url(../img/inner_bg_white.jpg) repeat-y;
          overflow: hidden;
          padding: 0 0 190px;
          position: relative;
          z-index: 1; }
          #system .wrapper .system .system-detail.system-detail03 .system-inner .img {
            position: absolute;
            width: 590px;
            float: left;
            padding: 0;
            margin: 0 0 0 -30px;
            opacity: 0; }
            #system .wrapper .system .system-detail.system-detail03 .system-inner .img.anime {
              opacity: 1;
              -webkit-transition: all 1s;
              -o-transition: all 1s;
              transition: all 1s;
              -webkit-transition-delay: 500ms;
              -o-transition-delay: 500ms;
              transition-delay: 500ms; }
            #system .wrapper .system .system-detail.system-detail03 .system-inner .img img {
              width: 100%; }
          #system .wrapper .system .system-detail.system-detail03 .system-inner .text {
            width: 450px;
            float: right;
            padding: 64px 50px 0 0;
            opacity: 0; }
            #system .wrapper .system .system-detail.system-detail03 .system-inner .text.anime {
              opacity: 1;
              -webkit-transition: all 1s;
              -o-transition: all 1s;
              transition: all 1s;
              -webkit-transition-delay: 500ms;
              -o-transition-delay: 500ms;
              transition-delay: 500ms; }
            #system .wrapper .system .system-detail.system-detail03 .system-inner .text p {
              padding: 0;
              font-size: 16px; }
            #system .wrapper .system .system-detail.system-detail03 .system-inner .text h2 {
              width: 478px;
              margin: 0 0 30px; }
              #system .wrapper .system .system-detail.system-detail03 .system-inner .text h2 img {
                width: 100%; }
        #system .wrapper .system .system-detail p {
          position: relative;
          padding: 100px 0;
          text-align: left;
          color: #222;
          font-size: 18px; }
          #system .wrapper .system .system-detail p span {
            color: #ac0000; }
          #system .wrapper .system .system-detail p.first {
            width: 485px;
            margin: 0 auto; }
        #system .wrapper .system .system-detail ul {
          position: relative;
          width: 907px;
          margin: 0 auto 100px;
          overflow: hidden; }
          #system .wrapper .system .system-detail ul li {
            float: left; }
            #system .wrapper .system .system-detail ul li:nth-child(1) {
              margin: 0 15px 0 0; }
      #system .wrapper .system .bottom-body-bg {
        width: 1004px;
        height: 192px;
        margin: -140px auto 0;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        background: url(../img/inner_bg_top.png) no-repeat; }
    #system .wrapper .footer {
      background: url(../img/foot.png) repeat-x center bottom, url(../img/footer_top.png) repeat-x center top, url(../img/footer_bg.jpg) repeat;
      position: relative;
      z-index: 10;
      margin: 0;
      padding: 0 0 10px;
      z-index: 111;
      min-width: 1000px; }
      #system .wrapper .footer .footer-top {
        background: url(../img/footer_top.png) repeat-x center top, url(../img/bg.jpg) repeat-x center top;
        height: 150px; }
      #system .wrapper .footer #particles-js {
        bottom: 0;
        height: 400px; }
      #system .wrapper .footer .spec {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        padding: 0 0 0 20px;
        overflow: hidden; }
        #system .wrapper .footer .spec h2 {
          margin: 0 0 40px; }
          #system .wrapper .footer .spec h2 img {
            width: 50%; }
        #system .wrapper .footer .spec dl {
          color: #fff;
          font-size: 14px; }
          #system .wrapper .footer .spec dl.left {
            float: left;
            margin-right: 87px; }
          #system .wrapper .footer .spec dl.right {
            overflow: hidden; }
          #system .wrapper .footer .spec dl dt {
            float: left;
            width: 148px;
            border-right: 2px solid #fff; }
          #system .wrapper .footer .spec dl dd {
            margin: 0 0 20px 175px; }
      #system .wrapper .footer .tokuten {
        width: 500px;
        margin: 0 auto;
        border: 1px solid #fff;
        padding: 15px 0;
        margin-bottom: 20px; }
        #system .wrapper .footer .tokuten p {
          border: none;
          padding: 0;
          text-align: center;
          font-size: 12px;
          color: #fff;
          margin: 0; }
          #system .wrapper .footer .tokuten p span {
            font-size: 14px;
            color: #00c6ff; }
      #system .wrapper .footer .share p {
        text-align: center;
        margin: 0px auto 20px;
        max-width: 1200px; }
        #system .wrapper .footer .share p a {
          display: block;
          width: 88.5px;
          height: 84.5px;
          margin: 0 auto;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s;
          background: url(../img/tw_share_on.png) no-repeat center;
          background-size: 100%; }
          #system .wrapper .footer .share p a img {
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            opacity: 1;
            width: 100%; }
          #system .wrapper .footer .share p a:hover img {
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            opacity: 0;
            width: 100%; }
      #system .wrapper .footer .copyright {
        text-align: center;
        font-size: 10px;
        color: #fff; }
      #system .wrapper .footer .footer_bottom {
        width: 100%;
        height: 32vh;
        background: url(../img/foot_light.png) repeat-x center bottom;
        position: absolute;
        bottom: 0;
        z-index: -1;
        opacity: 0;
        -webkit-animation: footerFade 4s infinite forwards;
        animation: footerFade 4s infinite forwards; }
    #system .wrapper footer dl::-moz-selection {
      color: #000000;
      background: #cd1f1f; }
    #system .wrapper footer dl::selection {
      color: #000000;
      background: #cd1f1f; }
  #action .wrapper {
    position: relative;
    overflow: hidden;
    z-index: 999;
    opacity: 0; }
    #action .wrapper .bg-sprite > * {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: 100% 100% !important;
      opacity: 0; }
    #action .wrapper .anime .bg-sprite > * {
      opacity: 1;
      -webkit-transition: opacity 1400ms;
      -o-transition: opacity 1400ms;
      transition: opacity 1400ms; }
      #action .wrapper .anime .bg-sprite > *:nth-child(1) {
        -webkit-transition-delay: 83ms;
        -o-transition-delay: 83ms;
        transition-delay: 83ms; }
      #action .wrapper .anime .bg-sprite > *:nth-child(2) {
        -webkit-transition-delay: 166ms;
        -o-transition-delay: 166ms;
        transition-delay: 166ms; }
      #action .wrapper .anime .bg-sprite > *:nth-child(3) {
        -webkit-transition-delay: 249ms;
        -o-transition-delay: 249ms;
        transition-delay: 249ms; }
      #action .wrapper .anime .bg-sprite > *:nth-child(4) {
        -webkit-transition-delay: 332ms;
        -o-transition-delay: 332ms;
        transition-delay: 332ms; }
      #action .wrapper .anime .bg-sprite > *:nth-child(5) {
        -webkit-transition-delay: 415ms;
        -o-transition-delay: 415ms;
        transition-delay: 415ms; }
      #action .wrapper .anime .bg-sprite > *:nth-child(6) {
        -webkit-transition-delay: 498ms;
        -o-transition-delay: 498ms;
        transition-delay: 498ms; }
    #action .wrapper .contents {
      background: url(../img/bg.jpg) repeat;
      min-width: 1000px; }
    #action .wrapper .action {
      padding: 0 0 60px; }
      #action .wrapper .action .bottom-bg {
        height: 150px;
        -webkit-transform: scale(1, -1);
        -ms-transform: scale(1, -1);
        transform: scale(1, -1);
        background: url(../img/footer_top.png) repeat-x center bottom;
        position: relative;
        z-index: 1; }
      #action .wrapper .action .action-area {
        padding: 102px 0 0;
        position: relative; }
        #action .wrapper .action .action-area .bg-action-container {
          position: absolute;
          width: 1280px;
          height: 1192px;
          top: 0;
          left: 50%;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
          #action .wrapper .action .action-area .bg-action-container .bg-action.bg-action01 {
            background: url(../img/bg_story01.png) no-repeat center top; }
          #action .wrapper .action .action-area .bg-action-container .bg-action.bg-action02 {
            background: url(../img/bg_story02.png) no-repeat center top; }
          #action .wrapper .action .action-area .bg-action-container .bg-action.bg-action03 {
            background: url(../img/bg_story03.png) no-repeat center top; }
          #action .wrapper .action .action-area .bg-action-container .bg-action.bg-action04 {
            background: url(../img/bg_story04.png) no-repeat center top; }
          #action .wrapper .action .action-area .bg-action-container .bg-action.bg-action05 {
            background: url(../img/bg_story05.png) no-repeat center top; }
          #action .wrapper .action .action-area .bg-action-container .bg-action.bg-action06 {
            background: url(../img/bg_story06.png) no-repeat center top; }
      #action .wrapper .action .action-title {
        width: 1000px;
        margin: 0 auto; }
        #action .wrapper .action .action-title.anime .mask-title {
          -webkit-animation-delay: 400ms;
          animation-delay: 400ms; }
        #action .wrapper .action .action-title h1 {
          width: 453px;
          text-align: left;
          margin: 0 0 30px;
          left: auto;
          -webkit-transform: none;
          -ms-transform: none;
          transform: none; }
          #action .wrapper .action .action-title h1 img {
            width: 100%; }
      #action .wrapper .action .action-detail {
        position: relative;
        width: 1004px;
        margin: 0 auto;
        background: url(../img/inner_bg_top.png) no-repeat center top, url(../img/inner_bg_white.jpg) repeat-y; }
        #action .wrapper .action .action-detail p {
          color: #222; }
          #action .wrapper .action .action-detail p span {
            color: #ad0000; }
            #action .wrapper .action .action-detail p span.big {
              font-size: 30px; }
            #action .wrapper .action .action-detail p span.small {
              font-size: 20px; }
        #action .wrapper .action .action-detail.action-detail01 {
          margin: 0 auto -140px; }
          #action .wrapper .action .action-detail.action-detail01 p {
            color: #fff;
            font-size: 16px;
            text-shadow: none; }
          #action .wrapper .action .action-detail.action-detail01 .action-inner {
            padding: 62px 52px 0;
            position: relative; }
            #action .wrapper .action .action-detail.action-detail01 .action-inner h3 {
              position: relative;
              height: auto;
              font-size: 36px;
              margin-bottom: 25px;
              background: -webkit-gradient(linear, left bottom, left top, from(#006fff), color-stop(70%, #00b4ff));
              background: -webkit-linear-gradient(bottom, #006fff 0%, #00b4ff 70%);
              background: -o-linear-gradient(bottom, #006fff 0%, #00b4ff 70%);
              background: linear-gradient(to top, #006fff 0%, #00b4ff 70%);
              -webkit-background-clip: text;
              color: transparent; }
            #action .wrapper .action .action-detail.action-detail01 .action-inner .text {
              font-size: 16px;
              width: 456px;
              padding: 0 0 0 66px;
              margin: 150px 0 40px; }
            #action .wrapper .action .action-detail.action-detail01 .action-inner .action-bg {
              background: url(../img/action/action_bg.png) no-repeat;
              width: 676px;
              height: 460px;
              background-size: 100%;
              position: absolute;
              top: 20px;
              left: 24px; }
            #action .wrapper .action .action-detail.action-detail01 .action-inner .ss {
              position: relative;
              z-index: 1;
              right: -20px;
              margin: 0; }
            #action .wrapper .action .action-detail.action-detail01 .action-inner .chara {
              position: absolute;
              top: -49px;
              right: 112px;
              width: 431px; }
              #action .wrapper .action .action-detail.action-detail01 .action-inner .chara img {
                width: 100%; }
        #action .wrapper .action .action-detail.action-detail02 {
          background: url(../img/inner_bg_black.jpg) repeat-y; }
          #action .wrapper .action .action-detail.action-detail02 .action-inner {
            padding: 60px 52px 0; }
            #action .wrapper .action .action-detail.action-detail02 .action-inner h2 {
              width: 478px; }
              #action .wrapper .action .action-detail.action-detail02 .action-inner h2 img {
                width: 100%; }
            #action .wrapper .action .action-detail.action-detail02 .action-inner .img {
              width: 503px;
              float: left;
              padding: 0; }
              #action .wrapper .action .action-detail.action-detail02 .action-inner .img img {
                width: 100%; }
            #action .wrapper .action .action-detail.action-detail02 .action-inner .text {
              padding: 40px 0 185px; }
            #action .wrapper .action .action-detail.action-detail02 .action-inner .katana {
              position: absolute;
              bottom: -48px;
              left: 220px;
              z-index: 2;
              margin: 0;
              padding: 0; }
            #action .wrapper .action .action-detail.action-detail02 .action-inner .katana_bg {
              width: 486px;
              height: 415px;
              opacity: 0.3;
              background: url(../img/action/katana_bg.png) no-repeat;
              position: absolute;
              top: 30px;
              left: 520px; }
          #action .wrapper .action .action-detail.action-detail02 .monster {
            overflow: hidden;
            margin: -270px 0 0; }
            #action .wrapper .action .action-detail.action-detail02 .monster .monster-img {
              position: relative;
              float: left;
              padding: 0 0 0 82px; }
              #action .wrapper .action .action-detail.action-detail02 .monster .monster-img .img {
                width: 417px;
                position: relative;
                z-index: 1; }
                #action .wrapper .action .action-detail.action-detail02 .monster .monster-img .img img {
                  width: 100%; }
              #action .wrapper .action .action-detail.action-detail02 .monster .monster-img .monster_bg {
                width: 426px;
                height: 290px;
                position: absolute;
                top: 300px;
                background: url(../img/system/monster_bg.png) no-repeat;
                background-size: 100%; }
            #action .wrapper .action .action-detail.action-detail02 .monster .monster-ss {
              width: 657px;
              float: right;
              margin: -470px 0 0;
              padding: 0 20px 0 0; }
              #action .wrapper .action .action-detail.action-detail02 .monster .monster-ss img {
                width: 100%; }
        #action .wrapper .action .action-detail.action-detail03 {
          background: url(../img/inner_bg_white.jpg) repeat-y;
          overflow: hidden;
          padding: 0 0 80px;
          position: relative;
          z-index: 1; }
          #action .wrapper .action .action-detail.action-detail03 .action-inner {
            padding: 62px 52px 0;
            position: relative; }
            #action .wrapper .action .action-detail.action-detail03 .action-inner h2 {
              margin: 80px 0 0;
              width: 478px; }
              #action .wrapper .action .action-detail.action-detail03 .action-inner h2 img {
                width: 100%; }
            #action .wrapper .action .action-detail.action-detail03 .action-inner .img {
              position: absolute;
              width: 590px;
              float: left;
              padding: 0;
              margin: 0 0 0 -30px; }
              #action .wrapper .action .action-detail.action-detail03 .action-inner .img img {
                width: 100%; }
            #action .wrapper .action .action-detail.action-detail03 .action-inner .ss-min {
              width: 460px;
              float: left;
              margin: 0; }
              #action .wrapper .action .action-detail.action-detail03 .action-inner .ss-min.left {
                margin-left: -20px; }
            #action .wrapper .action .action-detail.action-detail03 .action-inner .text {
              width: 440px;
              float: right;
              padding: 40px 0 0 0;
              margin-right: 20px; }
              #action .wrapper .action .action-detail.action-detail03 .action-inner .text p {
                padding: 0; }
              #action .wrapper .action .action-detail.action-detail03 .action-inner .text h2 {
                width: 478px; }
                #action .wrapper .action .action-detail.action-detail03 .action-inner .text h2 img {
                  width: 100%; }
              #action .wrapper .action .action-detail.action-detail03 .action-inner .text.left {
                float: left;
                margin-right: 0; }
        #action .wrapper .action .action-detail p {
          position: relative;
          text-align: left;
          font-size: 16px; }
          #action .wrapper .action .action-detail p.first {
            width: 485px;
            margin: 0 auto; }
        #action .wrapper .action .action-detail ul {
          position: relative;
          width: 907px;
          margin: 0 auto 100px;
          overflow: hidden; }
          #action .wrapper .action .action-detail ul li {
            float: left; }
            #action .wrapper .action .action-detail ul li:nth-child(1) {
              margin: 0 15px 0 0; }
      #action .wrapper .action .bottom-body-bg {
        width: 1004px;
        height: 192px;
        margin: -140px auto 0;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        background: url(../img/inner_bg_top.png) no-repeat; }
    #action .wrapper .footer {
      background: url(../img/foot.png) repeat-x center bottom, url(../img/footer_top.png) repeat-x center top, url(../img/footer_bg.jpg) repeat;
      position: relative;
      z-index: 10;
      margin: 0;
      padding: 0 0 10px;
      z-index: 111;
      min-width: 1000px; }
      #action .wrapper .footer .footer-top {
        background: url(../img/footer_top.png) repeat-x center top, url(../img/bg.jpg) repeat-x center top;
        height: 150px; }
      #action .wrapper .footer #particles-js {
        bottom: 0;
        height: 400px; }
      #action .wrapper .footer .spec {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        padding: 0 0 0 20px;
        overflow: hidden; }
        #action .wrapper .footer .spec h2 {
          margin: 0 0 40px; }
          #action .wrapper .footer .spec h2 img {
            width: 50%; }
        #action .wrapper .footer .spec dl {
          color: #fff;
          font-size: 14px; }
          #action .wrapper .footer .spec dl.left {
            float: left;
            margin-right: 87px; }
          #action .wrapper .footer .spec dl.right {
            overflow: hidden; }
          #action .wrapper .footer .spec dl dt {
            float: left;
            width: 148px;
            border-right: 2px solid #fff; }
          #action .wrapper .footer .spec dl dd {
            margin: 0 0 20px 175px; }
      #action .wrapper .footer .tokuten {
        width: 500px;
        margin: 0 auto;
        border: 1px solid #fff;
        padding: 15px 0;
        margin-bottom: 20px; }
        #action .wrapper .footer .tokuten p {
          border: none;
          padding: 0;
          text-align: center;
          font-size: 12px;
          color: #fff;
          margin: 0; }
          #action .wrapper .footer .tokuten p span {
            font-size: 14px;
            color: #00c6ff; }
      #action .wrapper .footer .share p {
        text-align: center;
        margin: 0px auto 20px;
        max-width: 1200px; }
        #action .wrapper .footer .share p a {
          display: block;
          width: 88.5px;
          height: 84.5px;
          margin: 0 auto;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s;
          background: url(../img/tw_share_on.png) no-repeat center;
          background-size: 100%; }
          #action .wrapper .footer .share p a img {
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            opacity: 1;
            width: 100%; }
          #action .wrapper .footer .share p a:hover img {
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            opacity: 0;
            width: 100%; }
      #action .wrapper .footer .copyright {
        text-align: center;
        font-size: 10px;
        color: #fff; }
      #action .wrapper .footer .footer_bottom {
        width: 100%;
        height: 32vh;
        background: url(../img/foot_light.png) repeat-x center bottom;
        position: absolute;
        bottom: 0;
        z-index: -1;
        opacity: 0;
        -webkit-animation: footerFade 4s infinite forwards;
        animation: footerFade 4s infinite forwards; }
    #action .wrapper footer dl::-moz-selection {
      color: #000000;
      background: #cd1f1f; }
    #action .wrapper footer dl::selection {
      color: #000000;
      background: #cd1f1f; }
  #management .wrapper {
    position: relative;
    overflow: hidden;
    z-index: 999;
    opacity: 0; }
    #management .wrapper p {
      line-height: 1.6; }
    #management .wrapper .bg-sprite > * {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: 100% 100% !important;
      opacity: 0; }
    #management .wrapper .anime .bg-sprite > * {
      opacity: 1;
      -webkit-transition: opacity 1400ms;
      -o-transition: opacity 1400ms;
      transition: opacity 1400ms; }
      #management .wrapper .anime .bg-sprite > *:nth-child(1) {
        -webkit-transition-delay: 83ms;
        -o-transition-delay: 83ms;
        transition-delay: 83ms; }
      #management .wrapper .anime .bg-sprite > *:nth-child(2) {
        -webkit-transition-delay: 166ms;
        -o-transition-delay: 166ms;
        transition-delay: 166ms; }
      #management .wrapper .anime .bg-sprite > *:nth-child(3) {
        -webkit-transition-delay: 249ms;
        -o-transition-delay: 249ms;
        transition-delay: 249ms; }
      #management .wrapper .anime .bg-sprite > *:nth-child(4) {
        -webkit-transition-delay: 332ms;
        -o-transition-delay: 332ms;
        transition-delay: 332ms; }
      #management .wrapper .anime .bg-sprite > *:nth-child(5) {
        -webkit-transition-delay: 415ms;
        -o-transition-delay: 415ms;
        transition-delay: 415ms; }
      #management .wrapper .anime .bg-sprite > *:nth-child(6) {
        -webkit-transition-delay: 498ms;
        -o-transition-delay: 498ms;
        transition-delay: 498ms; }
    #management .wrapper .contents {
      background: url(../img/bg.jpg) repeat;
      min-width: 1000px; }
    #management .wrapper .management {
      padding: 0 0 60px; }
      #management .wrapper .management .bottom-bg {
        height: 150px;
        -webkit-transform: scale(1, -1);
        -ms-transform: scale(1, -1);
        transform: scale(1, -1);
        background: url(../img/footer_top.png) repeat-x center bottom;
        position: relative;
        z-index: 1; }
      #management .wrapper .management .management-area {
        padding: 102px 0 0;
        position: relative; }
        #management .wrapper .management .management-area .bg-management-container {
          position: absolute;
          width: 1280px;
          height: 1192px;
          top: 0;
          left: 50%;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
          #management .wrapper .management .management-area .bg-management-container .bg-management.bg-management01 {
            background: url(../img/bg_story01.png) no-repeat center top; }
          #management .wrapper .management .management-area .bg-management-container .bg-management.bg-management02 {
            background: url(../img/bg_story02.png) no-repeat center top; }
          #management .wrapper .management .management-area .bg-management-container .bg-management.bg-management03 {
            background: url(../img/bg_story03.png) no-repeat center top; }
          #management .wrapper .management .management-area .bg-management-container .bg-management.bg-management04 {
            background: url(../img/bg_story04.png) no-repeat center top; }
          #management .wrapper .management .management-area .bg-management-container .bg-management.bg-management05 {
            background: url(../img/bg_story05.png) no-repeat center top; }
          #management .wrapper .management .management-area .bg-management-container .bg-management.bg-management06 {
            background: url(../img/bg_story06.png) no-repeat center top; }
      #management .wrapper .management .management-title {
        width: 1000px;
        margin: 0 auto; }
        #management .wrapper .management .management-title.anime .mask-title {
          -webkit-animation-delay: 400ms;
          animation-delay: 400ms; }
        #management .wrapper .management .management-title h1 {
          width: 453px;
          text-align: left;
          margin: 0 0 30px;
          left: auto;
          -webkit-transform: none;
          -ms-transform: none;
          transform: none; }
          #management .wrapper .management .management-title h1 img {
            width: 100%; }
      #management .wrapper .management .management-detail {
        position: relative;
        width: 1004px;
        margin: 0 auto;
        background: url(../img/inner_bg_top.png) no-repeat center top, url(../img/inner_bg_white.jpg) repeat-y; }
        #management .wrapper .management .management-detail p span {
          color: #ad0000; }
        #management .wrapper .management .management-detail.management-detail01 {
          margin: 0 auto; }
          #management .wrapper .management .management-detail.management-detail01 .management-inner {
            padding: 62px 52px 0;
            position: relative;
            padding: 0 0 1px; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner h2 {
              width: 478px;
              padding: 62px 0 0 52px; }
              #management .wrapper .management .management-detail.management-detail01 .management-inner h2 img {
                width: 100%; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner h3 {
              font-size: 26px;
              margin-bottom: 5px;
              color: #00b4ff;
              position: relative;
              background: -webkit-gradient(linear, left bottom, left top, from(#006fff), to(#00b4ff));
              background: -webkit-linear-gradient(bottom, #006fff 0%, #00b4ff 100%);
              background: -o-linear-gradient(bottom, #006fff 0%, #00b4ff 100%);
              background: linear-gradient(to top, #006fff 0%, #00b4ff 100%);
              -webkit-background-clip: text;
              color: transparent; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .text {
              font-size: 16px;
              width: 456px;
              margin: 150px 0 40px; }
              #management .wrapper .management .management-detail.management-detail01 .management-inner .text p {
                margin: 0 0 30px; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area {
              margin: 0 0 85px; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area01 {
              padding: 0 0 0 218px; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area02 {
              padding: 70px 0 0 147px; }
              #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area02 .text {
                margin: 0; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area03 {
              padding: 0 0 0 474px; }
              #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area03 .text {
                margin: 0;
                padding: 0; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area04 {
              padding: 40px 0 0 137px; }
              #management .wrapper .management .management-detail.management-detail01 .management-inner .text-area04 .text {
                margin: 0; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .management-bg.bg01 {
              background: url(../img/management/manage_bg_01.png) no-repeat;
              width: 844px;
              height: 704px;
              background-size: 100%;
              position: absolute;
              top: 109px;
              left: 24px; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .management-bg.bg02 {
              background: url(../img/management/manage_bg_02.png) no-repeat;
              width: 957px;
              height: 975px;
              background-size: 100%;
              position: absolute;
              top: 630px;
              left: 45px; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .management-bg.bg03 {
              background: url(../img/management/manage_bg_03.png) no-repeat;
              width: 875px;
              height: 747px;
              background-size: 100%;
              position: absolute;
              top: 1100px;
              left: 35px; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .management-bg.bg04 {
              background: url(../img/management/manage_bg_04.png) no-repeat;
              width: 727px;
              height: 498px;
              background-size: 100%;
              position: absolute;
              top: 1620px;
              left: -65px; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .ss {
              width: 414px;
              position: relative;
              z-index: 1; }
              #management .wrapper .management .management-detail.management-detail01 .management-inner .ss img {
                width: 100%; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .chara-01 {
              position: absolute;
              top: 360px;
              right: 70px;
              z-index: 111; }
            #management .wrapper .management .management-detail.management-detail01 .management-inner .chara-02 {
              position: absolute;
              width: 224px;
              top: 1148px;
              left: 242px;
              z-index: 111; }
              #management .wrapper .management .management-detail.management-detail01 .management-inner .chara-02 img {
                width: 100%; }
        #management .wrapper .management .management-detail.management-detail02 {
          background: url(../img/inner_bg_black.jpg) repeat-y; }
          #management .wrapper .management .management-detail.management-detail02 .management-inner {
            padding: 60px 52px 0;
            overflow: hidden; }
            #management .wrapper .management .management-detail.management-detail02 .management-inner h2 {
              width: 568px;
              margin: 0 0 30px; }
              #management .wrapper .management .management-detail.management-detail02 .management-inner h2 img {
                width: 100%; }
            #management .wrapper .management .management-detail.management-detail02 .management-inner .img {
              width: 503px;
              float: left;
              padding: 0; }
              #management .wrapper .management .management-detail.management-detail02 .management-inner .img img {
                width: 100%; }
            #management .wrapper .management .management-detail.management-detail02 .management-inner .text {
              width: 450px;
              float: left;
              padding: 55px 0 0;
              color: #222; }
              #management .wrapper .management .management-detail.management-detail02 .management-inner .text p {
                color: #222;
                font-size: 16px; }
            #management .wrapper .management .management-detail.management-detail02 .management-inner .ss-min {
              width: 449px;
              display: inline-block;
              position: relative;
              left: 20px; }
              #management .wrapper .management .management-detail.management-detail02 .management-inner .ss-min img {
                width: 100%; }
            #management .wrapper .management .management-detail.management-detail02 .management-inner .detail {
              margin: -40px 0 0; }
        #management .wrapper .management .management-detail.management-detail03 {
          background: url(../img/inner_bg_white.jpg) repeat-y;
          overflow: hidden;
          padding: 0 0 50px;
          position: relative;
          z-index: 1; }
          #management .wrapper .management .management-detail.management-detail03 .management-inner h2 {
            margin: 50px 0 30px; }
          #management .wrapper .management .management-detail.management-detail03 .management-inner .img {
            width: 460px;
            display: inline-block;
            padding: 35px 0 0 20px;
            margin: 0; }
            #management .wrapper .management .management-detail.management-detail03 .management-inner .img img {
              width: 100%; }
          #management .wrapper .management .management-detail.management-detail03 .management-inner .text {
            width: 450px;
            float: right;
            padding: 0 0 0 0;
            margin-right: 40px; }
            #management .wrapper .management .management-detail.management-detail03 .management-inner .text p {
              padding: 0;
              color: #222;
              font-size: 16px; }
            #management .wrapper .management .management-detail.management-detail03 .management-inner .text h2 {
              width: 478px; }
              #management .wrapper .management .management-detail.management-detail03 .management-inner .text h2 img {
                width: 100%; }
        #management .wrapper .management .management-detail.management-detail04 {
          background: url(../img/inner_bg_black.jpg) repeat-y;
          overflow: hidden;
          padding: 0 0 50px;
          position: relative;
          z-index: 1; }
          #management .wrapper .management .management-detail.management-detail04 .management-inner h2 {
            margin: 50px 0 30px; }
          #management .wrapper .management .management-detail.management-detail04 .management-inner .img {
            width: 460px;
            display: inline-block;
            float: right;
            padding: 20px 35px 0 0; }
            #management .wrapper .management .management-detail.management-detail04 .management-inner .img img {
              width: 100%; }
          #management .wrapper .management .management-detail.management-detail04 .management-inner .text {
            width: 450px;
            float: right;
            padding: 0 0 0 0;
            margin-right: 20px; }
            #management .wrapper .management .management-detail.management-detail04 .management-inner .text p {
              padding: 0;
              color: #222;
              font-size: 16px; }
            #management .wrapper .management .management-detail.management-detail04 .management-inner .text h2 {
              width: 478px; }
              #management .wrapper .management .management-detail.management-detail04 .management-inner .text h2 img {
                width: 100%; }
        #management .wrapper .management .management-detail.management-detail05 {
          background: url(../img/inner_bg_white.jpg) repeat-y;
          overflow: hidden;
          padding: 0 0 0;
          position: relative;
          z-index: 1; }
          #management .wrapper .management .management-detail.management-detail05 .management-inner h2 {
            margin: 80px 0 0; }
          #management .wrapper .management .management-detail.management-detail05 .management-inner .img {
            width: 590px;
            display: inline-block;
            position: relative;
            left: -30px; }
            #management .wrapper .management .management-detail.management-detail05 .management-inner .img img {
              width: 100%; }
          #management .wrapper .management .management-detail.management-detail05 .management-inner .text {
            width: 450px;
            float: right;
            position: absolute;
            padding: 0 0 0 0;
            margin-top: 60px;
            margin-right: 0px;
            top: 0;
            right: 50px; }
            #management .wrapper .management .management-detail.management-detail05 .management-inner .text p {
              padding: 0;
              color: #222;
              font-size: 16px; }
              #management .wrapper .management .management-detail.management-detail05 .management-inner .text p.img {
                width: 450px;
                margin: 40px 0 0;
                left: 0; }
            #management .wrapper .management .management-detail.management-detail05 .management-inner .text h2 {
              width: 478px;
              margin: 0 0 30px; }
              #management .wrapper .management .management-detail.management-detail05 .management-inner .text h2 img {
                width: 100%; }
        #management .wrapper .management .management-detail p {
          position: relative;
          text-align: left;
          color: #fff;
          font-size: 16px; }
          #management .wrapper .management .management-detail p.first {
            width: 485px;
            margin: 0 auto; }
        #management .wrapper .management .management-detail ul {
          position: relative;
          width: 907px;
          margin: 0 auto 100px;
          overflow: hidden; }
          #management .wrapper .management .management-detail ul li {
            float: left; }
            #management .wrapper .management .management-detail ul li:nth-child(1) {
              margin: 0 15px 0 0; }
      #management .wrapper .management .bottom-body-bg {
        width: 1004px;
        height: 192px;
        margin: -140px auto 0;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        background: url(../img/inner_bg_top.png) no-repeat; }
    #management .wrapper .footer {
      background: url(../img/foot.png) repeat-x center bottom, url(../img/footer_top.png) repeat-x center top, url(../img/footer_bg.jpg) repeat;
      position: relative;
      z-index: 10;
      margin: 0;
      padding: 0 0 10px;
      z-index: 111;
      min-width: 1000px; }
      #management .wrapper .footer .footer-top {
        background: url(../img/footer_top.png) repeat-x center top, url(../img/bg.jpg) repeat-x center top;
        height: 150px; }
      #management .wrapper .footer #particles-js {
        bottom: 0;
        height: 400px; }
      #management .wrapper .footer .spec {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        padding: 0 0 0 20px;
        overflow: hidden; }
        #management .wrapper .footer .spec h2 {
          margin: 0 0 40px; }
          #management .wrapper .footer .spec h2 img {
            width: 50%; }
        #management .wrapper .footer .spec dl {
          color: #fff;
          font-size: 14px; }
          #management .wrapper .footer .spec dl.left {
            float: left;
            margin-right: 87px; }
          #management .wrapper .footer .spec dl.right {
            overflow: hidden; }
          #management .wrapper .footer .spec dl dt {
            float: left;
            width: 148px;
            border-right: 2px solid #fff; }
          #management .wrapper .footer .spec dl dd {
            margin: 0 0 20px 175px; }
      #management .wrapper .footer .tokuten {
        width: 500px;
        margin: 0 auto;
        border: 1px solid #fff;
        padding: 15px 0;
        margin-bottom: 20px; }
        #management .wrapper .footer .tokuten p {
          border: none;
          padding: 0;
          text-align: center;
          font-size: 12px;
          color: #fff;
          margin: 0; }
          #management .wrapper .footer .tokuten p span {
            font-size: 14px;
            color: #00c6ff; }
      #management .wrapper .footer .share p {
        text-align: center;
        margin: 0px auto 20px;
        max-width: 1200px; }
        #management .wrapper .footer .share p a {
          display: block;
          width: 88.5px;
          height: 84.5px;
          margin: 0 auto;
          -webkit-transition: all 1s;
          -o-transition: all 1s;
          transition: all 1s;
          background: url(../img/tw_share_on.png) no-repeat center;
          background-size: 100%; }
          #management .wrapper .footer .share p a img {
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            opacity: 1;
            width: 100%; }
          #management .wrapper .footer .share p a:hover img {
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            opacity: 0;
            width: 100%; }
      #management .wrapper .footer .copyright {
        text-align: center;
        font-size: 10px;
        color: #fff; }
      #management .wrapper .footer .footer_bottom {
        width: 100%;
        height: 32vh;
        background: url(../img/foot_light.png) repeat-x center bottom;
        position: absolute;
        bottom: 0;
        z-index: -1;
        opacity: 0;
        -webkit-animation: footerFade 4s infinite forwards;
        animation: footerFade 4s infinite forwards; }
    #management .wrapper footer dl::-moz-selection {
      color: #000000;
      background: #cd1f1f; }
    #management .wrapper footer dl::selection {
      color: #000000;
      background: #cd1f1f; } }