@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-image:url(../img/main.jpg); background-position:center top; background-repeat: no-repeat; background-size:contain; background-color:#FFF;}
.wrapper .logo35th img{ position: absolute; top: 0.5%; left: 3%; width: 40vw; max-width: 270px;}
.wrapper h1 { width: 49%; padding-top: 23%;	max-width: 500px;	padding-bottom: 26%;	margin-left: -9999%;}
.wrapper .news{ display: block; background-color: rgba(0, 0, 0, 0.78); width: 100%; margin: 0 auto; border-bottom: solid 1px #f00; border-top: solid 1px #f00; padding: 2% 5%; text-align: left; font-size: 85%; color: #fff;}
.wrapper .news span{ color:#F00; display:block; padding-bottom: 5px;}
.wrapper .news a{ text-decoration:none; color:#FFF;}
.wrapper .news a:hover{ text-decoration:underline; color:#F90;}
.wrapper .inner{ width:90%; margin:0 auto;}
.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: #ab4a99; 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:180%; color:#ddf5f9; text-shadow: 0 2px 7px #000;}
.preorder h3 span{ color:#f1da5f; }
.preorder .notice{ padding:2% 5%; margin:0 auto; text-align:left; font-size:90%; color: #f5f2e9;}
.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: 100%; margin: 0 auto; padding:20px 0;}
.preorder li{ display:inline-block; width: 28%; margin-bottom:7px;}
.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%;}

/*------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:40px;}
.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;}
.banners img { width: 42.5%; padding: 0% 0.5% 5%; max-width: 300px;}

@media screen and ( min-width: 740px ){
.wrapper{ border: solid 1px #ffb300; box-shadow: 0 0 25px #f7cf93;}
.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:180%;}
.preorder .notice{ font-size:80%;}
.preorder ul{ width: 98%; padding-top:20px;}
.preorder li{ margin: 0.5% 0% 1% 0%;}

.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: 49%; }
}