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

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

#wrap{
width: 100%;
position:relative;
}

#content{
width: 100%;
min-width: 1200px;
}

section{
	width:100%;
	min-height:700px;
	height:100vh;
	text-align: center;
	position:relative;
transition:2s;
	/**/
}

section#top{
width: 100%;
height: 100vh;
min-height:700px;
}



/*

main

*/
div.main{
width: 100%;
height: 100%;
min-height: 700px;
position: relative;
overflow:hidden;
background:#caf3f7;
}


@-webkit-keyframes bgAnm {
0% { transform: scale(1.1, 1.1); }
100%   { transform: scale(1.0, 1.0); }
}

@keyframes bgAnm {
0% { transform: scale(1.1, 1.1); }
100%   { transform: scale(1.0, 1.0); }
}

#mainBg{
background: url("../images/top2/main_bg.jpg") no-repeat center top;
background-size: 100% auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
transform-origin:center top;
-webkit-animation: bgAnm 10s ease;
animation-duration: bgAnm 10s ease;
/*animation-fill-mode: backwards;*/
}

#buil{
background: url("../images/top2/main_buil.png") no-repeat center bottom;
background-size: 100%;
width: 100%;
/*min-width: 450px;*/
height: 63%;
position: absolute;
bottom: 50px;
left: 0;
z-index: 2;
}

#sakura{
background: url("../images/top2/sakura.png") no-repeat right top;
background-size: contain;
width: 30%;
/*min-width: 450px;*/
height: 24%;
position: absolute;
top: 0;
right: 0;
z-index: 10;
}

@-webkit-keyframes skrAnm {
0% { -webkit-transform: translate(200px,-70px);transform: translate(200px,-70px);}
100%   { -webkit-transform: translate(0,0);transform: translate(0,0);}
}

@keyframes skrAnm {
0% {-webkit-transform: translate(200px,-70px);transform: translate(200px,-70px);}
100%   { -webkit-transform: translate(0,0);transform: translate(0,0); }
}
	
#sakura_part{
background: url("../images/top2/sakura_part.png") no-repeat left top;
background-size: cover;
width: 100%;
/*min-width: 450px;*/
height:100%;
position: absolute;
top: 0;
right: 0;
z-index: 15;
-webkit-animation: skrAnm 2s ease;
animation-duration: skrAnm 2s ease;
}

@-webkit-keyframes charaAnm {
0% { transform: scale(1.1, 1.1); }
100%   { transform: scale(1.0, 1.0); }
}

@keyframes charaAnm {
0% { transform: scale(1.1, 1.1); }
100%   { transform: scale(1.0, 1.0); }
}

#mainChara01{
background: url("../images/top2/main_chara01.png") no-repeat center top;
background-size: cover;
width: 100%;
height: 52%;
position: absolute;
bottom: 0;
left: 0;
z-index: 5;
transform-origin:center top;
-webkit-animation: charaAnm 2s ease-out;
animation-duration: charaAnm 2s ease-out;
}

#mainChara02{
background: url("../images/top2/main_chara02.png") no-repeat center top;
background-size: cover;
width: 100%;
height: 52%;
position: absolute;
bottom: 0;
left: 0;
z-index: 4;
}

#mainChara03{
background: url("../images/top2/main_chara03.png") no-repeat center top;
background-size: cover;
width: 100%;
height: 57%;
position: absolute;
bottom: 0;
left: 0;
z-index: 6;
}

@-webkit-keyframes logoRotate {
0% { transform: rotateY(-100deg) scale(1.1, 1.1); }
100%   { transform: rotateY(0deg) scale(1.0, 1.0); }
}

@keyframes logoRotate {
0% { transform: rotateY(-100deg) scale(1.1, 1.1); }
100%   { transform: rotateY(0deg) scale(1.0, 1.0); }
}

#logo{
background: url("../images/top2/main_logo.png") no-repeat center;
background-size: contain;
width: 13%;
height: 28%;
position: absolute;
top: 21%;
left: 43%;
z-index: 10;
-webkit-animation: logoRotate 2s ease-out;
animation-duration: logoRotate 2s ease-out;
backface-visibility:hidden;
-webkit-backface-visibility: hidden;
}

#onairinfo{
background: url("../images/top2/main_onair.png") no-repeat right bottom;
background-size: contain;
width: 12%;
/*min-width: 450px;*/
height: 41%;
position: absolute;
bottom: 60px;
right: 10px;
z-index: 21;
}

/*@-webkit-keyframes cthAnm {
0% { transform: translate3d(0, 10%, 0);visibility: visible;}
100%   { transform: translate3d(0, 0, 0); }
}

@keyframes cthAnm {
0% { transform: translate3d(0, 10%, 0);visibility: visible;}
100%   { transform: translate3d(0, 0, 0); }
}*/

#catch{
background: url("../images/top2/main_catch.png") no-repeat left top;
background-size: contain;
width: 9%;
height: 39%;
position: absolute;
top: 10px;
left: 8%;
z-index: 16;
/*transform-origin:center bottom;
-webkit-animation: cthAnm 1s;
animation-duration: cthaAnm 1s;*/
}

