@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{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;}
*{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;}
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;}
.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%;min-height:100px;}
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;}
body,#wrapper{background:#000;}

main{font-size:0;line-height:1;position:relative;}


#contents{position:relative;min-width: 1400px; margin: 0 auto;/* border: 1px solid red;*/ overflow: hidden; z-index: 100;}

#wrapper {position: relative; text-align: center;/* overflow: ;*/ background: url(/img/pc/bg_second.jpg) center top repeat-y; min-width: 1400px;}
@media screen and (min-width:1401px){
#wrapper {background-size: 100% auto;}
}
body#top #wrapper {background: #000;}


#siteHeader {width: 100%; min-width: 1400px; height: 60px; background: rgba(0,0,0,0.7); z-index: 10000; position: fixed; left: 0; top: 0;}
#siteHeader .wrap {max-width: 1400px; min-width: 1200px; margin: 0 auto; /*background: url(/img/pc/_nav.png) center top no-repeat;*/ position: relative; height: 60px;}
#siteHeader nav {width: 973px; height: 60px; position: absolute; left: 250px; top: 0;}
/*#siteHeader nav::after{content: ''; width: 100%; height: 100%; background: url(/img/pc/nav_top.png) left top no-repeat; position: absolute; left: 0; top: 0; z-index: -1;}*/
#siteHeader nav ul {display: flex; font-size: 0; line-height: 1; align-content: center; justify-content: flex-start; margin-left: 16px;}
#siteHeader nav ul li {padding:0; position: relative;}
#siteHeader nav ul li a{display: block; height: 60px; width: 100px; position: relative;}
#siteHeader nav ul li a::after{content: ''; background: rgba(173,15,145,0.5); width: 100%; height: 100%; position: absolute; left: 0; top: 0; transform: translate(17px,-61px) skewX(-16deg); transition: 0.1s;}
#siteHeader nav ul li a:hover::after,
#siteHeader nav ul li a.active::after{opacity: 1; transform: translate(0,0) skewX(-16deg); z-index: -1;}
#siteHeader nav ul li i {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 74px;}
#siteHeader nav ul li i::after,
#siteHeader nav ul li i::before{content: ''; background: url(/img/pc/nav.png) left top no-repeat; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.3s; opacity: 1;}
#siteHeader nav ul li i::before{background-position: 0 -70px; opacity: 0;}
#siteHeader nav ul li a:hover i::after {opacity: 0;}
#siteHeader nav ul li a:hover i::before {opacity: 1;}
#siteHeader nav ul li a.active i::after {opacity: 0;}
#siteHeader nav ul li a.active i::before {opacity: 1;}

#siteHeader nav ul li a.top{width: 100px;}
#siteHeader nav ul li a.top i::after{background-position: -17px 0;}
#siteHeader nav ul li a.top i::before{background-position: -17px -70px;}
#siteHeader nav ul li [href*='news'] {width: 111px;}
#siteHeader nav ul li [href*='news'] i::after{background-position: -133px 0;}
#siteHeader nav ul li [href*='news'] i::before{background-position: -133px -70px;}
#siteHeader nav ul li [href*='system']{width: 213px;}
#siteHeader nav ul li [href*='system'] i::after{background-position: -260px 0;}
#siteHeader nav ul li [href*='system'] i::before{background-position: -260px -70px;}
#siteHeader nav ul li [href*='character']{width: 189px;}
#siteHeader nav ul li [href*='character'] i::after{background-position: -489px 0;}
#siteHeader nav ul li [href*='character'] i::before{background-position: -489px -70px;}
#siteHeader nav ul li a.special{width: 159px;}
#siteHeader nav ul li a.special i::after{background-position: -693px 0;}
#siteHeader nav ul li a.special i::before{background-position: -693px -70px;}
#siteHeader nav ul li [href*='faq']{width: 90px;}
#siteHeader nav ul li [href*='faq'] i::after{background-position: -867px 0;}
#siteHeader nav ul li [href*='faq'] i::before{background-position: -867px -70px;}

