@charset "utf-8";

* { border:0; margin:0; outline:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; font:inherit; font-style:normal; font-weight:lighter; list-style:none; text-decoration:none; } html {font-size:62.5%; width:100%; height:100%;} body { font-size:10px; font-size:1.0rem; line-height:1; position:relative; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; -o-text-size-adjust:100%; text-size-adjust:100%; font-family:Helvetica,Arial,sans-serif; width:100%; height:100%; } article, aside, dialog, figure, footer, header, main, menu, nav, section {display:block;}audio, canvas, video {display:inline-block;} br,hr {display:block;}ol,ul {list-style:none;}table {border-collapse:collapse; border-spacing:0;} 

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

/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/

body { background: rgba(0,0,0,1); }

/*--------------------------------------------------------------------------
   inner
---------------------------------------------------------------------------*/

.inner { position: relative; width: 1020px; margin: 0 auto; }

/*--------------------------------------------------------------------------
   header
---------------------------------------------------------------------------*/

.header-wrap { width: 100%; height: 230px; background-position: center top; background-attachment: fixed;}

.header-wrap.mode { background: url(../img/bg-mode.jpg) no-repeat center top fixed; }
.header-wrap.world { background: url(../img/bg-world.jpg) no-repeat center top fixed; }
.header-wrap.system { background: url(../img/bg-system.jpg) no-repeat center top fixed; }
.header-wrap.characters { background: url(../img/bg-characters.jpg) no-repeat center top fixed; }
.header-wrap.products { background: url(../img/bg-products.jpg) no-repeat center top fixed; }
.header-wrap.sound { background: url(../img/bg-sound.jpg) no-repeat center top fixed; }
.header-wrap.movie { background: url(../img/bg-movie.jpg) no-repeat center top fixed; }
.header-wrap.special { background: url(../img/bg-special.jpg) no-repeat center top fixed; }
.header-wrap.other { background: url(../img/bg-other.jpg) no-repeat center top fixed; }

/*--------------------------------------------------------------------------
   header page
---------------------------------------------------------------------------*/

.logo { display: block; position: absolute; top: 35px; left: 10 px; width: 277px; height: 115px; }
.contents-title { display: block; position: absolute; top: 20px; left: 50%; margin: 0 0 0 -200px; width: 400px; height: 150px; }
.sns-list { display: block; position: absolute; top: 150px; right: 11px; width: 162px; }
.sns-list li { display: block; float: left; margin: 0; }
.darius-jp { display: block; position: absolute; top: 10px; right: 0; }

.header-wrap a img {
  -webkit-transition: 0.2s ease-in-out;
     -moz-transition: 0.2s ease-in-out;
       -o-transition: 0.2s ease-in-out;
  	      transition: 0.2s ease-in-out; }
.header-wrap a:hover img { opacity: 0.7; }

/*--------------------------------------------------------------------------
   gnav page
---------------------------------------------------------------------------*/

