@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}body{font:13px "メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo,"ＭＳ Ｐゴシック",Osaka,Verdana,Geneva,Arial,"Lucida Grande",sans-serif;*font-size:small;*font:x-small;}table{font-size:inherit;font:100%;}select,input,textarea{font:99% "ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,Osaka,Verdana,Geneva,Arial,"Lucida Grande",sans-serif;}pre,code{font:115% monospace;*font-size:100%;}body * {line-height:1.22em;}


html,body{
}

html{
background-color: #000000;
}
body{
position: relative;
}


/* index ***********************************************************/
#i_matrix{
color: #ddd;
text-align: center;
width: 100%;
max-width: 620px;
margin: 0 auto;
}
#i_matrix h1{
margin: 120px auto 60px auto;
height: auto;
}
#i_matrix h1 img{
width: 94%;
}
#i_matrix p{
padding: 0 10px 15px 10px;
}


/* PC ***********************************************************/

/* bgm movie *****************************/
#bgm{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 0;
display: block;
}
#bgm video{
width: 100%;
}
#bgx{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 1;
opacity: 0.93;
}
#bgxm{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 2;
}
.bgmxh{
display: block;
}

/*  *****************************/
@media screen and (min-width: 768px) {
#matrix{
/* 
min-width: 1040px;
margin: 0 auto;
 */
}
}

#matrix{
text-align: center;
z-index: 3;
position: relative;
overflow: hidden;
}


.container{
width: 100%;
max-width: 990px;
/* width: 990px; */
margin: 0 auto;
}

#SWERY{
margin-top: 133px;
}

/*  *****************************/
h1{
margin: 50px auto 100px auto;
z-index: 10;
height: 273px;
transform: matrix(0.9, 0, 0, 0.9, 0, 0);
}
#matrix .logo{
/* width: 92%; */
margin: 0 auto;
}

#logoEnBox{
/* width: 90%; */
max-width: 990px;
/* height: 273px; */
}
#logoEnBox img{
position: absolute;
top: 0px;
left: 0px;
}
#logoEnBox #missing_logo_01{
width: 9.6%;
}
#logoEnBox #missing_logo_02{
width: 19.3%;
}
#logoEnBox #missing_logo_03{
width: 7.6%;
left: 19.3%;
/* left: 192px; */
}
#logoEnBox #missing_logo_04{
width: 16.1%;
left: 27%;
/* left: 268px; */
}
#logoEnBox #missing_logo_05{
width: 16.1%;
left: 43.2%;
/* left: 428px; */
}
#logoEnBox #missing_logo_06{
width: 7%;
left: 59.3%;
/* left: 588px; */
}
#logoEnBox #missing_logo_07{
width: 17.1%;
left: 66.4%;
/* left: 658px; */
}
#logoEnBox #missing_logo_08{
width: 16.3%;
left: 83.6%;
/* left: 828px; */
}
#logoEnBox .missing_logo_under{
/* top: 88.2%; */
/* top: 241px; */
}
#logoEnBox #missing_logo_09{
width: 25.9%;
}
#logoEnBox #missing_logo_ja{
width: 57.8%;
}
#logoEnBox #missing_logo_10{
width: 8.8%;
left: 25.9%;
/* left: 257px; */
}
#logoEnBox #missing_logo_11{
width: 8.8%;
left: 34.8%;
/* left: 345px; */
}
#logoEnBox #missing_logo_12{
width: 14.8%;
left: 43.7%;
/* left: 433px; */
}
#logoEnBox #missing_logo_13{
width: 6.4%;
left: 68.1%;
/* left: 675px; */
}
#logoEnBox #missing_logo_14{
width: 22%;
left: 74.6%;
/* left: 739px; */
}


