@charset "UTF-8";
/* CSS Document */

html, body, div, ul, ol, li, dl, dt, dd, form, fieldset, input, textarea, h1, h2, h3, h4, h5, h6, pre, code, p, blockquote, hr, th, td { margin: 0; padding: 0; }
body,td,th {font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

@media screen and (min-width: 640px) {
	
body { background-image:url(../img/bg.jpg); background-size:cover; background-repeat:no-repeat; background-color:#282828; z-index: -101}
html { height:100%;}

img{ max-width: 100%; height: auto; width:auto;}

.maxwidth{ max-width:1000px;}

#center_layout { position:absolute; top:5%; left:0; right:0; bottom:7%; margin:auto; width:80%; height:55%; padding-bottom:5%; }

#platform { width:100%;}
#platform .position { position:absolute; right:0; margin-top:2%; margin-right:3%;}

#copy { top:0; position: absolute; width:100%; }
#copy .width { width: auto;}

.titile_logo { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; padding-bottom:3%; width:auto;}

#sale { bottom:0; position: absolute; width: 100%; }
#sale .width { width: auto;}

#link_anime { position: absolute; bottom: 100px; right:5%; width:200px;}
#link_anime .position { width: 200px; height:55px;}
#link_anime .caption { position: absolute; top: -20px; width: 200px;}

#footer { position: absolute; bottom:0; background-color:#000000; width:100%; height:60px; padding-bottom:0.5%;}
#footer .info{ margin-top:5px; margin-bottom:6px; width:100%; background-image:url(../img/footer_info_pc.jpg); height:54px; background-size:contain;  background-repeat:no-repeat;}

video { position: fixed; right: 0; top: 0; z-index: -100; min-height:100%; min-width:100%;}

#loader { width: 100%; height: 100%; display: none; position: fixed; position: absolute; top: 0; left: 0; background-color:#000; z-index: 999;}
#fade { width: 100%; height: 100%; display: none; background-color: #FFFFFF; position: absolute; top: 0px; left: 0px; z-index: 500;
}

#sns_btn { position: absolute; bottom: 82px; left: 3%; height: 20px;}

}


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

body { background-image:url(../img/bg.jpg); background-size:cover; background-repeat:no-repeat; background-color:#000; z-index: -101}
html { height:100%;}

img{ max-width: 100%; height: auto; width:auto;}

.maxwidth{ max-width:639px; margin:0 auto;}

#center_layout { position:absolute; top:150px; left:0; right:0; bottom:250px; margin:auto; width:90%; height:45%; padding-bottom:4%; }

#platform { background-color:#FFF; padding:6px 0 0;}
#platform .position { margin: 0 auto; position: relative; width:75%;}

#copy { top:0; position: absolute; width:100%; }
#copy .width { width: 85%;}

.titile_logo { position:absolute; top:0; left:0; right:0; bottom:1%; margin:auto; padding-bottom:5%; width:auto;}

#sale { bottom:0; position: absolute; width: 100%;}
#sale .width { width: 95%;}

#link_anime { position: absolute; right:2%; bottom: 155px; width:145px;}
#link_anime .position { position: absolute; width: 145px; height: auto;}
#link_anime .caption { position: absolute; top: -19px; width: 145px;}

#footer { position:absolute; bottom:0; margin:0 auto; width:100%; height:95px; background-color:#000;}
#footer .info{ background-image:url(../img/footer_info_sf.jpg); width:100%; height: 95px; background-size:contain; background-repeat:no-repeat; position:relative; background-position:center}

video { position: fixed; right: 0; top: 0; z-index: -100; min-height:100%; min-width:100%;}

#loader { width: 100%; height: 100%; display: none; position: fixed; position: absolute; top: 0; left: 0; background-color:#000; z-index: 999;}
#fade { width: 100%; height: 100%; display: none; background-color: #FFFFFF; position: absolute; top: 0px; left: 0px; z-index: 500;
}

#sns_btn { position:absolute; bottom:102px; left:2%; height:20px;}

}