#siteHeader nav ul li span {display: block; position: absolute; left: 50%; bottom: -7px; margin-left: -79px;}
#siteHeader p.klabgames {position: absolute; left: 34px; top: 17px;}
#siteHeader p.klabgames img {height: 18px; width: auto;}

#siteFooter {position:relative;z-index:100; width: 100%; min-width: 1400px; background: url(/img/pc/bg_footer.jpg) center top no-repeat; font-size: 0; line-height: 1;}
@media screen and (min-width:1661px){
#siteFooter {background-size: 100% auto;}
}
#siteFooter .sns.top::before{content: ''; width: 170px; height: 21px; position: absolute; left: 50%; top: 26px; margin-left: -85px; background: url(/img/pc/h2_share.png) left top no-repeat; z-index: 10;}
#siteFooter .sns.top::after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; margin-left: 0; background:rgba(106,14,112,0.3);}
#siteFooter .sns.top {height: 227px; padding: 100px 0 0; margin: 0 auto; display: flex; justify-content: center; position: relative;}
#siteFooter .sns.top li{padding: 0 44px; position: relative; z-index: 10;}
#siteFooter .wrap{width:1400px;margin:0 auto; padding-left: 200px; position: relative;}
#siteFooter .spec .wrap{padding:90px 0 38px 208px; height: 439px; text-align: left;}
#siteFooter .spec img{width:378px;height:auto;float:left;}
#siteFooter .spec dl{float:left;font-size:15px;line-height:21px;padding:0 0 0 40px;color:#fff;}
#siteFooter .spec dl dt{width:110px;text-align:center;float:left;margin:15px 0 0;background:#811886;letter-spacing:0.1em;}
#siteFooter .spec dl dd{zoom:1;overflow:hidden;padding:0 0 0 17px;margin:15px 0 0;}
#siteFooter .spec dl dd span{font-size:12px;}
#siteFooter .spec ul {display: flex; float: left; padding: 23px 0 0 40px;}
#siteFooter .spec ul li {padding-right: 5px;}
#siteFooter .spec ul img {height: 66px; width: auto;}

#siteFooter .copyright{background:#000;}
#siteFooter .copyright .wrap{padding:38px 0 32px 200px;position:relative;}
#siteFooter .copyright .sns {padding: 0 25px 20px; position: relative; vertical-align: top;float:left;}
#siteFooter .copyright .sns {background: url(/img/pc/footer_official.jpg) center 4px no-repeat; vertical-align: top; padding-top: 44px;}
#siteFooter .copyright .sns li {display: inline-block; padding: 0 25px; vertical-align: top;}
#siteFooter .copyright .bnrs {display: inline-block; padding: 0 25px 20px; vertical-align: top;}
#siteFooter .copyright .bnrs li {display: inline-block;margin-right:10px;}
#siteFooter .copyright dl{font-size:11px;line-height:21px;color:#8a8a8a;letter-spacing:0.05em; text-align: left; padding-bottom: 20px;}
#siteFooter .copyright p{font-size:11px;line-height:21px;color:#8a8a8a;letter-spacing:0.1em; text-align: left;}
#siteFooter .copyright .app li img{width:92px;}
#siteFooter .copyright .app {float: left; padding: 0 20px 0 0;}
#siteFooter .copyright .app li{padding-right:11px;display:inline-block;vertical-align:top}
#siteFooter .copyright .app + div {zoom:1; overflow: hidden;}

#siteFooter a img{transition:0.3s; backface-visibility: hidden;}
#siteFooter a:hover img{opacity:0.7;}
#siteFooter ul.link{padding:8px 0 0; text-align: left;}
#siteFooter ul.link li{font-size:13px;line-height:21px;display:inline-block;vertical-align:top;padding-right:26px;}
#siteFooter ul.link a{color:#fff;}

