body {
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background:#000;
width: 100%;
height:100%;
font-size:12px;
line-height:1.5em;
color:#fff;
margin: 0px;
}

#wrap{
width: 100%;
height: 100%;
min-width:1250px;
min-height:700px;
margin:0 auto;
position:relative;
overflow: hidden;
}


@media screen and (orientation: landscape) {

#mainWarning{
	display:none;
}

}

@media screen and (orientation: portrait) {

#mainWarning{
	background: #000 url(../images/top2/warning.png) no-repeat center;
	background-size:500px auto;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:100;
}


}

@-webkit-keyframes scalelogo {
from { transform: scale(1.5, 1.5); }
to   { transform: scale(1.0, 1.0); }
}

@keyframes scalelogo {
from { transform: scale(1.5, 1.5); }
to   { transform: scale(1.0, 1.0); }
}


@-webkit-keyframes scaleobi {
from { transform: scale(2.5, 2.5) rotate(-20deg) translateY(-100px);}
to   { transform: scale(1.0, 1.0) rotate(0deg)  translateY(0);}
}

@keyframes scaleobi {
from { transform: scale(2.5, 2.5) rotate(-20deg) translateY(-100px);}
to   { transform: scale(1.0, 1.0) rotate(0deg)  translateY(0);}
}



#mainBG{
background: #000 url(../images/top2/bg.jpg) no-repeat center;
background-size: auto 100%;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1;
}

#mainChara{
background: url(../images/top2/futari.png) no-repeat center;
background-size: auto 100%;
width:100%;
height:101%;
position:absolute;
top:-1%;
left:-20px;
z-index:10;
-webkit-animation: scalelogo 2s  ease-out;
animation-duration: scalelogo 2s  ease-out;
pointer-events: none;
}






#logoObi{
background: url(../images/top2/nuno.png) no-repeat center bottom;
z-index:11;
-webkit-animation: scaleobi 2s ease-out;
animation-duration: scaleobi 2s ease-out;
}

#logo{
background: url(../images/top2/logo.png) no-repeat center bottom;
z-index:12;
-webkit-animation: scalelogo 2s ease-out;
animation-duration: scalelogo 2s ease-out;
}

#logo,#logoObi{
background-size: contain;
width:50%;
height:30%;
position:absolute;
/*bottom:20%;*/
bottom:24%;
left:25%;
}

#roadshow{background:url(../images/top/roadshow.png) no-repeat left bottom;}
#roadshow2{background:url(../images/top/roadshow2.png) no-repeat left bottom;}
#roadshow,#roadshow2{
	background-size:contain;
	width:13%;
	height:13%;
	min-width: 150px;
	min-height: 100px;
	position:fixed;
	bottom:10px;
	left:10px;
	z-index:12;
}

#roadshow3{
background:url("../images/top2/roadshow3.png") no-repeat center top;
background-size: contain;
width:40%;
height:7%;
position: absolute;
bottom:20%;
left:30%;
z-index:20;
}

#roadshow3 a{
width: 100%;
height: 100%;
display: block;
}


#midashi{
	background: url(../images/top/midashi.png) no-repeat center;
	background-size: auto 100%;
	width: 100%;
	height: 13%;
	max-height: 130px;
	position: absolute;
	bottom: 55px;
	left: 0;
	z-index: 5;
}

#catch01{
	background: url(../images/top2/m01.png) no-repeat right top;
	background-size: contain;
	width: 3%;
	height: 42%;
	position: absolute;
	top: 20px;
	right: 10px;
	z-index: 10;
}


#catch03{
	background: url(../images/top2/m03.png) no-repeat center;
	background-size: contain;
	width: 750px;
	height: 40px;
	position: absolute;
	bottom: 55px;
	left: 50%;
	margin-left: -375px;
	z-index: 12;
}


@media screen and (min-width : 1251px){

#mainImgAll{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}

#mainImg01{ background: url(../images/top2/img01.png) no-repeat center top; z-index: 5;}
#mainImg02{ background: url(../images/top2/img02.png) no-repeat center top; z-index: 4;}
#mainImg03{ background: url(../images/top2/img03.png) no-repeat center top; z-index: 3;}
#mainImg04{ background: url(../images/top2/img04.png) no-repeat center top; z-index: 2;}
#mainImg05{ background: url(../images/top2/img05.png) no-repeat center top; z-index: 1;}
#mainImg01,#mainImg02,#mainImg03,#mainImg04,#mainImg05{
background-size: auto 100%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}

#mainPlate{
background: url(../images/top2/plate.png) no-repeat center;
background-size: auto 100%;
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index:8;
}

#catch02{
	background: url(../images/top2/m02.png) no-repeat center;
	background-size: auto 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 11;
}



}

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

#mainImgAll{
background: url(../images/top2/imgAll.png) no-repeat center top;
background-size: 100% auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
pointer-events: none;
}

#mainImg01,#mainImg02,#mainImg03,#mainImg04,#mainImg05{ display: none;}

#mainPlate{ display: none;}
#catch02{ display: none;}

}

