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

/* base */
* { box-sizing: border-box;}
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;}
html, body { height:100%; }
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; }
a:link,a:visited,a:active {outline: none;} 
a:link { color: #FF6600;}
a:visited { color: #FFCC66;}
a:hover { color: #F60;}
a:active { color: #09C;}

body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background-image: url(../img/bg.jpg); font-size: 16px; line-height:1.5; color: #222; }
.clearfix{ clear:both;}
.clearfix2{ clear:both; height:303px;}
.clearfixline{ clear:both; border-bottom: dotted 1px #8c8888; padding-bottom: 15px; margin-bottom: 15px;}
.opp{ filter:alpha(opacity=30)!important; -moz-opacity: 0.3!important; opacity: 0.3!important;}

.stage{ position: relative; width: 100%; padding-top: 56.25%; }
.stage iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

.youtube { position: relative; width: 100%; max-width: 902px; margin: 0 auto 60px; font-size: 13px;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
.fb_iframe_widget > span { vertical-align: baseline !important; }
.fb_iframe_widget{ width:90px;}
iframe.twitter-share-button {width: 80px!important;}

.wrapper{
	text-align: center;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	background-color: #FFF;
}
.wrapper .wappen{ position: absolute; right: 30px; top: 420px;}
.wrapper img.wappen{ width:20%;}
.wrapper .date{ position:absolute; text-align:left; font-size:2.3vw;}

.wrapper .logo35th img{ position: absolute; top: 0.5%; left: 3%; width: 40vw; max-width: 270px;}
.wrapper h1 { width: 49%; max-width: 500px;	margin-left: -9999%; position: absolute;}
.wrapper .news{ display: block; background-color: #641a21; width: 100%; margin: 0 auto; padding: 2% 5%; text-align: left; font-size: 85%; color: #fff; border-bottom: solid 1px #ffeb00; background-image:url(../img/sandback2.jpg);}
.wrapper .news span{ color:#f3fb06; display:inline-block; padding: 0 10px 5px;}
.wrapper .news a{ text-decoration:none; color:#FFF;}
.wrapper .news a:hover{ text-decoration:underline; color:#F90;}
.wrapper .inner{ width:90%; margin:30px auto 0;}
.wrapper .inner h2{ font-size:195%; text-shadow: 0 0 6px #fff;}
.wrapper .inner h2 span{ font-size:50%;}
.wrapper .inner .btns{ padding:5% 0;}
.wrapper .inner .btns img{ width:33.3%;}
.wrapper .inner .read{ text-align:left;}
.wrapper .inner .read h3{ font-size:270%; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-weight: bold; color: #0450a3; text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.46); padding-bottom: 10px;}
.wrapper .inner .read span{ font-size:80%; line-height:1.5; display:block;}

.preorder{ background-image:url(../img/sandback.jpg);}
.preorder h3{
	padding: 30px;
	font-size: 170%;
	color: #f9e058;
	text-shadow: 0 2px 7px #000;
}
.preorder h3 span{
	color: #fb2839;
}
.preorder .notice{ padding:4% 3% 2%; margin:30px auto 0; text-align:left; font-size:90%; color: #f5f2e9; background-color: rgba(0, 0, 0, 0.39); width:96%;}
.preorder .notice ul{ }
.preorder .notice li{ width: 100%; text-indent: -1em;}
.preorder table{ margin:0 auto; width:70%; border-top:dotted 1px #333; background-color: rgb(239, 207, 146); font-size: 130%; box-shadow: 0 0 8px #000;}
.preorder table th, .preorder table td{ border-bottom:dotted 1px #333; padding:2%; font-weight: 600;}
.preorder table td{ color:#ab1752; background-color:rgba(199, 162, 76, 0.4);}
.preorder ul{ list-style:none; width: 95%; margin: 0 auto; padding:10px 0 ;}
.preorder li{ display:inline-block; width: 31%; margin: 0.5%;}
.preorder li img{ width:100%; }

.rank{ width:90%; margin:0 auto; padding-top:20px;}
.rank img{ width: 90%; display: block; margin: 0 auto; max-width: 650px;}
.rank img.ya{ width: 20%; max-width: 100px;}
.rank .panel{ position:relative;}
.rank .panel img.stamp{ position:absolute; width: 19%; left: 50%; top: 7%;}

.banners img{ width:42.5%; padding: 0% 0.5% 5%; max-width: 300px;}


/*------screenshots------*/
#screenshots{ width:65%; margin:40px auto 60px; border:1px solid #06a;}
#screenshots .flex-control-nav{ bottom: -5%!important;}

.spec{ text-align:left; width:100%; border-collapse: collapse; margin-bottom:30px;}
.sns{
	padding-bottom: 0px;
}
.sns img{ margin:3px;}

.footer{ text-align:center; font-size:66%; padding:30px 0; font-size:70%;}
.footer .platform img{ padding: 0 0 4%; width: 57%; max-width: 260px;}


@media screen and ( min-width: 740px ){
.wrapper{ border: solid 1px #ffb300; box-shadow: 0 0 25px #020225;}
.spec{ font-size:90%; }
.spec th{ background-color:#f9f7f7; text-align:center; width:20%;}
.spec th, .spec td{ border: 1px solid #ddd; padding: 10px 15px;}
.spec td.lit{ text-align:center; width:18%;}
.spec td.rit{ width:62%;}

.newsimg{ float:left; margin-right: 20px; padding:5px 0;}
.hidepc{ display:none;}
}

@media screen and ( max-width: 739px ){
.wrapper h1 img{ padding-top: 77%;}
.wrapper .news{ padding:4%; margin:2% auto 0;}
.wrapper .inner h2{ font-size:3.9vw;}
.wrapper .inner .btns img{ width:50%; padding:1%;}
.wrapper .inner .read h3{ font-size : 6.9vw;}

.preorder h3{ padding:10px; font-size:140%;}
.preorder .notice{ font-size:80%;}
.preorder ul{ width: 98%; padding-top:20px;}
.preorder li{ margin: 0.5% 0.5% 2% 0.5%;}

.spec{ border-bottom:1px solid #ddd; font-size:80%;}
.spec th{ display:block; width:100%; border:none; padding: 10px 0px; font-size:140%; border-bottom: solid 1px #888; text-align:left;}
.spec td{ display:block; float:left; border-top:1px solid #ddd; padding: 10px 0px;}
.spec td.lit{ width:25%;}
.spec td.rit{ width:75%;}

/*------screenshots------*/
#screenshots{width:100%; margin:30px auto 60px; border:1px solid #06a; z-index:10; position:relative; }
#screenshots .flex-control-nav{ bottom: -8%!important;}

.hidesp{ display:none;}
}

@media screen and ( max-width: 639px ){
.wrapper h1 { width: 49%; padding-top: 18%;}
.wrapper .news h3{ font-size: 110%; }
.preorder li{ width: 47%; }

.wrapper .wappen{ position: absolute; right: 20px; top: 160px;}
.wrapper img.wappen{ width:28%;}
}