@charset "utf-8";
@font-face {
  font-family: 'mplus';
  src: url("../webfont/mplus.woff2")  format('woff2'),
       url("../webfont/mplus.woff")  format('woff');
}
@font-face {
  font-family: 'oldfont';
  src: url("../webfont/noto.woff2")  format('woff2'),
       url("../webfont/noto.woff")  format('woff');
}
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:'mplus','Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;line-height:1.8;}
button{font-family:'mplus','Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;cursor:pointer;}
.oldfont {font-family: 'oldfont' !important; font-weight: normal !important;}

a{cursor:pointer;}
a:link{color:#373d85;}
a:visited{color:#373d85;}
a:hover{color:#373d85;}
a:active{color:#373d85;}
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
* {outline:none;}
* {max-height:999999px;}
.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;}
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:#000;font-size:20px;line-height:1.5;z-index:0;}
.over-section{margin:0 -400px;zoom:1;position:relative;*overflow-y:hidden;clear:both;padding:0;}
.over-section:after{content:'';clear:both;display:block;}
main{width:100%;min-height:380px;}
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{font-size:0;line-height:1;position:relative;}

#contents{position:relative;opacity:0;transition:opacity 0.6s ease; min-width: 1300px; margin: 0 auto;/* border: 1px solid red;*/ z-index: 10;}
.windowloaded #contents{opacity:1;}

#wrapper {position: relative; text-align: center; overflow: hidden; min-width: 1300px; padding: 88px 0 0;}

/*動画モーダル*/
.moviemodal{position:relative; display:block;}
.moviemodal:before{content:''; position:absolute; top:0; right:0; left:0; bottom:0; width:162px; height:162px; margin:auto; background:url(../images/icon-play.png) no-repeat left top / 100% auto; z-index:1; transition:transform 0.3s;}
.windowloaded .moviemodal:hover:before{transform:scale(1.1);}
/*詳細ボタン*/
a.details{position:absolute; transition:opacity 0.3s;}
a.details:hover{opacity:0.7;}


/* siteheader*/
#siteheader{background:url(../images/common/bg_nav-repeat.png) center top repeat-x; height:45px; position: fixed; left: 0; top: 0; width: 100%; min-width:1400px; font-size: 0; line-height: 1; z-index:10000;}
#siteheader nav{position:relative; max-width:1400px; min-width:1400px; margin:0 auto; height:45px; padding:0 3px 0 8px;}
#siteheader nav p{height:45px; line-height:45px; display:inline-block;}
#siteheader nav p.logo{float:left; margin:7px 31px 0 0;}

#siteheader nav ul {float:left;}
#siteheader nav ul li {display: inline-block; padding: 0; vertical-align: top; position: relative;}
#siteheader nav ul li::after{content: ''; width: 1px; background: #fff; position: absolute; right: -1px; top: 13px; height: 19px; z-index: 10;}
#siteheader nav ul li:last-child::after{display: none;}
#siteheader nav ul a {display: block; height:45px; width: 71px; position: relative; transition: opacity 0.3s ease;}
#siteheader nav ul a:hover{opacity: 0.7; backface-visibility: hidden;}
#siteheader nav ul li a{display:block; width:75px; height:45px; position:relative;}
#siteheader nav ul li.characters a{width:170px;}
#siteheader nav ul li.world a{width:113px;}
#siteheader nav ul li.system a{width:118px;}
#siteheader nav ul li.movie a{width:101px;}
#siteheader nav ul li.special a{width:117px; /*opacity:0.6; pointer-events:none;*/}
#siteheader nav ul li.products a{width:151px;}
#siteheader nav ul li a:before{content:''; background:url(../images/common/nav.png) no-repeat left top; width:100%; height:45px; position:absolute; top:0; left:0; opacity:1;}
#siteheader nav ul li.top a:before{background-position:17px top;}
#siteheader nav ul li.characters a:before{background-position:-58px top;}
#siteheader nav ul li.world a:before{background-position:-228px top;}
#siteheader nav ul li.system a:before{background-position:-338px top;}
#siteheader nav ul li.movie a:before{background-position:-455px top;}
#siteheader nav ul li.special a:before{background-position:-555px top;}
#siteheader nav ul li.products a:before{background-position:-673px top;}
#siteheader nav ul li.comingsoon a{opacity:0.4; pointer-events:none;}
/*アクティブ*/
.top #siteheader nav ul li.top a:before{background-position:17px bottom;}
.characters #siteheader nav ul li.characters a:before{background-position:-58px bottom;}
.world #siteheader nav ul li.world a:before{background-position:-228px bottom;}
.system #siteheader nav ul li.system a:before{background-position:-338px bottom;}
.movie #siteheader nav ul li.movie a:before{background-position:-455px bottom;}
.special #siteheader nav ul li.special a:before{background-position:-555px bottom;}
.products #siteheader nav ul li.products a:before{background-position:-673px bottom;}
/*NEW*/
#siteheader nav ul li.new:before{content:''; position:absolute; right:0; left:0; bottom:-7px; width:82px; height:18px; margin:auto; background:url(../images/common/icon-nav-new.png) no-repeat left top; z-index:10000;}
/*subnav*/
#subnavbg{position:fixed; top:45px; min-height:54px; left:0; width:100%; min-width:1400px; /*background:#4c433ede;*/ z-index:-1; opacity:0; transition:opacity 0.3s/*,height 0.1s,top 0.2s*/;}
#subnavbg.show{opacity:1; z-index:1;}
.subnavwrap{position:absolute; left:0; top:45px; width:100%; min-width:1400px; z-index:1000;}
.subnav{display:none; position:absolute; left:0; top:0; width:100%; min-height:54px; background:rgba(51,44,42,0.85);}
.subnav.world ul{margin-left:280px;}
.subnav.system ul{margin-left:330px;}
.subnav.special ul{margin-left:100px;}
.subnav.products ul{margin-left:400px;}
.subnav .subnavinner{width:1400px; margin:0 auto; text-align:left; padding:18px 45px;}
.subnav ul li{display:inline-block; padding:0 8px; position:relative;}
.subnav ul li::before{content:''; position:absolute; top:0; left:0; bottom:0; width:1px; height:16px; margin:auto; background:#ebdbc4;}
.subnav ul li:first-child::before{content:none;}
.subnav ul li span{ font-size: 12px; color:#f195ab; padding-left: 5px;}
/*.subnav ul li:nth-child(n+2):before{content:''; width:1px; height:14px; position:absolute; left:0; top:50%; background:#ebdbc4; margin-top:-7px;}*/
.subnav ul li a{display:block; padding:0 8px; color:#ebdbc4; font-size:14px; text-decoration:none; line-height:29px; transition:0.3s; letter-spacing:0.15em;}
.subnav ul li a.active{color:#f195ab; font-weight:bold;}
/*.subnav.world ul{text-align:center; transform: translate(-230px);}
.subnav.system ul{text-align: center; transform: translate(200px);}
.subnav.special ul{text-align: right; transform: translate(50px);}*/
/**/
p.menutoggle{display:none;}
#spnav {display:none;}

#siteheader nav div {position:absolute; right:3px; white-space: nowrap; width:434px; transition:right 0.3s;}
#siteheader nav div p {float: left;}
#siteheader nav div p.ps4 {padding:9px 0 0 0;}
#siteheader nav div p.switch {padding: 6px 0 0 18px;}
#siteheader .buy {width: 200px; height: 58px; background: url(../images/common/btn_head_yoyaku.png) left top no-repeat; display: block; padding: 5px 0 0; transition: 0.5s; margin-right: 10px;}
#siteheader .buy a{width: 168px; height: 31px; display: block; margin: 0 auto; position: relative; z-index: 10;}
#siteheader .buy:hover{filter: brightness(120%); transition: 1s;}


/*footer*/
#sitefooter {background:#fff; margin:0; font-size:0; line-height:1; border-top:1px solid #d6d6d6; z-index:10; z-index:110; position:relative; min-width: 1300px;}
#sitefooter .wrap {width:1300px; position:relative; margin:0 auto; padding:45px 0 67px 0; color: #000;}
#sitefooter p.pagetop{position:fixed; right:37px; bottom:-150px; z-index:1000; transition:bottom 0.5s ease;}
#sitefooter p.pagetop.show{bottom:20px;}
#sitefooter p.pagetop a{display:block; width:145px; height:133px; background:url(../images/common/btn-pagetop.png)  left top / 100% auto; transition:opacity 0.5s;}
#sitefooter p.pagetop a:hover{opacity:0.7;}
#sitefooter ul.sns li {display:inline-block; padding:0 5px;}
#sitefooter ul.sns li a{transition:0.5s;}
#sitefooter ul.sns li a:hover{opacity:0.8; transition: 1s;}
#sitefooter ul.link {padding:0 0 35px;}
#sitefooter ul.link li{display:inline-block; padding:0 10px; position:relative;}
#sitefooter ul.link li:nth-child(n+2):before{content:''; width:1px; height:15px; position:absolute; left:0; top:0; background:#000;}
#sitefooter ul.link li a {font-size:14px; line-height:1; color:#000; text-decoration:none; letter-spacing: 0.15em;}
#sitefooter ul.link li a:hover{text-decoration:underline;}
#sitefooter .rights {padding: 35px 0 7px;}
#sitefooter .copyrights {font-size: 12px;}
#sitefooter .copyrights + p{font-size:10px; line-height:1; color:#000; padding:17px 0 25px;}
#sitefooter ul.manual li {display:inline-block; padding: 5px 7.5px;}
#sitefooter ul.manual {margin-bottom: 20px;}
#sitefooter ul.manual li a{transition:0.5s;}
#sitefooter ul.manual li a:hover{opacity:0.8; transition: 1s;}

#sitefooter nav.lang{position:relative}
#sitefooter nav.lang i{position:absolute; top:10px; left:50%; margin-left:-440px; letter-spacing:0.05em; color:#70528d; font-weight:bold; font-size:16px; font-style: normal;}
#sitefooter nav.lang ul{position:relative; display:flex; flex-wrap:wrap; justify-content:center;}
#sitefooter nav.lang ul li{width:calc(165px - 10px); margin:0 5px;}
#sitefooter nav.lang ul li a{position:relative; display:block; width:100%; height:100%; line-height:32px; text-decoration:none; font-size:16px; color:#fff; font-weight:bold; background:#70528d; border:2px solid #70528d; transition:0.3s;}
.ie #sitefooter nav.lang ul li a{padding-top:4px; line-height:28px;}
#sitefooter nav.lang ul li a:before{content:''; position:absolute; top:2px; left:2px; width:calc(100% - 4px); height:calc(100% - 4px); border:2px solid #fff; transition:0.3s;}
#sitefooter nav.lang ul li a:hover{color:#70528d; background:#fff; border:2px solid #70528d;}
#sitefooter nav.lang ul li a:hover:before{border:1px solid #70528d;}
#sitefooter nav.lang ul li a.active{color:#70528d; background:#fff; border:2px solid #70528d; pointer-events:none;}
#sitefooter nav.lang ul li a.active:before{border:1px solid #70528d;}

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


@media screen and (max-width:1400px){
#siteheader nav div{/*left:66%;*/ right:3%;}
#siteheader .buy{margin-right:0;}
#siteheader nav div p.switch{padding-left:6px;}
}


/* bg */
@media screen and (min-width:641px){
body {background: url(../images/common/bg.jpg) center top no-repeat fixed;}
}
@media screen and (min-width:641px) and (min-width:1920px){
body {background-size: 100% auto;}
}


@media screen and (max-width:640px){
.sp-item{display: inline-block !important;}
.pc-item{display: none;}
/*

    SP 

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

#bg01{position:fixed; top:0; left:0; width:100vw; height:100vh; background:url(../images/common/sp/bg.jpg) center top no-repeat / 100% auto; z-index:0;}

body{font-size:2.5vw;}
.over-section{margin:0;}
main{min-height:inherit;}

#contents{min-width: inherit;}
#wrapper {min-width: inherit; padding: 0 0 0;}

/*動画モーダル*/
.moviemodal{position:relative; display:block;}
.moviemodal:before{width:21.563vw; height:21.563vw;}
.windowloaded .moviemodal:hover:before{transform:scale(1);}
/*詳細ボタン*/
a.details{position:absolute; display:block; width:44.375vw; height:14.844vw;}
a.details img{width:100%; height:auto;}


/* siteheader*/
#siteheader {background: url(../images/common/sp/header.png) center/cover; height:calc(58/640*100vw); position: fixed; min-width: inherit; left: 0; top: 0; width: 100vw;
padding: 0 0 0 calc(66/640*100vw);}
#siteheader nav {display: none;}
#siteheader .buy {width: calc(200/640*100vw); height: calc(58/640*100vw); background: url(../images/common/btn_head_yoyaku.png) center / cover; padding: 0;}
#siteheader .buy a{width: calc(168/640*100vw); height: calc(58/640*100vw);}
/*spnav*/
.subnavwrap,#subnavbg{display:none;}
p.menutoggle{display:block;}
#spnav{display:block;}
.menutoggle{position:fixed; right: calc(10/640*100vw); top: calc(56/640*100vw); z-index: 1000; font-size: 0; display: block;}
.menutoggle a{width:calc(82/640*100vw); height: calc(82/640*100vw); background: url(../images/common/sp/btn_menu.png) center /cover ; display:block;}
#spnav {position:fixed; left:0; top:0; background: rgba(255,255,255,0.9); width: 100%; height: 100%; display: block; font-size: 0; line-height:1; opacity:0; z-index:-9999; transition: opacity 0.4s;}
.menuopen #spnav{z-index:100000; opacity: 1; transition:opacity 0.6s;}
.menuanim #spnav{z-index:2000; opacity: 0;}
#spnav .close{height:16.09375vw; position:absolute; width:100%; top:0; left:0; z-index: 10000;}
#spnav .close a{display: block; background:url(../images/common/btn_close.png) center /cover; width: calc(39/640*100vw); height: calc(38/640*100vw); position:absolute; right:calc(22/640*100vw); top:calc(24/640*100vw);}
#spnav .scroll{position:relative; height:100%; overflow:hidden; overflow-y:scroll; padding:0 0 .8125vw; width:100vw;}
#spnav .bg{padding:16.406vw 0 0;}
#spnav ul.link{position:relative; margin-bottom:8.4375vw; text-align:center; z-index:1000;}
#spnav ul.link > li{position:relative;}
#spnav ul.link > li + li{padding-top:3.906vw;}
#spnav ul.link > li a{position:relative; display:block; height:7.344vw; margin-bottom:8.125vw;}
#spnav ul.link > li a::before{content:''; background:url(../images/common/sp/nav.png) no-repeat left top / 100vw auto; position:absolute; width:100%; height:100%; left:0; top:0; transition:0.3s;}
#spnav ul.link > li:nth-child(1) a::before{background-position:left 0;}
#spnav ul.link > li:nth-child(2) a::before{background-position:left -19.844vw;}
#spnav ul.link > li:nth-child(3) a::before{background-position:left -39.688vw;}
#spnav ul.link > li:nth-child(4) a::before{background-position:left -59.531vw;}
#spnav ul.link > li:nth-child(5) a::before{background-position:left -79.375vw;}
#spnav ul.link > li:nth-child(6) a::before{background-position:left -99.219vw;}
#spnav ul.link > li:nth-child(7) a::before{background-position:left -119.063vw;}
#spnav ul.link li.comingsoon a{pointer-events:none; opacity:0.3;}
#spnav ul.btn {text-align: center;}
#spnav ul.btn li a {display: block; height: 20vw; margin: 0 auto;}
/*#spnav ul.btn li a {background: url(../images/common/bnr_atelierdx.png) center top no-repeat ; background-size: auto 100%; width: 79.6875vw;}*/
/*#spnav ul.btn li a {background: url(../images/common/sp/bnr_menu-enquete.png) center top no-repeat ; background-size: auto 100%; width: 79.6875vw;}*/
#spnav ul.btn li a {background: url(../images/common/sp/bnr_menu-trial.png) center top no-repeat ; background-size: auto 100%; width: 79.6875vw;}
/*#spnav ul.btn li:nth-child(n+2) {margin: 2.34375vw 0.625vw 0; width: 39.21875vw; display: inline-block;}*/
/*#spnav ul.btn li:nth-child(n+2) a{background: url(../images/common/btn_shop.png) left top no-repeat ; background-size: 100% auto; width: 39.21875vw;}*/
/*#spnav ul.btn li:nth-child(n+3) a{background: url(../images/common/btn_premium.png) left top no-repeat ; background-size: 100% auto; width: 39.21875vw;}*/

/*アクティブ*/
#spnav ul.link li a.active{color:#f195ab; font-weight:bold;}
#spnav ul.link li a::after{content:none; position:absolute; top:0; right:0; left:0; bottom:0; height:7.188vw; margin:auto; border:1px solid #70528d;}
.top #spnav ul.link li.top a::after{content:''; width:30.781vw;}
.characters #spnav ul.link li.characters a::after{content:''; width:53.594vw;}
.world #spnav ul.link li.world a::after{content:''; width:39.375vw;}
.system #spnav ul.link li.system a::after{content:''; width:39.375vw;}
.movie #spnav ul.link li.movie a::after{content:''; width:41.406vw;}
.special #spnav ul.link li.special a::after{content:''; width:41.406vw;}
.products #spnav ul.link li.products a::after{content:''; width:42.656vw;}
/*NEW*/
#spnav ul.link li a i.new{position:absolute; right:0; left:0; bottom:-4.063vw; width:19.219vw; height:3.906vw; margin:auto; background:url(../images/common/sp/icon-nav-new.png) no-repeat left top / 100% auto; z-index:10000;}

#spnav ul.link ul{display:none; padding:0 1.563vw;}
#spnav ul.link ul.open{display:flex!important; flex-wrap:wrap; justify-content:center; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
#spnav ul.link ul li{position:relative; display:inline-block; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
#spnav ul.link ul li::before{content:''; position:absolute; top:0; left:0; bottom:0; width:1px; height:3.125vw; margin:auto; background:#70528d;}
#spnav ul.link ul li:first-child::before{content:none;}
#spnav ul.link ul li a{margin-bottom:0; padding:0 3.906vw; color:#70528d; text-decoration:none; font-size:3.125vw; line-height:7.344vw; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
#spnav ul.link ul li a::before,#spnav ul.link ul li a::after{content:none!important;}
.ie11 #spnav ul ul.open {margin-top: 3.9rem; display: block;}

#spnav ul.link ul li span{ font-size: 2.5vw; color:#f195ab; padding-left: 1vw;}


/*footer*/
#sitefooter {background:#fff; margin:35vw 0 0 0; font-size:0; line-height:1; border-top:1px solid #ccc; z-index:1000; position:relative; min-width: inherit;}
#sitefooter .wrap {width:100%; position:relative; margin:0 auto; padding:4.6875vw 0 8.906vw; z-index:0;}

#sitefooter p.pagetop{position:absolute; top:-29.062vw; margin:0; z-index:1000; height: 25vw; width: 100vw; left: 0;}
#sitefooter p.pagetop a{display:block; width:27.188vw; height:25vw; background:url(../images/common/btn-pagetop.png) no-repeat left top / 100% auto; margin:0 auto;}


#sitefooter ul.link li a {font-size: 2.34375vw;}
#sitefooter ul.link li.turn {clear: both; margin-top: 2.34375vw;}
#sitefooter ul.link li.turn + li {margin-top: 2.34375vw;}
#sitefooter ul.link li {border-right:1px solid #000;}
#sitefooter ul.link li:nth-child(n+2):before{display: none;}
#sitefooter ul.link li:last-child{border:none;}

#sitefooter ul.sns li {padding: 0 0.78125vw;}
#sitefooter ul.sns li a img {width:10vw; height:auto;}
#sitefooter .rights img {width:100%; height:auto;}
#sitefooter .copyrights {font-size:1.5625vw; line-height:1; color:#000; padding: 0 0 2.8125vw;}
#sitefooter .copyrights + p {padding: 0 0 2.8125vw;}
#sitefooter .copyrights + p.last {padding: 3.4375vw 0 2.8125vw;}

#sitefooter nav.lang i{position:static; display:block; margin:0 0 2.813vw 0; font-size:3.125vw;}
#sitefooter nav.lang ul li{width:calc(36.094vw - 2.188vw); margin:0 1.094vw 1.563vw;}
#sitefooter nav.lang ul li a{line-height:7.5vw; letter-spacing:0.03em; font-size:3.438vw; border:none; transition:auto;}
.android #sitefooter nav.lang ul li a{padding-top:0.781vw; line-height:7.344vw;}
#sitefooter nav.lang ul li a:before{top:0.313vw; left:0.313vw; width:calc(100% - 0.625vw); height:calc(100% - 0.625vw); border:0.313vw solid #fff; transition:auto;}
#sitefooter nav.lang ul li a:hover{color:#373d85; background:#fff; border:0.313vw solid #373d85;}
#sitefooter nav.lang ul li a:hover:before{border:0.156vw solid #373d85;}
#sitefooter nav.lang ul li a.active{color:#373d85; background:#fff; border:0.313vw solid #373d85; pointer-events:none;}
#sitefooter nav.lang ul li a.active:before{border:0.156vw solid #373d85;}

/* bg */
#bg01 {position: fixed; left: 0; top: 0; width:100vw; height: 100vh;background: url(../images/common/sp/bg.jpg) center top no-repeat / 100% auto; z-index: 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(255,255,255,0.9); z-index:100000; display:none;}
#modalContent {position:absolute; left:0; top:0; width:100%; height:100%; z-index:100001; display:none; cursor:pointer; }
#modalContent div.mc {width:1000px; height:638px; position:absolute; left:50%; top:0; margin-left:0px; margin-top:0; z-index:10; padding:80px 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:0px; top:0px; opacity:0; transition:0.3s; z-index:20;}
#modalContent.view .close{opacity:1;}
#modalContent .close a{display:block; width:62px; height:62px; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(../images/common/btn_close.png) left top no-repeat; position:relative; transition:0.5s;}
#modalContent .close a:hover {opacity:0.5; transition: 1s;}
.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}
@media screen and (max-width:640px){
#modalContent .close{position:absolute; top:5.469vw; right:0;}
#modalContent .close a{display:block; background:url(../images/common/btn_close.png) center center no-repeat / 100% auto; width:6.094vw; height:6.094vw;}
#modalContent div.mc{padding:12vw 3.125vw;}
}

/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */
#loader {background:rgba(255,255,255,0.5);width:100%;height:100%;z-index:110000000;position:fixed;left:0;top:0;}
#loader .posi {position: fixed; left: 50%; top: 50%; margin: -16px 0 0 -30px;}
.la-line-scale,
.la-line-scale > div {
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.la-line-scale {
    display: block;
    font-size: 0;
    color: #b48ddc;
}
.la-line-scale.la-dark {
    color: #333;
}
.la-line-scale > div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}
.la-line-scale {
    width: 60px;
    height: 32px;
}
.la-line-scale > div {
    width: 8px;
    height: 32px;
    margin: 2px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    -webkit-animation: line-scale 1.5s infinite ease;
       -moz-animation: line-scale 1.5s infinite ease;
         -o-animation: line-scale 1.5s infinite ease;
            animation: line-scale 1.5s infinite ease;
}
.la-line-scale > div:nth-child(1) {
    -webkit-animation-delay: -1.5s;
       -moz-animation-delay: -1.5s;
         -o-animation-delay: -1.5s;
            animation-delay: -1.5s;
}
.la-line-scale > div:nth-child(2) {
    -webkit-animation-delay: -1.4s;
       -moz-animation-delay: -1.4s;
         -o-animation-delay: -1.4s;
            animation-delay: -1.4s;
}
.la-line-scale > div:nth-child(3) {
    -webkit-animation-delay: -1.3s;
       -moz-animation-delay: -1.3s;
         -o-animation-delay: -1.3s;
            animation-delay: -1.3s;
}
.la-line-scale > div:nth-child(4) {
    -webkit-animation-delay: -1.2s;
       -moz-animation-delay: -1.2s;
         -o-animation-delay: -1.2s;
            animation-delay: -1.2s;
}
.la-line-scale > div:nth-child(5) {
    -webkit-animation-delay: -1.1s;
       -moz-animation-delay: -1.1s;
         -o-animation-delay: -1.1s;
            animation-delay: -1.1s;
}
.la-line-scale.la-sm {
    width: 20px;
    height: 16px;
}
.la-line-scale.la-sm > div {
    width: 2px;
    height: 16px;
    margin: 1px;
    margin-top: 0;
    margin-bottom: 0;
}
.la-line-scale.la-2x {
    width: 80px;
    height: 64px;
}
.la-line-scale.la-2x > div {
    width: 8px;
    height: 64px;
    margin: 4px;
    margin-top: 0;
    margin-bottom: 0;
}
.la-line-scale.la-3x {
    width: 120px;
    height: 96px;
}
.la-line-scale.la-3x > div {
    width: 12px;
    height: 96px;
    margin: 6px;
    margin-top: 0;
    margin-bottom: 0;
}
/*
 * Animation
 */
@-webkit-keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.2);
                transform: scaleY(.2);
    }
    20% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
                color: #d84da0;
    }
}
@-moz-keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.2);
           -moz-transform: scaleY(.2);
                transform: scaleY(.2);
    }
    20% {
        -webkit-transform: scaleY(1);
           -moz-transform: scaleY(1);
                transform: scaleY(1);
                color: #d84da0;
    }
}
@-o-keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.2);
             -o-transform: scaleY(.2);
                transform: scaleY(.2);
    }
    20% {
        -webkit-transform: scaleY(1);
             -o-transform: scaleY(1);
                transform: scaleY(1);
                color: #d84da0;
    }
}
@keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.2);
           -moz-transform: scaleY(.2);
             -o-transform: scaleY(.2);
                transform: scaleY(.2);
    }
    20% {
        -webkit-transform: scaleY(1);
           -moz-transform: scaleY(1);
             -o-transform: scaleY(1);
                transform: scaleY(1);
                color: #d84da0;
    }
}