#roadshow{background: url(../images/top2/roadshow.png) no-repeat left bottom;}
#roadshow2{background: url(../images/top2/roadshow2.png) no-repeat left bottom;}
#roadshow,#roadshow2{
background-size: contain;
width: 10%;
height: 10%;
position: absolute;
bottom: 60px;
left: 20px;
z-index: 12;
}


/*

logo S

*/

@-webkit-keyframes logoSanim {
from { transform: scale(1.5, 1.5); }
to   { transform: scale(1.0, 1.0); }
}

@keyframes logoSanim {
from { transform: scale(1.5, 1.5); }
to   { transform: scale(1.0, 1.0); }
}


#logoS{
background: url(../images/logo_s.png) no-repeat;
background-size: contain;
width: 217px;
height: 66px;
position: fixed;
bottom: 10px;
left: 5px;
z-index: 18;
-webkit-animation: logoSanim 1s ease-out;
animation-duration: logoSanim 1s ease-out;
}

#logoS a{
width: 100%;
height: 100%;
display: block;
}

#logoS:hover{
opacity: 0.7;
filter: alpha(opacity=70);  
}

#creditBtn{
background: #000 url("../images/btn_credit.png") no-repeat center;
background-size: contain;
width: 80px;
height: 24px;
position: fixed;
bottom: 12px;
left: 10px;
z-index: 20;
}

#creditBtn a{
width: 100%;
height: 100%;
display: block;
}


/*

twiiter

*/

#twitterBtn{
background: url("../images/i_twitter.png") no-repeat;
background-size: contain;
width: 70px;
height: 70px;
position: absolute;
top:5px;
left: 5px;
z-index: 20;
cursor: pointer;
}

#twitterBtn a{
width: 100%;
height: 100%;
display: block;
}

#twitterBtn:hover{
opacity: 0.7;
filter: alpha(opacity=70);  
}


/*

credit

*/

#creditAll{
	width: 100%;
	height: 320px;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 40;
	display: none;
}

#credit{
	background: url(../images/top2/credit.png) no-repeat center;
	background-size:contain;
	width:900px;
	height:300px;
	position:absolute;
	top:10px;
	left:50%;
	margin-left:-450px;
	z-index:5;
}

#creditClose{
	width:40px;
	height:40px;
	position:absolute;
	top:10px;
	right:10px;
	z-index:2;
}





@media screen and (min-height : 700px){

}

@media screen and (min-height : 900px){

}


/*

bnr
  
*/

#bnrLAll{
width: 990px;
height: 65px;
text-align: center;
position: absolute;
bottom: 145px;
left: 50%;
margin-left: -495px;
z-index: 12;
}

#bnrLAll img{margin: 0 3px;}

.bnrLimg{
background: #FFE73C;
width: 323px;
height: 65px;
float: left;
box-shadow: 0 0 5px #fff38d;
}


#bnrExtra{
	width:150px;
	height:150px;
	position:absolute;
	bottom:70px;
	right:10px;
	z-index:12;
}

#bnrSall{
	width: 160px;
	height: 40px;
	position:absolute;
	bottom:60px;
	right:10px;
	z-index:12;
}

#bnrSall2{
	width: 290px;
	height: 30px;
	position:absolute;
	bottom:95px;
	right:10px;
	z-index:12;
	text-align: right;
}

#bnrSall2 img{ margin: 0 2px;}

#udcast{
width: 115px;
height: 45px;
text-align: right;
position:absolute;
bottom:85px;
right:5px;
z-index:12;
line-height: 0;
}





/*

contents

*/

.blackBg{
	background:#000 url(../images/top/bg_kaso.jpg) no-repeat center;
	background-size: cover;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

#commentAll{
	background: #000000;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:20;
	display:none;
}

#commentAll2{
	background: #000000;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

#commentImg{
	background: url(../images/img_comment.png) no-repeat center;
	background-size:contain;
	width:100%;
	height:100%;
	position:absolute;
	top:-50px;
	left:0;
	z-index:2;
}

#introAll{
	background: #000000;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:20;
	display:none;
}

#introImg{
	background: url(../images/img_introduction.png) no-repeat center;
	background-size:contain;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	display:none;
}


#storyAll{
	background: #000000;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:20;
	display:none;
}

#storyImg{
	background: url(../images/img_story.png) no-repeat center;
	background-size:contain;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	display:none;
}

.closeBtn{
	width:60px;
	height:60px;
	position:absolute;
	top:20px;
	right:20px;
	z-index:3;
	cursor:pointer;
}


#markLeftTop{
	background:url(../images/mark01.png) no-repeat;
	background-size:100% 100%;
	width:80px;
	height:80px;
	position:absolute;
	top:20px;
	left:20px;
	z-index:1;
}

#markLeftBottom{
	background:url(../images/mark02.png) no-repeat;
	background-size:100% 100%;
	width:80px;
	height:80px;
	position:absolute;
	bottom:20px;
	left:20px;
	z-index:1;
}

#markRightBottom{
	background:url(../images/mark03.png) no-repeat;
	background-size:100% 100%;
	width:80px;
	height:80px;
	position:absolute;
	bottom:20px;
	right:20px;
	z-index:1;
}



/*

introduction2

*/

