@charset "UTF-8";


#bg .bg-movie-main,
#bg .bg-star {
	width: 100%;
	height: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#bg {
	background: url(../movie/images/bg_movie.gif) center top repeat;
}

#bg .bg-movie-main {
	background: url(../movie/images/bg_movie_main.png) center top no-repeat;
}

#bg .bg-circle {
	background: url(../movie/images/bg_circle.png) center 420px no-repeat;
}

#bg .bg-star {
	background: url(../movie/images/bg_star.png) center 41px no-repeat;
}

/* ========================================
	topper
======================================== */
#topper {
	margin: 0 34px;
	height: 165px;
}

#topper .ttl {
	margin-top: 14px;
	text-align: center;
}

/* ========================================
	main
======================================== */
#main{
	height: 755px;
}

#main.istablet{
	height:900px;
}

.no-js #main{
	height: 755px;
}

.movie-contents{
	position:relative;
	width:100%;
	height: 755px;
	z-index:10;
}

#movie-ttl {
	position: absolute;
	top: 0;
	left: 0;
}
.chara01{
	position: absolute;
	top: -82px;
	left: -38px;
}
.chara02{
	position: absolute;
	top: 472px;
	right: -26px;
}

#movie{
	position: absolute;
	top: 134px;
	left: 0;
	width:700px;
	height:394px;
}

.movie-wrap{
	position: absolute;
	top: 0;
	left: 61px;
	width: 838px;
	height: 574px;
	background: url(../movie/images/movie_bg.png) center 114px no-repeat;
}
.movie-area{
	position:absolute;
	top: 9px;
	left: 68px;
}
.movie-navi{
	position: absolute;
	top: 593px;
	left: 263px;
}
.movie-navi .new{
	position: absolute;
	top: 106px;
	left: 63px;
}
.movie-navi li{
	display: inline-block;
	position: relative;
	cursor: pointer;
}
.movie-navi li .nav-on{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
.movie-navi li.current .nav-on{
	display: block;
}

#pop-wrap {
	width: 838px;
	position: relative;
}

#note {
	position: absolute;
	top: 0;
	left: 0;
}