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

.jingifont {font-family: 'Noto Serif Japanese' !important; font-weight: normal !important;}

a{cursor:pointer;}
a:link{ color:#fff;}
a:visited{ color:#fff;}
a:hover {color:#fff; transition:background 0.2s;}
a:active{color:#fff;}
*{-webkit-tap-highlight-color:rgba(1,101,190,0.1);}
.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;}

/*
	BASE SET
__________________________________________________*/
/*
html{overflow:hidden;}
html.windowloaded {overflow: visible;}
*/
html,body {margin:0; padding:0;}
body {position:static; overflow:auto; width:auto; *overflow-y:hidden; color:#303131; font-size:15px; line-height:1.5; z-index:0;}
.over-section{margin:0 -360px; 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;}

/*
	square enix module overwrite
__________________________________________________*/
/* sqFooter */
#sqexHeader-white_rsp {z-index:100000 !important; position:absolute; font-size:0; line-height:1; width: 100%;}
/* sqFooter */
#sqexFooter {z-index:100; position:relative; }


/*

	PC/SP STYLE

**************************************************************/
#index-if {color: #303131; overflow: hidden; position: relative;}
#index-if::after{content: ''; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 0; background: url(/index-if/images/bg.gif) left top #fff;}

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

	PC STYLE

**************************************************************/
html.noscroll,body.noscroll {overflow: hidden;}

body {width: 100%; min-width: 1200px;}
#sqexFooter ,#sqexHeader-white_rsp {min-width:1200px;}
#contents,#wp {width: 100%; min-width: 1200px; overflow: hidden;}

aside{display: none !important;}

#index-if {min-width:1200px; padding:0 0 0 0; font-size: 0; line-height: 1;}
#index-if main { margin:0 auto 0; position:relative; padding:0; z-index:10; font-size:0; line-height:1; text-align:center; }
#index-if .sp-item {display:none;}

#index-if_header {height:51px; position: absolute; left: 0; top: 33px; width: 100%; z-index: 1000; min-width: 1200px;}
#index-if_header.fixed {position: fixed; top: -5px;}
#index-if_header::after{content: ''; background: rgba(0,124,202,0.9); position: absolute; left: 0; top: 5px; width: 100%; height: 41px; z-index: -1;}
#index-if_header .scroll {min-width: 1200px; position: relative;}
#index-if_header nav {display: flex; background: url(/index-if/images/nav.png) left top no-repeat; padding: 0 0 0 15px;}
#index-if_header nav a{display: block; height: 45px; padding: 0 25px; width: 96px; transition: 0.3s; position: relative;}
#index-if_header nav a:hover{background-color: rgba(255,255,255,0.1);}
#index-if_header nav a::after{content: ''; background: url(/index-if/images/nav_arr.png) left top no-repeat; width: 27px; height: 51px; position: absolute; left: -5px; top: 0px; opacity: 0; transition: 0.3s;}
#index-if_header nav a.active::after{opacity: 1; left: 0;}
#index-if_header nav a.disabled {pointer-events: none;}
#index-if_header nav a[href*='news'] {width: 112px;}
#index-if_header nav a[href*='about'] {width: 124px;}
#index-if_header nav a[href*='system'] {width: 133px;}
#index-if_header nav a[href*='character'] {width: 188px;}
#index-if_header nav a[href*='movie'] {width: 123px;}
#index-if_header nav a[href*='special'] {width: 140px;}

#index-if_header nav a b{position: absolute; left: 50%; bottom: -9px; display: block; margin-left: -30px;}

#index-if_header .sns {width: 163px; height: 51px; background: url(/index-if/images/nav_sns.png) left top no-repeat; position: absolute; right: 0; top: 0;}
#index-if_header .sns li {display: inline-block;}
#index-if_header .sns li a {display: block; height: 45px; width: 50px; transition: 0.3s;}
#index-if_header .sns li a:hover{background-color: rgba(255,255,255,0.1);}
#index-if_header .sns li a[href*='facebook'] {width: 42px;}
#index-if_header .sns li a[href*='line'] {width: 65px;}

#index-if .pagetop {position: relative; z-index: 1000; min-width: 1200px; width: 100%; text-align: right; height: 0;}
#index-if .pagetop a{display: inline-block; background: url(/index-if/images/btn_pagetop.png) left top no-repeat; width: 159px; height: 47px; top: -47px; position: relative; transition: 0.3s;}
#index-if .pagetop a:hover{filter: brightness(1.4);}
.ie11 #index-if .pagetop a:hover{opacity: 0.7}

#menutoggle,
#spmenu {display: none;}
}

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


@media screen and (min-width:1100px){}
@media screen and (min-width:1920px){}
@media screen and (max-width:640px){

/*

	SP STYLE

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

#index-if {overflow: hidden; position: relative;}
#index-if .sp-item {display:inline-block;}
#index-if .pc-item {display:none !important;}

#index-if_header ~ section {transition: opacity 0.3s;}
.menuopen #index-if_header ~ section {opacity: 0;}

#menutoggle{position: fixed; left: 0; top: 100px; z-index: 1000;}
#spmenu {position: absolute; right: 0; top:44px /*calc(64 / 640 * 100vw )*/; z-index: 1000; transition: transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);}
#spmenu.fixed {position: fixed; width: 100vw; top: 0;}
.menuopen #spmenu {transform: translate( calc(118 / 640 * 100vw ) , calc(-118 / 640 * 100vw ));}

#spmenu a {display: block; position: absolute; right: 0; top: 0; width: calc(118 / 640 * 100vw ); height: calc(118 / 640 * 100vw ); background: url(/index-if/images/sp/menu.png) left top no-repeat; z-index: 1000; cursor: pointer; font-size: 0;}

#index-if_header{position: absolute; z-index: -10000; width: 100vw; height: 100%; top:calc(44 / 640 * 100vw ); left: 0; opacity: 0; backface-visibility: hidden;}

.menuopen #index-if_header {z-index: 1000; opacity: 1;}
.menuanim #index-if_header {z-index: 1000; opacity: 1;}

#index-if_header .scroll {opacity: 0;background: url(/index-if/images/sp/bg.gif) repeat-y center top / 100vw auto;}
.menuopen #index-if_header .scroll{transition:opacity 0.55s 0.01s  cubic-bezier(0.215, 0.61, 0.355, 1); opacity: 1;}
.menuanim #index-if_header .scroll{transition:opacity 0.35s 0s  cubic-bezier(0.215, 0.61, 0.355, 1); opacity: 0;}

#index-if_header.fixed {position: fixed; top: 0;}

#index-if_header .close {position: absolute; right: 0; top:0; z-index: 1000; transform: translate( calc(118 / 640 * 100vw ) , calc(-118 / 640 * 100vw )); transition: transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);}
.menuopen #index-if_header .close{transform: translate( 0,0);}

#index-if_header .close a{ width: calc(100 / 640 * 100vw ); height: calc(100 / 640 * 100vw ); display: block; background: url(/index-if/images/sp/btn_close.png) center center / cover;}
#index-if_header .scroll {height: 100%; overflow: hidden; overflow-y: auto; width: 100vw; padding: 0 0 calc(64 / 640 * 100vw );}


#index-if_header nav {background: url(/index-if/images/sp/nav.png) no-repeat center top / 100vw auto; font-size: 0; padding:calc(50 / 640 * 100vw ) 0;}
#index-if_header nav a{display: block; height: calc(116 / 640* 100vw); text-align: center;}
#index-if_header nav a i {display: inline-block; width: calc(110 / 640 * 100vw); height: 100%; position: relative;}
#index-if_header nav a i::after,
#index-if_header nav a i::before{content: ''; width: calc(44 / 640 * 100vw); height: calc(58 / 640 * 100vw); background: url(/index-if/images/sp/nav_arr.png) center center / cover !important; position: absolute; left: calc(-64 / 640 * 100vw); top:50%; margin-top: calc(-31 / 640*100vw); opacity: 0; transition: opacity 0.3s;}
#index-if_header nav a i::before{transform: scale(-1,1); left: inherit; right: calc(-64 / 640 * 100vw);}
#index-if_header nav a.active i::after,
#index-if_header nav a.active i::before {opacity: 1;}
#index-if_header nav a[href*='news']  i{width: calc(154 / 640 * 100vw);}
#index-if_header nav a[href*='news'] i::after,
#index-if_header nav a[href*='news'] i::before{margin-top: calc(-32 / 640*100vw);}
#index-if_header nav a[href*='about'] i{width: calc(196 / 640 * 100vw);}
#index-if_header nav a[href*='about'] i::after,
#index-if_header nav a[href*='about'] i::before{margin-top: calc(-32 / 640*100vw);}

#index-if_header nav a[href*='system'] i{width: calc(210 / 640 * 100vw);}
#index-if_header nav a[href*='system'] i::after,
#index-if_header nav a[href*='system'] i::before{margin-top: calc(-32 / 640*100vw);}
#index-if_header nav a[href*='character'] i{width: calc(340 / 640 * 100vw);}
#index-if_header nav a[href*='character'] i::after,
#index-if_header nav a[href*='character'] i::before{margin-top: calc(-32 / 640*100vw);}
#index-if_header nav a[href*='movie'] i{width: calc(180 / 640 * 100vw);}
#index-if_header nav a[href*='movie'] i::after,
#index-if_header nav a[href*='movie'] i::before{margin-top: calc(-32 / 640*100vw);}
#index-if_header nav a[href*='special'] i{width: calc(230 / 640 * 100vw);}
#index-if_header nav a[href*='special'] i::after,
#index-if_header nav a[href*='special'] i::before{margin-top: calc(-32 / 640*100vw);}

#index-if_header .sns {display: flex; justify-content: center; font-size: 0; margin-top: calc(-10 / 640* 100vw);}
#index-if_header .sns a {width: calc(89 / 640* 100vw); height: calc(87 / 640* 100vw); display: block; margin: 0 calc(15 / 640* 100vw);}
#index-if_header .sns a[href*='twitter']{background: url(/index-if/images/btn_twitter.png) no-repeat left top / auto 100%;}
#index-if_header .sns a[href*='line']{background: url(/index-if/images/btn_line.png) no-repeat left top / auto 100%;}
#index-if_header .sns a[href*='facebook']{background: url(/index-if/images/btn_facebook.png) no-repeat left top / auto 100%;}
#index-if_header nav a.disabled,
#index-if_header nav a.spdisabled{pointer-events: none;}
#index-if_header nav a.spdisabled b{display: none;}

#index-if_header nav a {position: relative;}
#index-if_header nav a b{position: absolute; left: 50%; bottom: calc(3/640*100vw); display: block; margin-left:calc(-58/640*100vw);}
#index-if_header nav a b::after{content: ''; background: url("/index-if/images/sp/new.png") left top no-repeat; background-size: cover; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#index-if_header nav a b img {width:calc(116/640*100vw); height: auto; opacity: 0;}

#index-if_header .scroll nav{transform: scale(1); opacity: 1; transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: center top;}
#index-if_header .sns{transform: translateY(0vh); opacity: 1; transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: center top;}
.menuopen #index-if_header .sns,
.menuopen #index-if_header .scroll nav{transform: scale(1); opacity: 1;}

#index-if .pagetop {position: relative; z-index: 100; width: 100%; text-align: right; height: 0; font-size: 0;}
#index-if .pagetop a{display: inline-block; background: url(/index-if/images/btn_pagetop.png)  no-repeat left top / cover; width: calc(159 / 640* 100vw); height: calc(47 / 640* 100vw); top: calc(-47 / 640* 100vw); position: relative; transition: 0.3s;}
#index-if .pagetop a:hover{filter: brightness(1.4);}

}



/* 

    loader
    
***********************************************************************************/
#loader {background: rgba(255,255,255,0); width: 100vw; height: 100vh; z-index: 1001000; position: fixed; left: 0; top: 0; display: block ;}
#loader::after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top:0;
background: -moz-linear-gradient(left, #009ada 0%, #0956a7 100%);
background: -webkit-linear-gradient(left, #009ada 0%,#0956a7 100%);
background: linear-gradient(to right, #009ada 0%,#0956a7 100%);
opacity:1; z-index: -1;
}
#loader .loader{width: 175px; height: 175px; position: fixed; right: 50vw; top: 50%; margin: -87px -87px 0 0; opacity:1;}
#loader .loader div{animation: rotate-anime 1.0s cubic-bezier(0.77, 0, 0.175, 1) infinite; background: url(/index-if/images/loading.png); width: 100%; height: 100%; transform-origin: center center;}


@keyframes rotate-anime {
0%  {transform: rotate(0);}
100%  {transform: rotate(360deg);}
}
.imgloaded #loader .loader {transform: scale(0); transition: 0.7s 0.1s cubic-bezier(0.755, 0.05, 0.855, 0.06); opacity: 0;}

/*
 * 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
******************************/


/*	modal */
#modalMask {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,115,202,0); z-index:1010000; display:none;}
#modalMask::after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top:0;
background: -moz-linear-gradient(left, #009ada 0%, #0956a7 100%);
background: -webkit-linear-gradient(left, #009ada 0%,#0956a7 100%);
background: linear-gradient(to right, #009ada 0%,#0956a7 100%);
opacity: 0.8
}
#modalContent {position:fixed; left:0; top:0; width:100%; height:100%; z-index:1010001; 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;}
#moviemodalapi {position: relative; margin: 0 auto;}

#modalContent .close {position: absolute; right: 0; top: 0; z-index: 100;}
#modalContent .close a {display:block; width:80px; height:80px; overflow:hidden; white-space:nowrap; background:url(/index-if/images/btn_close.png) center center no-repeat; position:absolute; top: 0px; right: 5px; transition:0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; background-size: 42px auto; backface-visibility: hidden; text-indent: -9999px; overflow: hidden; filter: drop-shadow(0 0 8px #00eaff)}
@media screen and (min-width:801px){
#modalContent .close a:hover{filter: brightness(1.2) drop-shadow(0 0 8px #00eaff); transform: scale(1.2); }
}
.ie11 #modalContent .close:hover {opacity:0.5;}

@media screen and (max-width:800px){
#modalContent div.mc{padding: 14.103vw 0 0; height: 61.25vw !important; position:absolute; top: 50%; margin-top: -40.75vw;}

#modalContent .close {position: absolute; right: 2.564vw; top: 0px; z-index: 100;}
#modalContent .close a {display:block; width:14.103vw; height:14.103vw; overflow:hidden; white-space:nowrap; background:url(/index-if/images/btn_close.png) center center no-repeat; position:absolute; top: 0px; right: 0; transition:0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; background-size: 9.872vw auto; backface-visibility: hidden; text-indent: -9999px; overflow: hidden;}

#modalContent div.mc iframe {margin:0 auto!important;}
}

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

#imageloaded,
.imageloaded{position: fixed; left: -9999px; font-size: 0; line-height: 1; height: 1px; width: 1px; overflow: hidden;}
.analytics {position:fixed; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden;}

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

#ascrail2000,
div[class='nicescroll-rails'],
div[class='nicescroll-rails'] div  {z-index: 999999 !important; cursor: pointer;}

#gridJSSW {z-index:1000000000 !important;}

[data-src]{opacity: 0; width: 0; height: 0;}
[data-src].lazyimgload {opacity: 1; width: inherit; height: inherit; transition: opacity 0.3s;}

/* drag */
/*
body{
user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}
*/