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

/*.mincho {font-family:游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; font-weight: 700;}*/
.mincho {font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; font-weight: 700;}
.ie11 .mincho {font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;}


a{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;}
section {clear:both; zoom:1;}
article:after,section:after,.clrFx:after{content:''; clear:both; display:block;}
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;}


/*
	square enix module overwrite
__________________________________________________*/
#sqexHeader-black_rsp {z-index:100000 !important; position:relative; font-size:0; line-height:1; min-width: 1200px;}
#sqexFooter {z-index:100; position:relative;  min-width: 1200px;}


/*
	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:#fff;}
.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;}

/* palt */
p,.mincho,.palt {-moz-font-feature-settings: "halt"; -webkit-font-feature-settings: "halt"; font-feature-settings: "halt"; letter-spacing: 0.5px;}


/*

	PC/SP STYLE

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

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

/* first */
#contents .first {/*filter: brightness(200%) drop-shadow(0 0 40px rgba(255,255,255,0.5));*/ transition:filter 2.81s ease, opacity 2.8s ease; opacity: 0; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-delay: 0.58s;}
.windowloaded #contents .first {opacity: 1; /*filter: brightness(100%) drop-shadow(0 0 0 rgba(255,255,255,0));*/}

/*

	PC/SP STYLE

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

.sptoggle {position: fixed; right: 0; top: 29px; z-index: 1000; padding: 0; transition: 0.3s;}
.menuopen .sptoggle{opacity: 0;}
.sptoggle a {display: block; background: url(/thelastremnant/images/menu.png) center center no-repeat #142d23; width: 60px; height:60px; background-size: 100% auto; transition: 0.8s;}
.sptoggle a:hover{filter: brightness(1.7);}
.ie11 .sptoggle a:hover{filter: brightness(1.7);}

#sitenav {position: fixed; right: 0; top: 0; width: 640px; height: 100%; max-height: 765px; background: rgba(0,0,0,0.7); z-index: 100000; padding:  0 0;}
#sitenav p.close {position: absolute; right: 0; top: 0; padding: 18px 15px;}
#sitenav p.close a{display: block; background: url(/thelastremnant/images/btn_close.png) center center no-repeat; background-size: 63px 63px; height: 63px; width: 63px; transition: 0.3s;}
#sitenav p.close a:hover{transform: scale(0.9);}
#sitenav ul {height: 100%; overflow: auto; padding: 96px 0 0;}
#sitenav ul li a {display: block; height: 49px; position: relative;}
#sitenav ul li a::after,
#sitenav ul li a::before{content: ''; background: url(/thelastremnant/images/nav.png) left top no-repeat; position: absolute; left: 0; top: 0; height: 100%; width: 100%;}
#sitenav ul li a::before {background-position: -640px 0; opacity: 0; transition: 0.3s;}
#sitenav ul li a.active {pointer-events: none;}
#sitenav ul li a.active::before{opacity: 1;}
#sitenav ul li a[href*='introduction']::after {background-position: 0 -86px;}
#sitenav ul li a[href*='introduction']::before{background-position: -640px -86px;}
#sitenav ul li a[href*='story']::after {background-position: 0 -172px;}
#sitenav ul li a[href*='story']::before{background-position: -640px -172px;}
#sitenav ul li a[href*='characters']::after {background-position: 0 -258px;}
#sitenav ul li a[href*='characters']::before{background-position: -640px -258px;}
#sitenav ul li a[href*='system']::after {background-position: 0 -344px;}
#sitenav ul li a[href*='system']::before{background-position: -640px -344px;}
#sitenav ul li a[href*='special']::after {background-position: 0 -430px;}
#sitenav ul li a[href*='special']::before{background-position: -640px -430px;}
#sitenav ul li a[href='#spec']::after {background-position: 0 -516px;}
#sitenav ul li a[href='#spec']::before{background-position: -640px -516px;}
#sitenav ul li {margin-bottom: 37px;}
#sitenav ul li a {transition: 0.8s;}
#sitenav ul li a:hover {opacity: 0.7;}

#sitenav {transform: translate(641px,0); transition:transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);}
.menuopen #sitenav {transform: translate(0,0); transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);}

#sitenav ul li a.comingsoon {pointer-events: none; opacity: 0.3;}

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

	PC STYLE

**************************************************************/