.pagetopwrap {position: relative; z-index: 200; width: 910px; margin: 0 auto;}
.pagetop{position:absolute;right:0;bottom:-42px;z-index:1000;width:84px;height:84px;transform:translateY(0);transition:transform 0.5s ease-in-out;opacity:1; font-size: 0;}
.pagetop.show{transform:translateY(0);}
.pagetop.scrollup{transform:translateY(0);}
.pagetop.end{opacity:0;}
.pagetop::after{content:'';width:100%;height:100%;background:url(/img/pc/btn_pagetop.png) left top no-repeat;position:absolute;left:0;top:0;z-index:-1;transition:0.3s; background-size: cover;}
.pagetop.scrollup p{position:relative; z-index: 100;}
.pagetop a{position:relative;display:block;width:84px;height:84px;z-index:10;}
.pagetop:hover::after{opacity:0.5;transform:scale(0.9);}

* {outline:none;}

#loader{background:rgba(0,0,0,1);width:100%;height:100%;z-index:100000000;position:fixed;left:0;top:0;}
#loader .loader{position:fixed;left:50%;top:50%;background:url(/img/pc/loading02.png) center 134px no-repeat;width:200px;height:211px;margin:-106px 0 0 -100px;padding:134px 0 0; /*transition:opacity 0.6s ease;*/ opacity: 0;}
#loader .loader .pu{display:block;position:absolute;left:50%;top:0;width:200px;height:116px;margin:0 0 0 -100px;
/*-webkit-animation-name:fuwafuwa;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease;animation-name:fuwafuwa;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:ease;*/}
#loader .loader .pu::after{content:'';background:url(/img/pc/loading01.png) center 0 no-repeat;width:100%;height:100%;position:absolute;left:0;top:0;
background-position:center top; -webkit-animation:patapata .4s steps(2) infinite;animation:patapata .4s steps(2) infinite;}
@keyframes patapata{0%{background-position:center 0;}100%{background-position:center -240px;}}
@-webkit-keyframes patapata{0%{background-position:center 0;}100%{background-position:center -240px;}}
#loader .loader div{height:78px;position:relative;width:164px;margin:0 auto;background:url(/img/pc/loading02.png) center top no-repeat;}
#loader .loader div span{display:block;position:absolute;left:0;top:0;width:164px;height:78px;opacity:1;overflow:hidden;}
#loader .loader div span:nth-child(1){background:url(/img/pc/loading06.png) center top no-repeat;-webkit-animation:patapata2 0.8s steps(3) infinite;animation:patapata2 0.8s steps(3) infinite;}
@keyframes patapata2{0%{background-position:center -0px;}
100%{background-position:center -300px;}
}
@-webkit-keyframes patapata2{0%{background-position:center -0px;}
100%{background-position:center -300px;}
}
@-webkit-keyframes fuwafuwa{0%{-webkit-transform:translate3d(0,0,0);}
50%{-webkit-transform:translate3d(0, -10px,0);}
100%{-webkit-transform:translate3d(0, 0,0);}
}
@keyframes fuwafuwa{0%{transform:translate3d(0, 0,0);}
50%{transform:translate3d(0, -10px,0);}
100%{transform:translate3d(0, 0,0);}
}
#baseVW{position:fixed;left:0;bottom:0;width:100%;width:100vw;height:100%;height:100vh;z-index:-1111;opacity:0;}
#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{}
div[class=nicescroll-rails],
div[class=nicescroll-rails] div{z-index:999999 !important;cursor:pointer;}
#gridJSSW{z-index:1000000000 !important;}
#sePlayer,#bgmPlayer,#openingBgmPlayer{position:fixed;left:-9999px;top:-9999px;}


/*
	JS
*/

/*	modal */
#modalMask {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.74); 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:-15px; top:0px; opacity:0; transition:0.3s; z-index:20;}
#modalContent.view .close{opacity:1;}
#modalContent .close a{display:block; width:55px; height:44px; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(/img/pc/btn_close.png) left top no-repeat; position:relative; transition:0.5s;}
#modalContent .close a:hover {opacity:0.5;}
.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:rgba(0,0,0,0)}.slick-list,.slick-slider{position:relative;display:block}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
#voicePlayer {position: fixed; left: -9999px;}