#intro2All{
background: #000 url(../images/introduction/bg.jpg) no-repeat center;
background-size: cover;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1;
}


@-webkit-keyframes introscale {
    from { transform: scale(1.2, 1.2); }
    to   { transform: scale(1.0, 1.0); }
}

@keyframes introscale {
    from { transform: scale(1.2, 1.2); }
    to   { transform: scale(1.0, 1.0); }
}

#intro2ImgAll{
width: 72%;
height: 82%;
position: absolute;
bottom: 12.5%;
left:14%;
z-index: 2;
-webkit-animation: introscale 4s ease-out;
animation-duration: introscale 4s ease-out;
}

#intro2img01{
background: url(../images/introduction/m01.png) no-repeat center bottom;
background-size: contain;
width: 100%;
height: 24%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

#intro2img02{
background: url(../images/introduction/m02.png) no-repeat center top;
background-size: contain;
width: 100%;
height: 74%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}



/*

story2

*/

#story2All{
background: #000;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1;
}

#storyImgLeft{background: url(../images/story/img01.jpg) repeat-y left;left: 0;}
#storyImgRight{background: url(../images/story/img02.jpg) repeat-y right;right: 0;}
#storyImgLeft,#storyImgRight{
background-size: contain;
width: 20%;
height: 95%;
position: absolute;
top: 0;
z-index: 5;
pointer-events: none;
}

#storyImgCenter{
background: url(../images/story/bg.jpg) no-repeat center;
background-size: cover;
width: 80%;
height: 100%;
position: absolute;
top: 0;
left: 10%;
z-index: 2;
}

#storyNuno{
background: url(../images/story/nuno.png) no-repeat center top;
background-size: 100% 26%;
width: 55%;
height: 100%;
position: absolute;
top: 0;
left: 17%;
z-index: 6;
}

@-webkit-keyframes storyImgscroll {
 0% {background-position: 0 0;}
 100% {background-position: -1786px 0;}
}

@keyframes storyImgscroll {
 0% {background-position: 0 0;}
 100% {background-position: -1786px 0;}
}

#storyImgGuest{
background: url(../images/story/img03.jpg) repeat-x left;
background-size: auto 100%;
width: 80%;
height: 125px;
position: absolute;
top: 22%;
left: 10%;
z-index: 3;
-webkit-animation: storyImgscroll 60s linear infinite;
animation: storyImgscroll 60s linear infinite;
pointer-events: none;
}

#storyM01{
background: url(../images/story/m01.png) no-repeat center;
background-size: contain;
width: 60%;
height: 20%;
position: absolute;
top: 2%;
left: 20%;
z-index: 10;
}

#storyTxtAll{
width: 50%;
height: 50%;
position: absolute;
top: 40%;
left: 25%;
z-index: 15;
}

#storyTxtM{
background: url(../images/story/m02.png) no-repeat center;
background-size: auto 70%;
width: 100%;
height: 20%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

#storyTxtArea{
width: 100%;
height: 75%;
position: absolute;
top: 23%;
left: 0;
z-index: 2;
overflow: hidden;
}

#storyTxt{
width: 98%;
pointer-events: none;
}

#storyMM01{
background: url(../images/story/mm01.png) no-repeat top left;
background-size: contain;
width: 4%;
height: 16%;
position: absolute;
top: 50%;
margin-top: -170px;
left: 5px;
z-index: 10;
}

#storyMM02{
background: url(../images/story/mm02.png) no-repeat top right;
background-size: contain;
width: 4%;
height: 33%;
position: absolute;
top: 50%;
margin-top: -160px;
right: 5px;
z-index: 10;
}

#storyMM03{
background: url(../images/story/mm03.png) no-repeat top left;
background-size: contain;
width: 4%;
height: 24%;
position: absolute;
top: 19%;
left: 20%;
z-index: 10;
}




/*

footer

*/


#copyrigt{
	background: url(../images/copyright2.png)no-repeat right top;
	background-size: contain;
	width:150px;
	height:20px;
	position: absolute;
	bottom:15px;
	right:5px;
	z-index:20;
}





/*

bnr slider

*/



#idMediaWrap{
	width: 830px;
	height: 40px;
	margin:10px auto 0;
	overflow:hidden;
	position:absolute;
	bottom:95px;
	left:50%;
	margin-left:-415px;
	z-index:12;
}

#lineupItem{
	width:810px;
	float:left;
	text-align:left;
}

#lineupItem li{
	float:left;
	display:inline;
	margin:0 0px;
	width:162px;
	height:40px;
	text-align:center;
}
.prevBtn{
	float:left;
	width:10px;
	height:40px;
	text-align:center;
}
.prevBtn a:hover{
	width:10px;
	height:40px;
	-ms-filter: "alpha( opacity=80 )";
	filter: alpha(opacity=80);
	opacity:0.8;
	zoom:1;
}
.nextBtn{
	float:right;
	width:10px;
	height:40px;
	text-align:center;
}
.nextBtn a:hover{
	width:10px;
	height:40px;
	-ms-filter: "alpha( opacity=80 )";
	filter: alpha(opacity=80);
	opacity:0.8;
	zoom:1;
}