.spr { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.gnav { display: block; position: absolute; top: 185px; left: 0; width: 100%; height: 90px; background: url(../img/bg-gnav.png) repeat-x center top; z-index: 1000; }
.gnav .spr { background-image: url(../img/bg-gnav-list.png); background-position: 0 0; }

.gnav-list { position: relative; width: 1020px; height: 90px; margin: 0 auto; padding: 0 0 0 43px; background-position: 0 0; }
.gnav-list li { display: block; float: left; height: 90px;}
.gnav-list li a { display: block; height: 90px;}

.nav-world .spr { width: 108px; background-position: -43px -90px;}
.nav-mode .spr { width: 96px; background-position: -151px -90px;}
.nav-system .spr { width: 114px; background-position: -247px -90px;}
.nav-characters .spr { width: 159px; background-position: -361px -90px;}
.nav-products .spr { width: 137px; background-position: -520px -90px;}
.nav-sound .spr { width: 106px; background-position: -657px -90px;}
.nav-movie .spr { width: 103px; background-position: -763px -90px;}
.nav-special .spr { width: 114px; background-position: -860px -90px;}

.nav-world.current .spr,.nav-world:hover .spr {background-position: -43px -180px;}
.nav-mode.current .spr,.nav-mode:hover .spr {background-position: -151px -180px;}
.nav-system.current .spr,.nav-system:hover .spr {background-position: -247px -180px;}
.nav-characters.current .spr,.nav-characters:hover .spr {background-position: -361px -180px;}
.nav-products.current .spr,.nav-products:hover .spr {background-position: -520px -180px;}
.nav-sound.current .spr,.nav-sound:hover .spr {background-position: -657px -180px;}
.nav-movie.current .spr,.nav-movie:hover .spr {background-position: -763px -180px;}
.nav-special.current .spr,.nav-special:hover .spr {background-position: -860px -180px;}

/*--------------------------------------------------------------------------
   snav
---------------------------------------------------------------------------*/

.snav { margin: 0 0 40px; }
ul.snav-list { text-align: center; }
ul.snav-list li { display: inline-block; margin: 0 10px 0;}
.page-top { display: block; position: fixed; bottom: 10px; right: 10px; width: 77px; height: 85px; background: url(../img/btn-pagetop.png) no-repeat center top; display: none; }

/*--------------------------------------------------------------------------

---------------------------------------------------------------------------*/

.contents-wrap { position: relative; padding: 80px 0 80px; background: url(../img/bg-contents.jpg) no-repeat center top fixed; }
.contents-wrap p { font-size: 13px; line-height: 1.8; color: #fff; margin: 20px 0 0; }
.contents-wrap p strong { font-size: 15px; font-weight: bold; }
.contents-wrap:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: url(../img/bg-contents-bottom.png) repeat-x center top; }

/* content-block */
.content-block { position: relative; border: 1px solid #a7abb3; background: #000 url(../img/bg-content-block.png) repeat-x left top; box-shadow: 0 0 10px 5px #334e8b; }
.content-block:after { content: ""; position: absolute; top: -20px; left: -20px; width: 100px; height: 100px; background: url(../img/bg-content-block-after.png) no-repeat left top; } 
.content-block:before { content: ""; position: absolute; bottom: -20px; right: -20px; width: 100px; height: 100px; background: url(../img/bg-content-block-after.png) no-repeat left top; 
  -webkit-transform: rotate(-180deg);
     -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
       -o-transform: rotate(-180deg);
          transform: rotate(-180deg);
} 
.content-block,.content-block:after,.content-block:before {
  -webkit-transition: 0.2s ease-in-out;
     -moz-transition: 0.2s ease-in-out;
       -o-transition: 0.2s ease-in-out;
  	      transition: 0.2s ease-in-out;
}
/* content-block:hover */
.content-block:hover { box-shadow: 0 0 10px 5px #4981ff; }
.content-block:hover:after { top: -24px; left: -24px; } 
.content-block:hover:before { bottom: -24px; right: -24px; } 
  .long { clear: both; width: 980px; height: auto; margin: 0 20px 40px; padding: 19px; }
  .half { float: left; width: 470px; height: auto; margin: 0 20px 40px; padding: 19px; }
.single { float: left; width: 300px; height: auto; margin: 0 20px 40px; padding: 19px; }
.double { float: left; width: 640px; height: auto; margin: 0 20px 40px; padding: 19px; }

h2.content-title { position: relative; width: 100%; padding: 15px 0 15px 25px; font-size: 18px; line-height: 1; color: #fff; background: rgba(255,255,255,0.2); border-radius: 2px; }
h2.content-title:after { content: ""; position: absolute; top: 50%; left: 10px; width: 4px; height: 22px; margin: -11px 0 0; background: #e60012; }
.top-page h2.content-title { line-height: 1.5; }

figure.content-image { margin: 20px 0 0; }
figure.content-image img {}


/*--------------------------------------------------------------------------
   footer
---------------------------------------------------------------------------*/
footer { background: #000; }
.footer-inner { width: 1080px; margin: 0 auto; padding: 15px 0; }
.line {background:url(../img/footer-line.jpg) no-repeat center top;}
.footer-inner .logo-list{ text-align: center; margin: 0 0 10px; }
.footer-inner .logo-list li{ display: inline-block; margin: 0 20px; }
.footer-inner .link-list{ text-align: center; padding: 0; }
.footer-inner .link-list a { font-size: 12px; color: #fff; line-height: 1; text-decoration: none; }
.footer-inner .copy{ text-align: center; }
.footer-nav { background: url(../img/bg-footer-nav.jpg) no-repeat center top; }