#contents  {background:url(/thelastremnant/images/bg.jpg) center top no-repeat fixed #fff;}
html.noscroll,body.noscroll {overflow: hidden;}
#contents {min-width:1200px; padding-bottom:0; font-size: 0; line-height: 1;}
#contents main { margin:0 auto 0; position:relative; padding:0; z-index:10; font-size:0; line-height:1; text-align:center;}
.sp-item {display:none;}

/* bgm */
#bgm {z-index:10000; position: absolute; height: 29px; width: 102px; text-align: center;  left: 0; top: 19px; font-size: 0;}
#bgm .status a {display:block; height:44px; position: relative;}
#bgm .status a:after {content:''; background:url(/thelastremnant/images/bgm-off.png); width: 100%; height: 29px; position:absolute; left: 0; top: 0; opacity: 1; transition: 0.8s; filter: brightness(1); backface-visibility: hidden;}
#bgm .status a:before {content:''; background:url(/thelastremnant/images/bgm.png); width: 100%; height: 29px; position:absolute; left: 0; top: 0; opacity: 0; transition: 0.8s; filter: brightness(1); backface-visibility: hidden;}
#bgm .status.active a:after {opacity: 0;}
#bgm .status.active a:before{opacity: 1;}
#bgm .status a:hover:before,
#bgm .status a:hover:after{filter: brightness(1.3);}
.ie11 #bgm .status a:hover {opacity: 0.7;}


}
@media screen and (min-width:641px){
    #contents {background-size: cover;}
}

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

	SP STYLE

**************************************************************/

#sqexHeader-black_rsp,
#sqexFooter {min-width: inherit; width: 100vw;}

#wrapper {width: 100vw; overflow: hidden;}
#contents {padding-bottom:0; width:100vw; overflow:hidden; position:relative;}
#contents::after  {content: ''; background:url(/thelastremnant/images/sp/bg.jpg) center top no-repeat; width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 0;}

#contents main {position:relative; z-index:10; font-size:0; line-height:1; text-align:center;}
#contents main img {width: 100%; height: auto;}

.sp-item {display:inline-block;}
.pc-item {display:none !important;}


/* bgm */
#bgm {z-index:10000; position: absolute; height: 6.563vw; width: 23.438vw; text-align: center;  left: 3.125vw; top: 3.125vw; font-size: 0;}
#bgm .status a {display:block; height: 6.563vw; position: relative;}
#bgm .status a:after {content:''; background:url(/thelastremnant/images/sp/bgm-off.png); width: 100%; height: 6.563vw; position:absolute; left: 0; top: 0; opacity: 1; transition: 0.8s; filter: brightness(1); backface-visibility: hidden; background-size: auto 100%;}
#bgm .status a:before {content:''; background:url(/thelastremnant/images/sp/bgm.png); width: 100%; height: 6.563vw; position:absolute; left: 0; top: 0; opacity: 0; transition: 0.8s; filter: brightness(1); backface-visibility: hidden; background-size: auto 100%;}
#bgm .status.active a:after {opacity: 0;}
#bgm .status.active a:before{opacity: 1;}
#bgm .status a:hover:before,
#bgm .status a:hover:after{filter: brightness(1.3);}
.ie11 #bgm .status a:hover {opacity: 0.7;}


