@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;}
.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 img{ width:100%; padding-top: 50%; max-width:600px;}
.wrapper .news{ display: block; background-color: rgba(0, 0, 0, 0.78); width: 100%; margin: 5% 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;}
.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 span{ font-size:80%; line-height:1.5; display:block;}

/*------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;}

.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, td{border: 1px solid #ddd; padding: 10px 15px;}
.spec td.lit{ text-align:center; width:18%;}
.spec td.rit{ width:62%;}
}

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

.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:90%; margin:30px auto 60px; border:1px solid #06a; z-index:10; position:relative;}
#screenshots .flex-control-nav{ bottom: -8%!important;}

.hidesp{ display:none;}
}