#cover{
background: url("../images/top2/main_cover.png") no-repeat left bottom;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 20;
}

#mainSakura{
	width:40%;
	height:100%;
	position:absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

#twitter{
background: url("../images/top/i_twitter.png") no-repeat right top;
background-size: contain;
width: 60px;
height: 60px;
position: absolute;
bottom: 110px;
left: 10px;
z-index: 20;
transition: 0.5s;
}

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

#twitter:hover{
opacity: 0.5;
}


/*

menu

*/

nav{
position: absolute;
bottom: 0;
left: 0;
min-width:1200px;
}

#menuAll{
background: url("../images/nav2/menubg.png") repeat-x center;
background-size: auto 100%;
width: 100%;
height: 60px;
z-index: 45;
}

#menuArea{
width:98%;
margin:0 auto;
padding: 0px;
overflow: hidden;
position: relative;
}

#menuArea ul{
list-style: none outside none;
float: left;
margin: 0;
padding: 0;
position: relative;
/*left: 50%;*/
}

#menuArea ul li{
float: left;
margin: 0;
/*padding: 7px 0 0;*/
padding: 10px 0 0;
position: relative;
/*left: -50%;*/
line-height: 50px;
}

#menuArea ul li img{
transition:0.5s;
}
#menuArea ul li.dot{
background: url("../images/nav2/dot.png") no-repeat center;
background-size: contain;
float: left;
/*width: 40px;
height: 50px;*/
width: 18px;
height: 40px;
margin: 0;
padding: 10px 0;
position: relative;
/*left: -50%;*/
line-height: 60px;
}

/*li#navNews img{width:99px}
li#navMovie img{width:54px}
li#navIntro img{width:99px}
li#navChara img{width:99px}
li#navStaff img{width:171px}
li#navStory img{width:142px}
li#navMusic img{width:54px}
li#navOnair img{width:113px}
li#navGoods img{width:99px}
li#navBddvd img{width:113px}*/
li#navNews img{width:89px}
li#navMovie img{width:49px}
li#navIntro img{width:89px}
li#navChara img{width:89px}
li#navStaff img{width:154px}
li#navStory img{width:128px}
li#navMusic img{width:49px}
li#navOnair img{width:102px}
li#navGoods img{width:89px}
li#navBddvd img{width:102px}

#menuArea ul li a{transition: 0.5s;}
#menuArea ul li a:hover{opacity: 0.5;}


nav.is-fixed {
width: 100%;
min-width:1200px;
position: fixed;
top: 0;
left: 0;
}

#bnrSarea{
width: 170px;
height: 40px;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 50;
text-align: right;
}

#bnrSarea img{ margin-left: 2px;}

#nav_logo{
	width:228px;
	height:70px;
	background:url("../images/nav2/navi_logo.png") no-repeat;
	background-size:contain;
	position: absolute;
	top: 8px;
	right: 3px;
	z-index: 50;
	transition:0.5s;
	display:none;
}

@media screen and (min-width:480px) and ( max-width:1365px) {
#menuAll{
height: 60px;
}	
	
#menuArea ul li{
padding: 10px 0 0;
line-height: 55px;
}	
	
li#navNews img{width:79px}
li#navMovie img{width:43px}
li#navIntro img{width:79px}
li#navChara img{width:79px}
li#navStaff img{width:137px}
li#navStory img{width:114px}
li#navMusic img{width:43px}
li#navOnair img{width:90px}
li#navGoods img{width:79px}
li#navBddvd img{width:90px}
	
#menuArea ul li.dot{
width: 16px;
height: 40px;
margin: 0;
padding: 7px 0;
position: relative;
line-height: 55px;
}	

#nav_logo{
	width:173px;
	height:53px;
	top: 5px;
	right:0;
	}
}

@media screen and (min-width:1800px) {
li#navNews img{width:99px}
li#navMovie img{width:54px}
li#navIntro img{width:99px}
li#navChara img{width:99px}
li#navStaff img{width:171px}
li#navStory img{width:142px}
li#navMusic img{width:54px}
li#navOnair img{width:113px}
li#navGoods img{width:99px}
li#navBddvd img{width:113px}
	
#menuArea ul li.dot{
width: 40px;
height: 40px;
margin: 0;
padding: 10px 0;
position: relative;
line-height: 60px;
}	
	
}



/*

share

*/

#snsall{
width: 220px;
height: 20px;
position: absolute;
bottom: 75px;
left: 10px;
z-index: 50;
}


#snsall #sns{
display:inline;
margin:0;
float:left;
}

#snsall #sns li{
height:20px;
display:inline;
float:left;
padding:0;
margin-right:5px;
}

#snsall #sns li.fbbtn{ width:120px;}
#snsall #sns li.twitterbtn{ width:75px;margin-top:2.6px;}



/*portrait display*/
#portrait{
	position:absolute;
	width:100vw;
	height:100vh;
	left:0;
	top:0;
	background: url("../images/bg_port.jpg") no-repeat center;
	background-size:cover;
	z-index: 100;
	display:none;
}