.analytics{position: fixed; left: 0; top: 0;}
.async-hide { opacity: 0 !important}


/*	modal */
#modalMask {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,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 {width:1000px; height:638px; position:fixed; left:50%; top:50%; margin-left:0px; margin-top:0; z-index:10; padding:50px 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 .close{position:absolute; right:0px; top:0px; opacity:0; transition:0.3s; z-index:20;}
#modalContent.view .close{opacity:1;}
#modalContent .close a{display:block; width:40px; height:40px; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(../images/common/btn_close.png) left top no-repeat; position:relative; transition:0.5s; background-size: 40px auto;}
#modalContent .close a:hover {opacity:0.5;}
@media screen and (max-width:640px){
	#modalContent div.mc{padding:13.28125vw 0;}
	#modalContent .close{position:absolute; top:5.469vw; right:0;}
	#modalContent .close a{display:block; width:6.094vw; height:6.094vw; overflow:hidden; text-indent:200%; white-space:nowrap; background-size:100% auto;}	
}

/*
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:19999; 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(255,255,255,0.9);}
#colorbox{outline:0;}
#cboxContent{margin-top:60px; margin-bottom: 38px; overflow:visible; background:none;}
.cboxIframe{background:#fff;}
#cboxError{padding:60px 0; border:1px solid #ccc;}
#cboxLoadedContent{background:none; padding:0; border: none;}
#cboxLoadingGraphic{}
#cboxTitle{position:absolute; top:-0; left:0; color:#000;}
#cboxCurrent{position:absolute; top:-0; right:205px; 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(../images/common/btn_close.png) left top no-repeat; width:38px; height:38px; background-size:100% auto; right:0; top:-50px !important; transition:0.5s;}

/*
#cboxNext{right:inherit; top: -50px; width: 32px; height: 40px; background: url(../images/common/arr-right.png) center center no-repeat; background-size: 100% auto; transition:0.5s; left: 50px;}
#cboxPrevious{right:inherit; top: -50px; width: 32px; height: 40px; background: url(../images/common/arr-right.png) center center no-repeat; background-size: 100% auto; transform: rotate(180deg); transition:0.5s;}
*/

#cboxPrevious:hover,
#cboxNext:hover,
#cboxClose:hover{opacity:0.7; transition: 1s;}

@media screen and (max-width:640px){
#cboxContent{margin-top:calc(50/640*100vw); margin-bottom: calc(20/640*100vw);}
#cboxLoadingOverlay img {max-width: 100vw;}
#cboxClose{display: block; width: calc(39/640*100vw); height:calc(39/640*100vw); background-size: cover;top:calc(-50/640*100vw) !important;}
#cboxNext{left: 4rem;top: -3.5rem; width: 2.4rem; height: 3rem;}
#cboxPrevious{top: -3.5rem; width: 2.4rem; height: 3rem; left: 0;}

}