@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;}

/*
	square enix module overwrite
__________________________________________________*/
/* sqFooter */
#sqexHeader-white {z-index:100; position:relative; min-width:1100px;}
#___gcse_0 {display:none;}
.windowloaded #___gcse_0 {display:block;}
/* sqFooter */
#sqexFooter {z-index:100; position:relative; min-width:1100px;}
/* 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:14px; line-height:23px; z-index:0;}
#gs3Wrap{margin:0 auto; zoom:1; position:relative; overflow:hidden; min-width:1100px; z-index:0;}
@media screen and (max-width:1100px){#gs3Wrap{z-index:1;}}
.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%; margin:0 auto; z-index:10; position:relative; padding:0 20px; min-width:1100px;}
section {width:100%; margin:0 auto; clear:both; zoom:1; position:relative; z-index:10; padding:0;}
.wrap   {width:1100px; margin:0 auto; clear:both; zoom:1; position:relative; z-index:10; padding:0;}
article   {width:1100px; 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;}


/* #gs3header */
#gs3header {background:rgba(57,63,84,0.6); height:64px; position:absolute; left:0; top:0; width:100%; z-index:200; min-width:1100px; padding:0; transition:top 1s;}
#gs3header.slidein {top:0;}
#gs3header.fixed {position:fixed; top:0;}

#gs3header h1 {position:absolute; top:64px; left:0;}
#gs3header h1 a{display:block;}
#gs3header h1 a:hover img {transition:opacity 0.5s; height:auto;}
#gs3header h1 a:hover img{opacity:0.7;}
#gs3header nav {height:64px; overflow:hidden; float:left; position:relative; left:20px;}
#gs3header nav ul {font-size:0; line-height:1;}
#gs3header nav ul li {display:inline-block; padding:0 10px 0 0;}
#gs3header nav ul li a{display:block; height:64px; width:42px; background-image:url(/gs3/common/images/nav-top.png); background-position:center 20px; background-repeat:no-repeat; text-indent:200%; overflow:hidden; white-space:nowrap; transition:opacity 0.5s;}
/*#gs3header nav ul li a:hover{opacity:0.8;}*/
#gs3header nav ul li:nth-child(2) a{width:138px; background-image:url(/gs3/common/images/nav-introduction.png);}
#gs3header nav ul li:nth-child(3) a{width:63px; background-image:url(/gs3/common/images/nav-story.png);}
#gs3header nav ul li:nth-child(4) a{width:72px; background-image:url(/gs3/common/images/nav-system.png);}
#gs3header nav ul li:nth-child(5) a{width:120px; background-image:url(/gs3/common/images/nav-characters.png);}
#gs3header nav ul li:nth-child(6) a{width:95px; background-image:url(/gs3/common/images/nav-location.png);}
#gs3header nav ul li:nth-child(7) a{width:183px; background-image:url(/gs3/common/images/nav-moviedownload.png);}
#gs3header nav ul li:nth-child(8) a{width:58px; background-image:url(/gs3/common/images/nav-staff.png);}
#gs3header nav ul li:nth-child(8) a{width:45px; background-image:url(/gs3/common/images/nav-link.png);}
#gs3header nav ul li.disabled a{opacity:0.3; cursor:default;}
#gs3header nav ul:before{content:''; background:#fff; width:42px; height:1px; opacity:0.4; position:absolute; left:0; top:20px; transition:0.5s ease-out;}
#gs3header nav ul:after {content:''; background:#fff; width:42px; height:1px; opacity:0.4; position:absolute; left:0; top:43px; transition:0.5s ease-out;}
#gs3header nav ul.gn1:before,#gs3header nav ul.gn1:after {left:0; width:42px;}
#gs3header nav ul.gn2:before,#gs3header nav ul.gn2:after {left:52px; width:138px;}
#gs3header nav ul.gn3:before,#gs3header nav ul.gn3:after {left:200px; width:63px;}
#gs3header nav ul.gn4:before,#gs3header nav ul.gn4:after {left:273px; width:72px;}
#gs3header nav ul.gn5:before,#gs3header nav ul.gn5:after {left:355px; width:120px;}
#gs3header nav ul.gn6:before,#gs3header nav ul.gn6:after {left:485px; width:95px;}
#gs3header nav ul.gn7:before,#gs3header nav ul.gn7:after {left:589px; width:183px;}
#gs3header nav ul.gn8:before,#gs3header nav ul.gn8:after {left:782px; width:58px;}
#gs3header nav ul.gn8:before,#gs3header nav ul.gn8:after {left:782px; width:45px;}
#gs3header nav ul.gn9:before,#gs3header nav ul.gn9:after {left:849px; width:45px;}
#gs3header .sns {float:right; font-size:0; line-height:1; padding:15px 24px 0 0;}
#gs3header .sns li {display:inline-block; padding-left:10px;}
#gs3header .sns li a{display:block; width:33px; height:33px; position:relative; text-indent:200%; overflow:hidden; white-space:nowrap;}
#gs3header .sns li a:before{content:''; background:url(/gs3/common/images/nav-twitter-ov.png) left top no-repeat; opacity:0; transition:0.5s; width:33px; height:33px; position:absolute; left:0; top:0;}
#gs3header .sns li.facebook a {background:url(/gs3/common/images/nav-facebook.png) left top no-repeat;}
#gs3header .sns li.facebook a:before{background:url(/gs3/common/images/nav-facebook-ov.png) left top no-repeat;}
#gs3header .sns li.twitter  a {background:url(/gs3/common/images/nav-twitter.png) left top no-repeat;}
#gs3header .sns li.twitter a:before{background:url(/gs3/common/images/nav-twitter-ov.png) left top no-repeat;}
#gs3header .sns li a:hover:before{opacity:1;}