.sptoggle {position: fixed; right: 4.688vw; top: 4.688vw; z-index: 1000; padding: 0; transition: 0.3s; padding: 4.688vw 0 0;}
.sptoggle a {display: block; background: url(/thelastremnant/images/sp/nav.jpg) center center no-repeat #142d23; width: 12.5vw; height:12.5vw; background-size: 100% auto; transition: 0.3s;}
.sptoggle a:hover{filter: brightness(1.7);}

#sitenav { width: 100vw; height: 100%; max-height: 100vh; font-size: 0; line-height: 1;}
#sitenav p.close {padding: 4.688vw;}
#sitenav p.close a{background-size: 9.844vw 9.844vw; height: 9.844vw; width: 9.844vw;}

#sitenav ul {padding: 15vw 0 0;}
#sitenav ul li a {height: 7.656vw;}
#sitenav ul li a.active::after{opacity: 0;}
#sitenav ul li a::after{background-size: 200vw 88.281vw;}
#sitenav ul li a::before {background-position: -100vw 0; opacity: 0; transition: 0.3s; background-size: 200vw 88.281vw;}
#sitenav ul li a[href*='introduction']::after {background-position: 0 -13.438vw;}
#sitenav ul li a[href*='introduction']::before{background-position: -100vw -13.438vw;}
#sitenav ul li a[href*='story']::after {background-position: 0 -26.875vw;}
#sitenav ul li a[href*='story']::before{background-position: -100vw -26.875vw;}
#sitenav ul li a[href*='characters']::after {background-position: 0 -40.313vw;}
#sitenav ul li a[href*='characters']::before{background-position: -100vw -40.313vw;}
#sitenav ul li a[href*='system']::after {background-position: 0 -53.75vw;}
#sitenav ul li a[href*='system']::before{background-position: -100vw -53.75vw;}
#sitenav ul li a[href*='special']::after {background-position: 0 -67.188vw;}
#sitenav ul li a[href*='special']::before{background-position: -100vw -67.188vw;}
#sitenav ul li a[href='#spec']::after {background-position: 0 -80.625vw;}
#sitenav ul li a[href='#spec']::before{background-position: -100vw -80.625vw;}
#sitenav ul li {margin-bottom: 5.781vw;}

#sitenav {transform: translate(101vw,0);}

h2 img {width: 100vw; height: auto;}

}


/* 
	loader
*********************/
#loader {background: rgba(0,0,0,1); width: 100%; height: 100%; z-index: 100000; position: fixed; left: 0; top: 0;}
#loader .loader{width: 64px; height: 64px; position: fixed; right: 50vw; top: 50%; margin: -32px -32px 0 0;}
/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */
.la-ball-clip-rotate,
.la-ball-clip-rotate > div {
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.la-ball-clip-rotate {
    display: block;
    font-size: 0;
    color: #fff;
}
.la-ball-clip-rotate.la-dark {
    color: #333;
}
.la-ball-clip-rotate > div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}
.la-ball-clip-rotate {
    width: 32px;
    height: 32px;
}
.la-ball-clip-rotate > div {
    width: 32px;
    height: 32px;
    background: transparent;
    border-width: 2px;
    border-bottom-color: transparent;
    border-radius: 100%;
    -webkit-animation: ball-clip-rotate .75s linear infinite;
       -moz-animation: ball-clip-rotate .75s linear infinite;
         -o-animation: ball-clip-rotate .75s linear infinite;
            animation: ball-clip-rotate .75s linear infinite;
}
.la-ball-clip-rotate.la-sm {
    width: 16px;
    height: 16px;
}
.la-ball-clip-rotate.la-sm > div {
    width: 16px;
    height: 16px;
    border-width: 1px;
}
.la-ball-clip-rotate.la-2x {
    width: 64px;
    height: 64px;
}
.la-ball-clip-rotate.la-2x > div {
    width: 64px;
    height: 64px;
    border-width: 4px;
}
.la-ball-clip-rotate.la-3x {
    width: 96px;
    height: 96px;
}
.la-ball-clip-rotate.la-3x > div {
    width: 96px;
    height: 96px;
    border-width: 6px;
}
/*
 * Animation
 */
