@charset "UTF-8";
*{
margin:0;
padding:0;
border:none;
}
html,body {
height: 100%;
}
body {
background:#000;
-webkit-text-size-adjust:100%;
color:#6d8ca0;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
}
#loading{
width:100%;
height:100%;
background:#000;
position:fixed;
top:0px;
left:0px;
z-index:10;
}
#mark{
position:fixed;
width:20%;
top:38%;
left:40%;
z-index:10;
}
.op{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display:none;
}
.opw{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:#FFF;
display:none;
}
#opb{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#000;
display:none;
z-index:10;
}
#op1{
background:url(images/op1.jpg) center center no-repeat;
background-size:cover;
}
#op2{
background:url(images/op2.jpg) center center no-repeat;
background-size:cover;
}
#op3{
background:url(images/op3.jpg) center center no-repeat;
background-size:cover;
}
/*ドラゾンビお告げ*/
.dz{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:10;
}
#dz1{
background:url(images/dorazombie1.jpg) center center no-repeat;
background-size:cover;
display:none;
}
#dz2{
background:url(images/dorazombie2.jpg) center center no-repeat;
background-size:cover;
display:none;
}
#dz3{
background:url(images/dorazombie3.jpg) center center no-repeat;
background-size:cover;
display:none;
}
#dz4{
background:url(images/dorazombie4.jpg) center center no-repeat;
background-size:cover;
display:none;
}
#dz5{
background:url(images/dorazombie5.jpg) center center no-repeat;
background-size:cover;
display:none;
}
#dzWrap{
right:0;
}


#ssp1{
width:12%;
height:12%;
display:block;
margin:-12% 0 0 auto;
}
#ssp1 img{
width:100%;
height:auto;
}

#container{
font-size:0;
min-height:100%;
min-width:820px;
width:100%;
overflow:hidden;
}
#tickerWrap {
background:url(images/headline.png) left center no-repeat;
background-size:840px 25px;
width:840px;
height:25px;
position:absolute;
overflow:hidden;
visibility:hidden;
z-index:1;
}
#ticker {
display:block;
width:744px;
height:25px;
margin-left:96px;
text-align:left;
overflow:hidden;
}

#ticker ul {
width: 100%;
position: relative;
}

#ticker ul li {
width: 100%;
display: none;
padding-top:2px;
}

#ticker ul li a,
#ticker ul li a:visited{
font-size:15px;
color:#FFF;
text-decoration:none;
}
.hlNew,
.hlNew:visited{
color:#c30e23;
font-weight:bold;
padding-right:5px;
}
.hlDate,
.hlDate:visited{
color:#FFF;
font-size:10px;
padding-right:5px;
}

#menu{
position:fixed;
z-index:2;
top:-15%;
}
#menu li{
width:12%;
display:inline-block;
margin:0.5% 0 0 0.5%;
position:relative;
}
#menu img{
width:100%;
height:auto;
}
#menu img.new{
position:absolute;
right:0;
width:25%;
height:auto;
z-index:1;
}
#home{
position:relative;
padding-bottom:10%;
overflow:hidden;
}
#scene{
width:100%;
position:absolute;
}
/*背景*/
.layer:nth-child(1) img{
width:105%;
margin-top:-2.5%;
margin-left:-2.5%;
height:auto;
}
/*その他*/
.layer:nth-child(2) img,
.layer:nth-child(3) img,
.layer:nth-child(4) img,
.layer:nth-child(5) img,
.layer:nth-child(6) img,
.layer:nth-child(7) img{
width:120%;
margin-left:-10%;
height:auto;
}
#homeCTS{
position:relative;
}
.aspect{
width:100%;
height:auto;
/*visibility:hidden;*/
}
#logo{
position:absolute;
display:block;
width:22%;
top:1%;
right:1%;
z-index:1;
}
#billing{
width:80%;
margin:1.5% 10%;
z-index:10;
}
#sspWrap{
width:70%;
margin:0 auto;
position:relative;
}
#dzBTN{
width:14.5%;
display:block;
position:absolute;
bottom:-10%;
right:0;
opacity:0;
}
#dzBTN img{
width:100%;
height:auto;
}
.otsugeImg{
width:300px;
height:auto;
}
#spBnr{
display:inline-block;
margin:0 15%;
list-style:none;
width:70%;
}
#spBnr li{
width:32.7%;
display:inline-block;
margin:0.3%;
position:relative;
}
#spBnr img{
width:100%;
height:auto;
}
#spBnr img.new{
position:absolute;
right:0;
width:13%;
height:auto;
z-index:1;
}
#sns{
list-style:none;
text-align: center;
margin-top:2%;
}
#sns li{
width:4%;
display:inline-block;
margin:0.3%;
}
#sns img{
width:100%;
height:auto;
}
#exBnr{
list-style:none;
text-align: center;
margin-top:2%;
}
#exBnr li{
width:19.5%;
display:inline-block;
margin:0.3%;
}
#exBnr img{
width:100%;
height:auto;
}
#trailer{
min-width:100%;
height:100%;
background:#C30D23 url(images/ctgry_tr.png) center 12% no-repeat;
background-size:20%;
padding:16% 0 18% 0;
}
#ytFrame{
display: block;
margin: 0 auto;
width:800px;
height:450px;
}
#ytSelector{
width:804px;
display:block;
margin:0 auto;
list-style:none;
}
#ytSelector li{
width:264px;
display:inline-block;
margin:4px 2px;
position:relative;
}
#ytSelector img{
width:100%;
height:auto;
}
#ytSelector img.new{
width:16%;
position:absolute;
z-index:1;
right:0%;
}