/*  *****************************/
#head{
z-index: 20;
}
#head #lang{
position: absolute;
height: 55px;
padding-top: 25px;
top: 0px;
right: 20px;
background: url(../images/bg_b.png) no-repeat right top;
}
#head #lang .lang{
z-index: -100;
}
#head #lang .langBtn{
position: absolute;
width: 50px;
height: 30px;
top: 25px;
}
#head #lang #langBtnEn{
left: 0px;
}
#head #lang #langBtnJa{
left: 50px;
}
#head #lang #langBtnCn{
left: 100px;
}
#head #lang #langBtnKr{
left: 150px;
}

#head #sns{
position: absolute;
top: 110px;
right: 10px;
padding-bottom: 91px;
background: url(../images/bg_b.png) no-repeat center bottom;
}
#head #sns li{
margin-bottom: 18px;
}

#bgmBtnBox{
position: absolute;
top: 340px;
right: 5px;
width: 26px;
height: 25px;
}

/*  *****************************/
#newsBox li{
margin-bottom: 10px;
}

/*  *****************************/
#ssBoxWrap{
background: url(../images/ssBg.png) no-repeat center bottom;
background-size:contain;
}
#ssBox{
margin: 0 auto;
padding: 0 0 0 30px;
width: 810px;
}
#ssBox a{
display: block;
float: left;
margin: 0 30px 30px 0;
}
#ssBox img{
/* width: 27%; */
}

/*  *****************************/
#separator{
height: 1px;
width: 100%;
max-width: 990px;
margin: 100px auto 0 auto;
background: linear-gradient(to right, #000, #015c58 50%, #000);
}

/*  *****************************/
#gifsBox{
background: url(../images/gifBg.png) no-repeat center bottom;
/* background-size:contain; */
padding-bottom: 30px;
}

/*  *****************************/
#dataBox{
margin: 70px auto 0 auto;
/* background: url(../images/bg_data.png) repeat-x top; */
}
#dataBoxIn{
width: 100%;
max-width: 990px;
margin: 0 auto;
}
#dataBoxIn img{
width: 100%;
}
#dataBoxInPC{
display: block;
}
#dataBoxInSP{
display: none;
}

/*  *****************************/
#movieBox{
max-width: 854px;
margin: 60px auto 0 auto;
}
#movieBox .movie{
position: relative;
width: 100%;
padding-top: 56.25%;
}
#movieBox .movie iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
z-index: 5;
}

/*  *****************************/
#buyBox{
background: url(../images/buyBg.png) no-repeat center;
background-size:cover;
padding: 90px 0;
margin: 70px auto 0 auto;
}
#buyBox li{
display: inline-block;
}

/*  *****************************/
.aboutBoxIn{
max-width: 990px;
margin: 0 auto;
}
.aboutBoxIn a{
margin: 0 8px;
}

/*  *****************************/
#foot{
padding: 63px 24px 19px 24px;
}
#logos li{
float: left;
margin-right: 14px;
}
#logos li:nth-child(3){
margin-top: -5px;
}

#copyright{
position: absolute;
right: 24px;
bottom: 18px;
}


/* SP ***********************************************************/
@media screen and (max-width: 767px) {
.container{
}

#bgm{
display: none;
}

#matrix{
/* width: 100%; */
}

#platforms{
width: 80%;
}

#SWERY{
width: 80px;
}

h1{
margin: 50px auto 70px auto;
height: 140px;
}
#matrix .logo{
/* width: 82%; */
}

#head #lang{
right: 15px;
}

#head #sns{
right: 5px;
}

#movieChengBox img{
width: 40%;
}

#buy{
width: 70%;
}
#buyBox li:nth-child(1){
width: 20%;
}
#buyBox li:nth-child(2){
width: 11%;
}
#buyBox li:nth-child(3){
width: 35%;
}
#buyBox li:nth-child(4),
#buyBox li.w20{
width: 20%;
}
#buyBox .xja li:nth-child(1){
width: 19%;
}
#buyBox .xja li:nth-child(2){
width: 11%;
}
#buyBox .xja li:nth-child(3){
width: 32%;
}
#buyBox .xja li:nth-child(4){
width: 19%;
}
#buyBox .xja li:nth-child(5){
width: 11%;
}
#buyBox li img{
width: 100%;
}