/*
	rote
*/
#rote{position:fixed; overflow:hidden; z-index:10; left:0; top:0; width:100%; min-width:1100px; height:100%; opacity:0; transition:0.8s ease;
-webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); transform:scale(1.1,1.1);}
#rote.loaded {opacity:1; -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1);}
#rote.unloaded {opacity:0; /*-webkit-transform:scale(0.9,0.9); -moz-transform:scale(0.9,0.9); -o-transform:scale(0.9,0.9); -ms-transform:scale(0.9,0.9); transform:scale(0.9,0.9);*/}
#rote:before{content:''; width:2336px; height:2336px; position:absolute; left:50%; top:0; margin:-756px 0 0 -1178px; background:url(/gs3/common/images/bg-rote-base.png) center top no-repeat; z-index:10;}
#rote:after {content:''; width:2336px; height:2336px; position:absolute; left:50%; top:0; margin:-756px 0 0 -1178px; background:url(/gs3/common/images/bg-rote-1.png) center top no-repeat; z-index:20; animation: spin1 40s infinite linear;}
#rote .spin2:after {content:''; width:2336px; height:2336px; position:absolute; left:50%; top:0; margin:-756px 0 0 -1178px; background:url(/gs3/common/images/bg-rote-5.png) center top no-repeat; z-index:20; animation: spin2 100s infinite linear;}

@keyframes spin1 {from {transform: rotate(0deg);} to { transform: rotate(360deg);}}
@keyframes spin2 {from {transform: rotate(0deg);} to { transform: rotate(-360deg);}}

/*
	fit
*/
#bgfit{background-position:center 0; background-repeat:no-repeat; background-size:cover; width:1700px; height:100%; z-index:0; position:fixed; left:50%; top:0; margin-left:-850px; min-width:1100px; opacity:0; transition:opacity 0.5s ease-out;}
#bgfit.w1460{width:1460px; margin-left:-730px;}
#bgfit.loaded {opacity:1;}
@media screen and (min-width:1700px){
	#bgfit {width:100%; left:0; margin:0;}
}
@media screen and (min-width:1460px){
	#bgfit.w1460 {width:100%; left:0; margin:0;}
}
@media screen and (max-width:1100px){
	#bgfit {left:0; margin-left:-300px;}
	#bgfit.w1460{margin-left:-180px;}
}

/* 
	main parts
*/
main {padding-top:90px; padding-bottom:50px; z-index:100; opacity:0; transition:opacity 0.8s ease; min-width:1100px; min-height:480px;}
main.loaded {opacity:1;}


/*
	btn
*/
main .btn{font-size:0; line-height:1;}
main .btn a{display:inline-block; background:url(/gs3/common/images/btn-base.png) right bottom no-repeat; position:relative; height:30px; line-height:30px; font-size:0;}
main .btn a:before{content:''; background:url(/gs3/common/images/btn-base-ov.png) right bottom no-repeat; position:absolute; right:0; top:0; width:100%; height:100%; opacity:0; transition:0.5s;}
main .btn a img {position:relative; z-index:10;}
main .btn a:hover:before{opacity:1;}
main .btn-center{text-align:center;}
.page-btn {position:fixed; right:11px; top:50%; margin-top:-67px; z-index:100; font-size:0; line-height:1; opacity:0; transition:0.8s;}
.windowloaded .page-btn {opacity:1;}
.page-btn  a{display:block; width:86px; height:133px; text-indent:200%; overflow:hidden; white-space:nowrap; position:relative;}
.page-btn  a:after{content:''; background:url(/gs3/common/images/btn-next.png) left top no-repeat; width:100%; height:100%; position:absolute; left:0; top:0; transition:opacity 0.6s;}
.page-btn  a:before{content:''; background:url(/gs3/common/images/btn-next-ov.png) left top no-repeat; width:100%; height:100%; position:absolute; left:0; top:0; opacity:0; transition:opacity 0.2s;}
.page-btn  a:hover:after{opacity:0;}
.page-btn  a:hover:before{opacity:1;}
.page-btn.page-prev{left:11px; right:inherit;}
.page-btn.page-prev a:after {background-image:url(/gs3/common/images/btn-prev.png);}
.page-btn.page-prev a:before{background-image:url(/gs3/common/images/btn-prev-ov.png);}



/*
	modal
*/
#modalMask {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.67); 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:38px 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 div.mc:before{content:''; width:100%; height:100%; position:absolute; left:0; top:0; z-index:10;}
#modalContent .close {position:absolute; right:0; top:0px; opacity:0; transition:0.3s; z-index:20;}
#modalContent.view .close{opacity:1;}
#modalContent .close a{display:block; width:107px; height:28px; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(/gs3/common/images/btn-close.png) left top no-repeat; position:relative; transition:background-color 0.5s;}
#modalContent .close a:hover{background-color:rgba(255,255,255,0.2);}


/*
	js
*/
#voicePlayer {position:fixed; left:-9999px;}

.imgov {position:relative; display:block;}
.imgov span.ov{position:absolute; left:0; top:0; opacity:0;}
.imgov:hover span.ov{opacity:1;}
.imgov:hover .ovbase{opacity:0;}

#gs3loading {position:fixed; left:50%; top:50%; z-index:0; margin:-22px 0 0 -22px; transition:opacity 0.4s ease,transform 0.4s ease; opacity:0;}
.windowloaded #gs3loading {opacity:0 !important; -webkit-transform:scale(0.7,0.7); -moz-transform:scale(0.7,0.7); -o-transform:scale(0.7,0.7); -ms-transform:scale(0.7,0.7); transform:scale(0.7,0.7);}

.smartphone #gs3whitepadding,
.tablet #gs3whitepadding{display:none !important;}