@charset "utf-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video,a,input,textarea,section{ margin:0;padding:0; border:0; font-size:100%; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
nav ul{ list-style:none;}
ul{ list-style:none; }
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}
pre,code,kbd,samp{ font-family:monospace,monospace; font-size:inherit;}
table{ border-collapse:collapse; border-spacing:0;}
img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}
sup{ vertical-align:text-top; font-size:75%;}
sub{ vertical-align:text-bottom; font-size:75%;}
input,textarea,select{ z-index:auto; font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{ outline:none;}
audio:not([controls]){ display:none;}
time{ display:inline;}
[hidden]{ display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{ padding:0; border:0; outline:none;}
/*==================================================== */
body{-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; font-family:'Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; line-height:1.8;}
button{font-family:'Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; cursor:pointer;}

a:link{ color:#373737;}
a:visited{ color:#373737;}
a:hover {color:#373737; transition:background 0.2s;}
a:active{color:#373737;}
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
.clr{clear:both;}
.hide{position:absolute !important; left:-9999px !important; top:-9999px !important;}
.clr{clear:both;}
section {clear:both; zoom:1;}
article:after,
section:after,
.clrFx:after{content:''; clear:both; display:block;}
.transition{-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease; filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;}

img{-ms-interpolation-mode:bicubic;}

/* chrome bug fix*/
*{max-height:999999px;}
*,*::before,*::after {will-change:all;}
textarea,input[type="email"],input[type="password"],input[type="text"],input[type="button"],input[type="submit"]{-webkit-appearance:none;}
textarea{resize:vertical;}
input:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,1) inset; outline:none;}
input,button{ outline:none;}
area{
  border:none;
  outline:none;
}
a {cursor:pointer;}

/*
	square enix module overwrite
__________________________________________________*/
/* sqFooter */
#sqexHeader-black_rsp {z-index:100000 !important; position:relative; font-size:0; line-height:1;}
#___gcse_0 {display:none;}
.windowloaded #___gcse_0 {display:block; position:relative; top:-2px;}
/* sqFooter */
#sqexFooter {z-index:100; position:relative; }
/* square 検索窓 */
.gsc-selected-option-container.gsc-inline-block{white-space:nowrap; height:50px;}
.gsc-selected-option-container{height:33px !important; min-width:80px !important;}
.gsc-selected-option {height:33px !important;}

/*
	BASE SET
__________________________________________________*/
html{overflow:visible;}
html,body {margin:0; padding:0;}
body {position:static; overflow:auto; width:auto; *overflow-y:hidden; color:#fff; font-size:20px; line-height:1.5; z-index:0; background:#000;}

.over-section{margin:0 -410px; zoom:1; position:relative; *overflow-y:hidden; clear:both; padding:0;}
.over-section:after{content:''; clear:both; display:block;}
main {width:100%;}
section {width:100%; margin:0 auto; clear:both; zoom:1; position:relative; z-index:100; padding:0;}
.wrap   {margin:0 auto; clear:both; zoom:1; position:relative; z-index:100; padding:0;}
article   {margin:0 auto; clear:both; zoom:1; position:relative; z-index:10; padding:0;}
article:after,section:after,.wrap:after{content:''; clear:both; display:block;}
*,*::before,*::after {box-sizing:border-box;}

/* 
	main parts
*/
main {font-size:0; line-height:1; position:relative; opacity:1; transition:opacity 0.6s ease;}
.windowloaded main {opacity:1;}

body,#contents  {background:#000 !important;}

#soaContents {position:relative; overflow:hidden; opacity:1; transition:opacity 0.6s ease; background:#000;}
.windowloaded #soaContents{opacity:1;}

@media screen and (min-width:641px){

#sqexFooter ,
#sqexHeader-black_rsp {min-width:1100px;}

#soaContents {min-width:1100px; padding-bottom:50px;}
#soaContents:before {min-width:1100px; content:''; width:1920px; height:2400px; background:url(/soa/images/bg.jpg) center top no-repeat #000; background-size:1920px auto; position:fixed; left:50%; top:0; margin-left:-960px; z-index:0;}

/* soaHeader */
#soaHeader {height:68px; width:100%; min-width:1100px; background:rgba(70,70,70,0.9); position:absolute; left:0; top:-100px; z-index:200; transition:top 1s; top: 0;}
.windowloaded #soaHeader {top:0;}
#soaHeader.fixed {position:fixed; top:0;}

#soaHeader nav {width:1100px; margin:0 auto; overflow:hidden !important; position:relative;}
#soaHeader nav ul {font-size:0; line-height:1; text-align:center;}
#soaHeader nav ul li {display:inline-block; padding:0 4px; margin:0;}
#soaHeader nav ul li a{display:block; height:68px; width:101px; position:relative;}
#soaHeader nav ul li a:before{content:''; width:100%; height:40px; position:absolute; left:0; top:14px; background-position:left top; background-repeat:no-repeat; background-image:url(/soa/images/menu.png); transition:0.5s;}
#soaHeader nav ul li a:after {content:''; width:100%; height:40px; position:absolute; left:0; top:14px; background-position:left -40px; background-repeat:no-repeat; background-image:url(/soa/images/menu.png); opacity:0;}
#soaHeader nav ul li.story {padding:0 5px 0 4px;}
#soaHeader nav ul li.story  a {width:143px;}
#soaHeader nav ul li.system{padding: 0 5px;}
#soaHeader nav ul li.system a {width:163px;}
#soaHeader nav ul li.special{padding: 0 5px;}
#soaHeader nav ul li.special a {width:177px;}
#soaHeader nav ul li.guidance{padding: 0 5px;}
#soaHeader nav ul li.guidance a {width:296px;}
#soaHeader nav ul li.faq{padding: 0 5px;}
#soaHeader nav ul li.faq a {width:100px;}
/*
#soaHeader nav ul li.entry {padding-right:0;}
#soaHeader nav ul li.entry  a {width:154px;}
#soaHeader nav ul li.twitter {padding-left:0;}
#soaHeader nav ul li.twitter a {width:414px;}
#soaHeader nav ul li.entry {margin:0 -6px 0 -6px;}
*/

#soaHeader nav ul li.story   a:before {background-position:-108px 0;}
#soaHeader nav ul li.system  a:before {background-position:-261px 0;}
#soaHeader nav ul li.special a:before {background-position:-434px 0;}
#soaHeader nav ul li.guidance a:before {background-position:-621px 0;}
#soaHeader nav ul li.faq a:before {background-position:-930px 0;}
/*
#soaHeader nav ul li.entry   a:before {background-position:-470px 0;}
#soaHeader nav ul li.twitter a:before {background-position:-648px 0;}
#soaHeader nav ul li.special a:before {background-image:url(/soa/images/special.png); background-position:0 0;}
*/
#soaHeader nav ul li.story   a:after {background-position:-108px -40px;}
#soaHeader nav ul li.system  a:after {background-position:-261px -40px;}
#soaHeader nav ul li.special a:after {background-position:-434px -40px;}
#soaHeader nav ul li.guidance a:after{background-position:-621px -40px;}
#soaHeader nav ul li.faq a:after{background-position:-930px -40px;}
/*
#soaHeader nav ul li.entry   a:after {background-position:-470px -40px;}
#soaHeader nav ul li.twitter a:after {background-position:-648px -40px;}
#soaHeader nav ul li.special a:after {background-image:url(/soa/images/special_active.png); background-position:0 0;}
*/
#soaHeader nav ul li a:hover:before {opacity:0.5;}
#soaHeader nav ul li.close {display:none;}
#soaContents #spmask,
.sptoggle{display:none !important;}

/* soaFooter */
#soaFooter {text-align:center; max-width:910px; margin:0 auto; padding:35px 0 0; position:relative; z-index:10;}
#soaFooter .bnr {padding-top:50px; width:1200px; margin-left:-145px; font-size:0; line-height:1;}
#soaFooter .bnr + .bnr {padding-top:20px;}
#soaFooter .bnr li {display:inline-block; padding:0 10px;}
#soaFooter .bnr li:nth-child(n+3) {margin-top:20px;}
#soaFooter .bnr li img {width:348px; height:auto;}
#soaFooter .sns {margin:13px 0 0;}
#soaFooter .sns li {display:inline-block; margin:0 1px;}
#soaFooter .sns li img {height:62px; width:auto;}
#soaFooter a img {transition:0.5s;}
#soaFooter a:hover img {opacity:0.5;}
#soaFooter .spec {position:absolute; left:474px; top:44px; text-align:left; color:#fff;}
#soaFooter .spec h2 {background:url(/soa/images/spec.png) left top no-repeat; width:165px; height:55px; text-indent:200%; overflow:hidden; white-space:nowrap; position:relative;}
#soaFooter .spec dl {font-size:14px; line-height:35px; letter-spacing:0.2em; position:relative; padding:0 0 0; width:500px;}
#soaFooter .spec dl dt {float:left; font-weight:bold;}
#soaFooter .spec dl dd {zoom:1; overflow:hidden;}

#soaContents main {width:1100px; margin:0 auto 0; position:relative; padding:0; z-index:10; font-size:0; line-height:1; text-align:center;}
#soaContents .spbr {display:none;}

#soaContents .secondlogo {position:absolute; left:24px; top:100px;}
#soaContents .secondlogo a{transition:0.5s;}




/*
	JS
*/

/*	modal */
#modalMask {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(70,70,70,0.95); z-index:100000; display:none;}
#modalContent {position:fixed; left:0; top:0; width:100%; height:100%; z-index:100001; display:none; cursor:pointer;}
#modalContent div.mc {width:1000px; height:638px; position:fixed; left:50%; top:50%; margin-left:0px; margin-top:0; z-index:10; padding:63px 0; transition:0.8s ease;
-webkit-transform:scale(0,0); -moz-transform:scale(0,0); -o-transform:scale(0,0); -ms-transform:scale(0,0); transform:scale(0,0);}
#modalContent.view div.mc {-webkit-transform:scale(1,1); -moz-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1);}
#modalContent div.mc iframe {width:1000px; height:560px; position:relative; z-index:10000;}
#modalContent div.mc:before{content:''; width:100%; height:100%; position:absolute; left:0; top:0; z-index:10;}
#modalContent .close {position:absolute; right:-6px; top:0px; opacity:0; transition:0.3s; z-index:20;}
#modalContent.view .close{opacity:1;}
#modalContent .close a{display:block; width:53px; height:53px; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(/soa/images/btn_close.png) left top no-repeat; position:relative; transition:0.5s;}
#modalContent .close a:hover {opacity:0.5;}

.pagetop {display:none;}

/*openingtext*/
html.noscroll,body.noscroll{overflow: hidden;}
#openingtext {position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align: center; background: #000;z-index:1000 !important;}
#openingtext div {width: 100%; opacity: 0; position: absolute; left: 0; top: 0;}
#openingtext div p {color: #fff; letter-spacing: 0.05em; font-size: 21px; letter-spacing: 0.14em; margin: 4px 0;}
#openingtext div p span {display: inline-block; position: relative;}
#openingtext div p em {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000;}
#openingtext div p em:after{content: ''; width: 20%; height: 100%; background: url(/soa/images/openingmask.png) left center no-repeat; position: absolute; left: -19%; top: 0; z-index: 10;}
#openingtext div p b{font-weight: normal;}
#openingtext .close {position: fixed; right: 30px; top: 60px; display: none;}
#openingtext .close a{display: block; width: 53px; height: 53px; background: url(/soa/images/btn_close.png) left top no-repeat; text-indent: 200%; overflow: hidden; white-space: nowrap; transition: 1s;}
#openingtext .close a:hover {opacity: 0.5;}
#openingtext .openingbgm {position: fixed; left: 0; bottom: 30px; width: 100%; display: none;}
#openingtext .openingbgm a{display: block; background: url(/soa/images/btn_bgmoff.jpg) left top no-repeat; width: 129px; height: 33px; margin: 0 auto; text-indent: 200%; overflow: hidden; white-space: nowrap; position: relative; transition: 1s;}
#openingtext .openingbgm a:after{content: ''; background: url(/soa/images/btn_bgmon.jpg) left top no-repeat; width: 129px; height: 33px; position: absolute; left: 0; top: 0; opacity: 0; transition: 1s;}
#openingtext .openingbgm a.play:after {opacity: 1;}
#openingtext .openingbgm a:hover {opacity: 0.5;}

}

@media screen and (min-width:1920px){#soaContents:before {background-size:100% auto !important; width:100%; height:100%; margin:0; left:0;}}

@media screen and (max-width:640px){

#sqexHeader-black_rsp ,
#sqexFooter {width:100%; width:100vw;}
#soaContents:before {content:''; width:100%; height:2400px; background:url(/soa/images/sp/bg.jpg) center top no-repeat #000; background-size:100% auto; position:fixed; left:0; top:0;}

#soaContents {padding-bottom:0; padding-bottom:0; width:100%; width:100vw; overflow:hidden; position:relative;}
#soaContents main {margin:0 auto 28px; margin-bottom:8.75vw; position:relative; z-index:10; font-size:0; line-height:1; text-align:center;}
#soaContents #spmask{width:100%; height:100%; position:fixed; left:0; top:0; background:rgba(70,70,70,0.95); z-index:900000; opacity:1; display:none;}

/* #soaHeader */
#soaHeader {width:100%; height:100%; position:fixed; left:0; top:-101%; z-index:1000000; transition:top 1s ease; }
.menuopen #soaHeader {top:0;}
#soaHeader nav {height:100%; width:100%; overflow:hidden; overflow-y:scroll;  padding:27px 0; padding:8.4375vw 0;}
#soaHeader nav ul li {text-align:center;}
#soaHeader nav ul li + li {margin-top:28px; margin-top:8.75vw;}
#soaHeader nav ul li a{display:block; color:#fff; height:37px; height:11.5625vw; position:relative; overflow:hidden; text-indent:200%; white-space:nowrap;}
#soaHeader nav ul li a:before{content:''; background:url(/soa/images/sp/menu.png) left top no-repeat; background-size:640px auto; background-size:200vw auto; position:absolute; left:0; top:0; width:320px; height:100%; width:100vw;}
.oldandroid #soaHeader nav ul li a:before {left:50%; margin-left:-160px;}
#soaHeader nav ul li a:after{content:''; background:url(/soa/images/sp/menu.png) 100% top no-repeat; background-size:640px auto; background-size:200vw auto; position:absolute; left:0; top:0; width:320px; height:100%; width:100vw; opacity:0;}
.oldandroid #soaHeader nav ul li a:after {left:50%; margin-left:-160px;}
#soaHeader nav ul li.close {margin-top:43px; margin-top:13.4375vw;}
#soaHeader nav ul li.story  a:before{background-position:0 -65px; background-position:0 -20.3125vw;}
#soaHeader nav ul li.system a:before{background-position:0 -130px; background-position:0 -40.625vw;}
#soaHeader nav ul li.special  a:before{background-position:0 -195px; background-position:0 -60.9375vw;}
#soaHeader nav ul li.guidance a:before{background-position:0 -260px; background-position:0 -81.25vw;}
#soaHeader nav ul li.faq  a:before{background-position:0 -325px; background-position:0 -101.5625vw;}
#soaHeader nav ul li.close  a:before{background-position:0 -396px; background-position:0 -124.875vw;}

#soaHeader nav ul li.story  a:after{background-position:-320px -65px; background-position:-100vw -20.3125vw;}
#soaHeader nav ul li.system a:after{background-position:-320px -130px; background-position:-100vw -40.625vw;}
#soaHeader nav ul li.special a:after{background-position:-320px -195px; background-position:-100vw -60.9375vw;}

.sptoggle {position:fixed; right:12px; top:-102px; z-index:10000; transition:top 1s ease; padding:12px 0 0; right:1.875vw; padding:1.875vw 0 0; top:-17.5vw; top: 0;}
.windowloaded .sptoggle {top:0;}
.sptoggle img {width:56px; height:auto; width:17.5vw;}
.fixed + .sptoggle {top:0}

/* soaFooter */
#soaFooter {text-align:center; margin:0 auto 23px; margin-bottom:7.1875vw; padding:0; position:relative; z-index:10;}

#soaFooter .bnr {margin-bottom:33px; margin-bottom:10.3125vw; font-size:0; line-height:1;}
#soaFooter .bnr + .bnr {margin-top:-13px; margin-top:-10.3125vw; padding-top:4.6875vw;}
#soaFooter .bnr li {display:block;}
#soaFooter .bnr li img {width:290px; height:auto; width:90.625vw;}
#soaFooter .bnr li + li {margin-top:15px; margin-top:4.6875vw;}

#soaFooter .spec {color:#fff; margin-bottom:18px; margin-bottom:5.625vw;}
#soaFooter .spec h2 img {width:320px; margin:0px auto 4px; margin-bottom:1.25vw; width:100vw;}
#soaFooter .spec dl {font-size:11px; font-size:3.4375vw; line-height:23px; line-height:7.34375vw; letter-spacing:0.2em; position:relative; padding:5px 0 0;}
#soaFooter .spec dl dt {display:inline; font-weight:bold;}
#soaFooter .spec dl dd {display:inline;}

#soaFooter .sns {margin:0;}
#soaFooter .sns li {display:inline-block; margin:0 2px; margin:0 1.14375vw;}
#soaFooter .sns li img {height:52px; width:auto; height:16.09375vw;}

#soaContents .spbr {display:inline-block;}
#soaContents .pcbr {display:none;}

#soaContents .secondlogo {position:absolute; left:11px; top:7.5px; top:2.34375vw; left:3.4375vw;}
#soaContents .secondlogo a img {height:62px; width:auto; height:18.90625vw;}

.pagetop {display:block; margin-bottom:26px; margin-bottom:8.28125vw; margin-top:7.5px; margin-top:2.34375vw;}
.pagetop a{display:block;}
.pagetop img {width:100%; height:auto;}

/*
	JS
*/

/*	modal */
#modalMask {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(70,70,70,0.95); z-index:100000; display:none;}
#modalContent {position:fixed; left:0; top:0; width:100%; height:100%; z-index:100001; display:none; cursor:pointer;}
#modalContent div.mc {width:1000px; height:638px; position:fixed; left:50%; top:50%; margin-left:0px; margin-top:0; z-index:10; padding:63px 0; transition:0.8s ease; -webkit-transform:scale(0,0); -moz-transform:scale(0,0); -o-transform:scale(0,0); -ms-transform:scale(0,0); transform:scale(0,0);}
#modalContent.view div.mc {-webkit-transform:scale(1,1); -moz-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1);}
#modalContent div.mc iframe {width:1000px; height:560px; position:relative; z-index:0;}
#modalContent .close {position:absolute; right:-6px; top:0px; opacity:0; transition:0.3s; z-index:20;}
#modalContent.view .close{opacity:1;}
#modalContent .close a{display:block; width:53px; height:53px; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(/soa/images/btn_close.png) left top no-repeat; position:relative; transition:0.5s;}
#modalContent .close a:hover {opacity:0.5;}

/*openingtext*/
html.noscroll,body.noscroll {overflow: hidden;}
.noscroll #soaContents{position: fixed; top: 0;}
#openingtext {position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align: center; background: #000;z-index:10000 !important;}
#openingtext div {width: 100%; opacity: 0; position: absolute; left: 0; top: 0;}
#openingtext div p {color: #fff; letter-spacing: 0.05em; padding: 9px 0; padding: 2.825vw 0;}
#openingtext div p b{font-weight: normal; display: block;}
#openingtext div p b + b {margin-top: 2px; margin-top: 0.625vw;}
#openingtext div p span {display: inline-block; position: relative; font-size:14px; font-size: 4.375vw; letter-spacing: 0.15em;}
#openingtext div p em {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000;}
#openingtext div p em:after{content: ''; width: 20%; height: 100%; background: url(/soa/images/openingmask.png) left center no-repeat; position: absolute; left: -20%; top: 0; z-index: 10; background-size:cover;}
#openingtext .close {position: fixed; right: 14px; right: 4.375vw; top: 64px; top: 15.65625vw; display: none;}
#openingtext .close a{display:block; width:53px; height:53px; width: 10.9375vw; height: 10.9375vw; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(/soa/images/btn_close.png) left top no-repeat; position:relative; transition:0.5s; background-size: 100% auto;}
#openingtext .openingbgm {position: fixed; left: 0; bottom: 20px; bottom: 4.375vw; width: 100%; display: none;}
#openingtext .openingbgm a{display: block; background: url(/soa/images/sp/btn_bgmoff.png) left top no-repeat; width: 121px; height: 25px; width: 37.65625vw; height: 7.8125vw; margin: 0 auto; text-indent: 200%; overflow: hidden; white-space: nowrap; position: relative; transition: 1s; background-size: 100% auto;}
#openingtext .openingbgm a:after{content: ''; background: url(/soa/images/sp/btn_bgmon.png) left top no-repeat #000; width: 121px; height: 25px; width: 37.65625vw;  height: 7.8125vw; position: absolute; left: 0; top: 0; opacity: 0; transition: 1s; background-size: 100% auto;}
#openingtext .openingbgm a.play:after {opacity: 1;}
}



#gridJSSW {z-index:1000000000 !important;}
#sePlayer,#bgmPlayer,#openingBgmPlayer {position:fixed; left:-9999px; top:-9999px;}
.fade1,.fade2 {opacity:0;}