@-webkit-keyframes ball-clip-rotate {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-moz-keyframes ball-clip-rotate {
    0% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    50% {
        -moz-transform: rotate(180deg);
             transform: rotate(180deg);
    }
    100% {
        -moz-transform: rotate(360deg);
             transform: rotate(360deg);
    }
}
@-o-keyframes ball-clip-rotate {
    0% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    50% {
        -o-transform: rotate(180deg);
           transform: rotate(180deg);
    }
    100% {
        -o-transform: rotate(360deg);
           transform: rotate(360deg);
    }
}
@keyframes ball-clip-rotate {
    0% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
             -o-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
           -moz-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

/*
	js styles
******************************/
#baseW {position: fixed; left: 0; bottom: 0; width: 100%; width: 100vw; height: 1px; z-index: -1111; opacity: 0;}
.analytics {position:fixed; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden;}
#imageloaded {position: fixed; left: -9999px; font-size: 0; line-height: 1; height: 1px; width: 1px; overflow: hidden;}

.animation-up ,
.animation ,
.animation.itemshow ,
.animation-trigger,
.uatablet .animation {}

.nicescroll-rails#ascrail2000-hr,
.nicescroll-rails#ascrail2000-hr div,
.nicescroll-rails#ascrail2000 ,
.nicescroll-rails#ascrail2000 div {z-index: 10000 !important; cursor: pointer;}
.nicescroll-rails#ascrail2001 ,
.nicescroll-rails#ascrail2001 div {z-index: 999999 !important; cursor: pointer;}

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


/*	modal */
#modalMask {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.9); 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 {position:fixed; left:0; top:0; margin-left:0px; margin-top:0; z-index:10; padding: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); text-align: center; width: 100%; height: 100%;}
#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 {position:relative; margin: 0 auto;}
#modalContent .close {display:block; width:80px; height:80px; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(/thelastremnant/images/btn_close.png) center center no-repeat; position:absolute; top: 20px; right: 20px; transition:0.8s; z-index: 100; background-size: 77px auto;}
#modalContent .close:hover{transform: scale(0.9);}


@media screen and (max-width:640px){
#modalContent div.mc{padding: 12.125vw 0 0; height: 61.25vw !important; position:absolute; top: 50%; margin-top: -40.75vw;}
#modalContent .close{display:block; width:9.844vw; height:9.844vw; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(/thelastremnant/images/btn_close.png) left top no-repeat; position:absolute; right: 3.75vw; top: 0; cursor: pointer; background-size: 9.844vw auto; margin-top: 0;}
#modalContent div.mc iframe {margin:0 auto!important;}
}

#baseVW{ width:100vw; position: fixed; left: -9999px; opacity: 0;}


/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{-moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}

/* 
User Style:
Change the following styles to modify the appearance of Colorbox.  They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:rgba(0,0,0,0.9);}
#colorbox{outline:0;}
#cboxContent{margin-top:100px; margin-bottom: 40px; overflow:visible; background:none;}
.cboxIframe{background:#fff;}
#cboxLoadedContent{background:none; padding:0; border: none;}
#cboxLoadingGraphic{}
#cboxTitle{position:absolute; top:-0; left:0; color:#000;}
#cboxCurrent{position:absolute; top:-0; right:0; text-indent:-9999px;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px;}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

/*#cboxClose{background:url(/thelastremnant/images/btn_close.png) left top no-repeat; width:62px; height:62px; background-size:100% auto; right:0; top:-72px !important; transition:0.5s;}*/
#cboxClose {display:block; width:80px; height:80px; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(/thelastremnant/images/btn_close.png) center center no-repeat; top: 10px; right: 0; transition:opacity 0.8s ,transform 0.8s; z-index: 100; background-size: 77px auto; position: fixed !important; opacity: 0;}
#cboxClose:hover{transform: scale(0.9);}


@media screen and (max-width:640px){
#cboxContent{margin-top:12vw; margin-bottom: 12vw;}
#cboxLoadingOverlay img {max-width: 100vw;}
#cboxClose{display:block; width:9.844vw; height:9.844vw; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(/thelastremnant/images/btn_close.png) left top no-repeat; position:absolute; right: 0; top: 0; cursor: pointer; background-size: 9.844vw auto; margin-top: 0;}


}