#ss{
width: 80%;
}
#ssBox{
width: 90%;
padding: 0 0 0 25px;
}
#ssBox a{
width: 44%;
margin: 0 20px 20px 0;
}
@media screen and (max-width: 320px) {
#ssBox a{
margin: 0 10px 10px 0;
}
}
#ssBox img{
width: 100%;
}

#news{
width: 29%;
}

#gifsBox #gifs{
width: 25%;
}
#gifsBox .gifx{
width: 90%;
}

.aboutBoxIn{
width: 100%;
}
#about{
width: 37%;
}
.aboutBoxIn a{
display: block;
margin-bottom: 18px;
}

#dataBoxInPC{
display: none;
}
#dataBoxInSP{
display: block;
}

#logos li{
width: 10%;
margin-right: 7px;
}
#logos li:nth-child(2){
width: 13%;
/* margin-right: 14px; */
}
#logos li:nth-child(3){
width: 13%;
margin-top: 0px;
}
#logos img{
width: 100%;
}

#copyright{
width: 40%;
}


}




/* general purpose ***********************************************************/

.mw990{max-width: 990px;}

.fll{float: left;}
.flr{float: right;}
.fln{float: none;}
.db{display: block;}
.dn{display: none;}
.vat{vertical-align: top;}
.vab{vertical-align: bottom;}
.vam{vertical-align: middle;}
.posr{position: relative;}
.posa{position: absolute;}
.posf{position: fixed;}
.ovh{overflow:hidden;}
.curd{cursor: default;}
.curp{cursor: pointer;}
.bdn{border: none;}
.bgn{background: none;}
.fcw{color: #fff;}
.fcd{color: #ddd;}

.tal{text-align: left;}
.tar{text-align: right;}
.tac{text-align: center;}
.tdn{text-decoration: none;}
.tdu{text-decoration: underline;}
.tduh:hover{text-decoration: underline;}
.tix{text-indent: -9999px;}
.lh0{line-height: 0;}
.lh1{line-height: 1em;}
.lh12{line-height: 1.2em;}
.lh14{line-height: 1.4em;}
.lh16{line-height: 1.6em;}
.fwn{font-weight: normal;}
.fwb{font-weight: bold;}
.fz10{font-size: 10px;}
.fz11{font-size: 11px;}
.fz12{font-size: 12px;}
.fz13{font-size: 13px;}
.fz14{font-size: 14px;}
.fz15{font-size: 15px;}
.fz18{font-size: 18px;}

.m0{margin: 0;}
.mt0{margin-top: 0;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt60{margin-top: 60px;}
.mt80{margin-top: 80px;}
.mt100{margin-top: 100px;}
.mt130{margin-top: 130px;}
.mr0{margin-right: 0;}
.mb0{margin-bottom: 0;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.ml0{margin-left: 0;}
.ml10{margin-left: 10px;}
.mlra{margin-left: auto; margin-right: auto;}

.p0{padding: 0;}
.p5{padding: 5px;}
.p10{padding: 10px;}
.p15{padding: 15px;}
.p20{padding: 20px;}
.p25{padding: 25px;}
.p30{padding: 30px;}
.pt0{padding-top: 0;}
.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}
.pt25{padding-top: 25px;}
.pt30{padding-top: 30px;}
.pt70{padding-top: 70px;}
.pr0{padding-right: 0;}
.pb0{padding-bottom: 0;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}
.pb25{padding-bottom: 25px;}
.pb30{padding-bottom: 30px;}
.pl0{padding-left: 0;}

.clearfix{display:inline-table;/* \*/display:block;/* */min-height:1px;}/* \*/* html .clearfix{height:1%;}.clearfix:after{content:".";display:block;visibility:hidden;height:0;line-height:0;clear:both;}