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

body {
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-weight: 500;
font-style: normal;
background: #FFF;
width: 100%;
height:100%;
font-size:12px;
line-height:1.7em;
letter-spacing: 2px;
color:#474b4b;
margin: 0px;
}

#wrap{
width: 100%;
height: 100%;
}


@media screen and (orientation: landscape) {

#mainWarning{
	display:none;
}

}

@media screen and (orientation: portrait) {

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

}


/*

main

*/

#mainArea{
width: 100%;
height: 100%;
min-width: 1300px;
min-height: 700px;
overflow: hidden;
position: relative;
}

@-webkit-keyframes  fadeanm {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes  fadeanm {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#logoPlate{
background-color: #FFF;
width: 100%;
height: 140px;
position: absolute;
bottom: 0;
left: 0;
z-index: 20;
}

#logo{
background: url("../images/top/logo.png") no-repeat center bottom;
background-size: contain;
width: 44%;
height: 29%;
position: absolute;
bottom: 50px;
left: 28%;
z-index: 21;
}

#roadshow{
background: url("../images/top/roadshow.png") no-repeat;
background-size: contain;
width: 155px;
height: 62px;
position: absolute;
bottom: 68px;
right: 10px;
z-index: 21;
}

#roadshow2{
background: url("../images/top/roadshow2.png") no-repeat;
background-size: contain;
width: 135px;
height: 80px;
position: absolute;
bottom: 60px;
right: 10px;
z-index: 21;
}


.sakuraAll{
	width:110%;
	height:110%;
	position:absolute;
	top:-5%;
	left:-5%;
	z-index:19;
}



/*

img

*/


@-webkit-keyframes  topImgChara {
0% { transform: scale(1.1);}
100% { transform: scale(1);}
}

@keyframes  topImgChara {
0% { transform: scale(1.1);}
100% { transform: scale(1);}
}

#topImgCenter{
background: url("../images/top/imgMain.png") no-repeat center;
background-size: auto 100%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
-webkit-animation: topImgChara 3s ease-out 0s forwards;
animation: topImgChara 3s ease-out 0s forwards;
}


#topCatch01{
background: url("../images/top/catch.png") no-repeat left top;
background-size: contain;
width: 10%;
height: 70%;
position: absolute;
top: 20px;
left: 20px;
z-index: 4;
-webkit-animation: topCatch02 2s ease-out 3s forwards;
animation: topCatch02 2s ease-out 3s forwards;
opacity: 0;
}

@-webkit-keyframes  topCatch02 {
0% { opacity:0;}
100% { opacity:1;}
}

@keyframes  topCatch02 {
0% { opacity:0;}
100% { opacity:1;}
}

#topCatch02{
background: url("../images/top/catch02.png") no-repeat center;
background-size: contain;
width: 14%;
height: 20%;
position: absolute;
top: 35%;
left: 43%;
z-index: 4;
-webkit-animation: topCatch02 2s ease-out 2s forwards;
animation: topCatch02 2s ease-out 2s forwards;
opacity: 0;
}

#topImgLeft{
background: url("../images/top/img02.jpg") no-repeat center;
background-size: cover;
width: 50%;
height: 52%;
position: absolute;
left: 0;
top: 17%;
z-index: 1;
}

#topImgRight{
background: url("../images/top/img01.jpg") no-repeat center;
background-size: cover;
width: 50%;
height: 52%;
position: absolute;
right: 0;
top: 17%;
z-index: 1;
}


@keyframes img01slider {
from { background-position: 0 0; }
to { background-position: -1867px 0; }
}

@keyframes img02slider {
from { background-position: 0 0; }
to { background-position: 1867px 0; }
}



#topSlide01{
background: url("../images/top/imgSlide01.jpg") repeat-x left;
background-size: auto 100%;
width: 100%;
height: 160px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
animation: img01slider 100s linear infinite;
}

#topSlide02{
background: url("../images/top/imgSlide02.jpg") repeat-x left;
background-size: auto 100%;
width: 100%;
height: 160px;
position: absolute;
bottom: 140px;
left: 0;
z-index: 2;
animation: img02slider 100s linear infinite;
}


@keyframes img01sliderB {
from { background-position: 0 0; }
to { background-position: -2217px 0; }
}

@keyframes img02sliderB {
from { background-position: 0 0; }
to { background-position: 2217px 0; }
}

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


#topSlide01{
background: url("../images/top/imgSlide01.jpg") repeat-x left;
background-size: auto 100%;
width: 100%;
height: 190px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
animation: img01slider 120s linear infinite;
}

#topSlide02{
background: url("../images/top/imgSlide02.jpg") repeat-x left;
background-size: auto 100%;
width: 100%;
height: 190px;
position: absolute;
bottom: 140px;
left: 0;
z-index: 2;
animation: img02slider 120s linear infinite;
}

}


@keyframes img01sliderB {
from { background-position: 0 0; }
to { background-position: -2450px 0; }
}

@keyframes img02sliderB {
from { background-position: 0 0; }
to { background-position: 2450px 0; }
}

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


#topSlide01{
background: url("../images/top/imgSlide01.jpg") repeat-x left;
background-size: auto 100%;
width: 100%;
height: 210px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
animation: img01slider 120s linear infinite;
}

#topSlide02{
background: url("../images/top/imgSlide02.jpg") repeat-x left;
background-size: auto 100%;
width: 100%;
height: 210px;
position: absolute;
bottom: 140px;
left: 0;
z-index: 2;
animation: img02slider 120s linear infinite;
}

}


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

#topImgLeft,#topImgRight{
height: 63%;
top: 14%;
}

}


/*

bnr

*/

#bnr01{
width: 14%;
max-width: 200px;
/*height: 200px;*/
position: absolute;
line-height: 0;
bottom: 140px;
right: 0;
z-index: 30;
transition: all 0.3s ease;
}

#bnrNovel{
width: 220px;
position: absolute;
line-height: 0;
bottom: 70px;
right: 160px;
z-index: 30;
text-align: right;
}


#bnrInfo{
width: 330px;
height: 60px;
position: absolute;
line-height: 0;
bottom: 155px;
right: 10px;
z-index: 30;
transition: all 0.3s ease;
}

#bnrNovel img,#bnrInfo img{
transition: all 0.3s ease;
}

#bnr01:hover,#bnrNovel img:hover,#bnrInfo img:hover{ opacity: 0.7;}




/*

mubichike

*/

#mvck{
width: 140px;
position: absolute;
line-height: 0;
bottom: 67px;
left: 5px;
z-index: 30;
}

#mvck img{
margin: 3px 5px 0 0;
border: solid 1px #A6A6A6;
transition: all 0.3s ease;
}

#mvck img:hover{
opacity: 0.7;
}


#udcast{
width: 170px;
position: absolute;
line-height: 0;
bottom: 70px;
left: 145px;
z-index: 30;
}

#udcast2{
width: 170px;
position: absolute;
line-height: 0;
bottom: 70px;
left:5px;
z-index: 30;
}

#udcast img,#udcast2 img{
border: solid 1px #A6A6A6;
transition: all 0.3s ease;
}

#udcast img:hover,#udcast2 img:hover{
opacity: 0.7;
}