/*ストーリー*/
#story{
min-width:100%;
height:100%;
background:#FFF url(images/ctgry_st.png) center 9% no-repeat;
background-size:20%;
padding:12% 0 12% 0;
}
#stMidashi{
display:block;
width:80%;
margin:5% 10% 2% 10%;
}
#canvas{
/*width:100%;
height:auto;*/
margin:20px 0;
}
#story p{
display:block;
width:90%;
margin:0 5%;
color:#002855;
font-size:18px;
line-height:1.8em;
}
#canvasImg{
width:0;
height:0;
visibility:hidden;
}

/*キャラ*/
#chara{
min-width:100%;
height:100%;
background:#052c58 url(images/ctgry_ch.png) center 9% no-repeat;
background-size:20%;
padding:10% 0 10% 0;
}
#charaWrap{
position:relative;
display:block;
}
.chExp{
position:absolute;
width:100%;
}

/*フッタ*/
#foot{
position:relative;
min-width:100%;
height:100%;
background:#052c58 url(images/foot_bg.jpg) center bottom no-repeat;
background-size:cover;
padding:7% 0 17% 0;
}
#linkBnr{
display:inline-block;
margin:0 7%;
list-style:none;
}
#linkBnr li{
width:24.4%;
display:inline-block;
margin:0.3%;
}
#linkBnr img{
width:100%;
height:auto;
}
#sponcerBnr{
display:inline-block;
margin:1.5% 7% 0.5% 7%;
list-style:none;
}
#sponcerBnr li{
width:13.88%;
display:inline-block;
margin:0.2%;
}
#sponcerBnr img{
width:100%;
height:auto;
}
#tweetday{
display:block;
width:12%;
margin:10px 7% 0 auto;
}
#tweetday img{
width:100%;
}
#footerTXT{
font-size:11px;
line-height:1em;
position:absolute;
bottom:2.5%;
left:0.5%;
}
#footerTXT a,
#footerTXT a:visited{
color:#FFF;
}
#footerTXT a:hover{
color:#F00;
}
#footMark{
width:15%;
position:absolute;
bottom:7%;
left:0.5%;
}
#footLogo{
width:28%;
position:absolute;
bottom:0%;
left:36%;
}
#footLogo img{
width:100%;
}
#shareBtn{
position:absolute;
width:225px;
margin:0 auto;
list-style: none;
bottom:3%;
right:5%;
}
#shareBtn li{
float:left;
width:80px;
}
#shareBtn .l1{
margin-right:5px;
}
#shareBtn .l2{
}
#gotop{
position:fixed;
display:block;
bottom:1.5%;
right:1%;
width:4%;
}
#gotop img{
width:100%;
}
#cb{
display:none;
}
.infoImg{
width:100%;
}
.cbBtn{
display:block;
margin:10px auto 0 auto;
width:40%;
}
.cbBtn img{
width:100%;
}

@media screen and (min-width: 1280px){
/*トップ*/

/*その他*/
.layer:nth-child(2) img,
.layer:nth-child(3) img,
.layer:nth-child(4) img,
.layer:nth-child(5) img,
.layer:nth-child(6) img,
.layer:nth-child(7) img{
/*width:1830px;
margin-left:45px;
height:auto;*/
}

#billing{
display:block;
margin:1.5% auto 3.5% auto;
width:1024px;
}
#sspWrap{
width:900px;
}
#dzBTN{
width:130px;
height:190px;
}
#spBnr{
display:block;
width:900px;
margin:0 auto;
}
#spBnr li{
width:294px;
margin:3px;
}
#sns li{
width:52px;
margin:3px;
}
#exBnr li{
width:250px;
margin:4px;
}

/*ストーリー*/
#story{
min-width:100%;
height:100%;
background:#FFF url(images/ctgry_st.png) center 9% no-repeat;
background-size:20%;
padding:12% 0 12% 0;
}
#stMidashi{
width:1024px;
margin:5% auto 2% auto;
}
#story p{
width:1152px;
margin:0 auto;
}

/*キャラ*/
#charaWrap{
width:1280px;
margin:0 auto;
}

/*フッタ*/
#linkBnr{
display:block;
width:1104px;
margin:0 auto;
}
#linkBnr li{
width:270px;
margin:3px;
}
#sponcerBnr{
display:block;
width:1106px;
margin:24px auto 0 auto;
}
#sponcerBnr li{
width:152px;
margin:3px;
}
#tweetdayWrap{
width:1100px;
margin:10px auto;
}
#tweetday{
width:152px;
margin-right:0;
}
#tweetday img{
width:100%;
}
#footMark{
width:194px;
}
#footLogo{
width:360px;
left:50%;
margin-left:-180px;
}
#footLogo img{
width:100%;
}
#gotop{
width:52px;
}

}