@charset "UTF-8";


/* ========================================
	topper
======================================== */
#topper {
	margin: 0 34px;
	height: 156px;
	/*background: url(../common/bg_line.png) 0 140px repeat-x;*/
}


#topper .ttl {
	padding-top: 11px;
	text-align: center;
}

#area1 {
	height: 516px;
	position: relative;
	background: url(../robobo/images/area1_bg.png) center top repeat-x;
}


/* ========================================
	#area1
======================================== */
#area1 .area1-deco {
	display: none;
	margin: auto;
	width: 100%;
	height: 516px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

#area1 .area1-deco1 {
	position: absolute;
	top: 0;
	left: 0;
}
#area1 .area1-deco2 {
	position: absolute;
	top: 0;
	right: 0;
}

#area1 .area1-text {
	position: absolute;
	top: 106px;
	left: 0;
	z-index: 10;
}

#area1 .area1-ttl {
	position: relative;
	height: 166px;
	margin: 0 0 0 -1px;
}
#area1 .area1-lead {
	margin: 14px 0 0 0;
}

#area1 .area1-emblem {
	position: absolute;
	top: 121px;
	left: -152px;
}

#area1 #area1-movie {
	position: absolute;
	top: 0;
	right: -229px;
	width: 848px;
	height: 516px;
	overflow: hidden;
}
#area1 #area1-movie iframe {
	position: absolute;
	top: 0;
	left: -35px;
}
#area1 #area1-movie #area1-movie-loading {
	display: none;
	position: absolute;
	top: 0;
	left: -35px;
}
body.js #area1 #area1-movie #area1-movie-loading {
	display: block;
}


#area1 .area1-movie-mask {
	position: absolute;
	top: 0;
	left: 0;
}


/* ========================================
	#area2
======================================== */
#area2 {
	height: 719px;
	position: relative;
	/*top: -50px;*/
}

#area2 .area2-bg {
	width: 100%;
	height: 671px;
	background: url(../robobo/images/area2_bg.png) center 0 no-repeat;
	position: absolute;
	top: 0;
}

#area2 .inner {
	z-index: 10;
}


/*switch*/
.switch-title {
	position: absolute;
	top: 95px;
	left: 516px;
	z-index: 10;
}

.switch-ttl {
	position: relative;
}
.switch-lead {
	position: absolute;
	top: 188px;
	left: -3px;
}

.switch-btn {
	position: absolute;
	top: 450px;
	left: 0;
	z-index: 10;
}

.switch-btn li {
	position: absolute;
}

.switch-btn1 {
	top: 32px;
	left: 0;
}
.switch-btn2 {
	top: 0;
	left: 117px;
}
.switch-btn3 {
	top: 32px;
	left: 233px;
}
.switch-btn4 {
	top: 0;
	left: 350px;
}
.switch-btn5 {
	top: 151px;
	left: 0;
}
.switch-btn6 {
	top: 119px;
	left: 117px;
}
.switch-btn7 {
	top: 151px;
	left: 233px;
}
.switch-btn8 {
	top: 119px;
	left: 350px;
}

.switch-btn li a {
	display: block;
	cursor: pointer;

}

.switch-btn-hover {
	opacity: 0;
	position: absolute;
	top: -22px;
	left: 3px;
	transition: top 0.3s;
}
a:hover .switch-btn-hover {
	opacity: 100;
	top: -17px;
}

.switch-btn-new {
	position: absolute;
	top: 97px;
	left: 18px;
}

.switch-wrap {
	position: absolute;
	top: 0;
	left: 0;
}
.switch-wrap .switch-mode {
	opacity: 0;
}
.switch-wrap .mode-spark {
	opacity: 1;
}


/*switch-mode*/
.switch-mode .switch-name {
	position: absolute;
	top: 639px;
	left: 516px;
}


/*switch-chara*/
.switch-chara {
	position: absolute;
	width: 1300px;
	height: 700px;
	overflow: hidden;
}
.switch-chara img {
	position: absolute;
	top: 0;
	left: 0;
}
.mode-beam .switch-chara {
	top: -131px;
	left: -433px;
}

.mode-fire .switch-chara {
	top: -164px;
	left: -477px;
}

.mode-sword .switch-chara {
	top: -101px;
	left: -450px;
}

.mode-spark .switch-chara {
	top: -98px;
	left: -464px;
}

.mode-jet .switch-chara {
	top: -105px;
	left: -390px;
}

.mode-cutter .switch-chara {
	top: -85px;
	left: -424px;
}

.mode-bomb .switch-chara {
	top: -100px;
	left: -409px;
}

.mode-wheel .switch-chara {
	top: -101px;
	left: -426px;
}

/*movie*/
.movie-box {
	width: 444px;
	position: absolute;
	top: 360px;
	left: 516px;
	z-index: 1;
}
.movie-yt {
	position: absolute;
	top: 10px;
	left: 12px;
	width: 420px;
	height: 240px;
	overflow: hidden;
}
.movie-yt iframe {
	position: absolute;
	top: -15px;
	left: -15px;
}
.movie-door {
	position: absolute;
	top: 10px;
	left: 13px;
	width: 418px;
	height: 240px;
	overflow: hidden;
}
.movie-door-left,
.movie-door-right {
	position: absolute;
	top: 0;
}
.movie-door-left {
	left: 0;
}
.movie-door-right {
	right: 0;
}
.movie-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 444px;
	height: 259px;
}
.movie-box {
}

.movie-nojs {
	position: absolute;
	top: 10px;
	left: 13px;
	width: 418px;
	height: 240px;
	overflow: hidden;
}



/* ========================================
	#area3
======================================== */
#area3 {
	height: 663px;
	position: relative;
}

#area3 .inner {
	z-index: 10;
}

#area3 .area3-box {
	width: 960px;
	height: 446px;
	background: url(../robobo/images/area3_box.png) 0 0 no-repeat;
	position: absolute;
	top: 101px;
}

#area3 .area3-ttl {
	position: absolute;
	top: 64px;
	left: 119px;
}
#area3 .area3-img1 {
	position: absolute;
	top: 141px;
	left: 50px;
}
#area3 .area3-img2 {
	position: absolute;
	top: 157px;
	left: 512px;
}
#area3 .area3-img3 {
	position: absolute;
	top: 320px;
	left: 523px;
}

#area3 .area3-chara1 {
	position: absolute;
	top: -126px;
	right: 0;
}
#area3 .area3-chara2 {
	position: absolute;
	top: 405px;
	left: -45px;
}

#area3 .area3-bg {
	width: 100%;
	height: 511px;
	background: url(../robobo/images/area3_bg.png) center 0 no-repeat;
	position: absolute;
	top: 0;
}


/*bg-cloud*/
.bg-cloud-top {
	background: url(../common/bg_cloud_top.png) center 0 repeat-x;
	width: 100%;
	height: 400px;
	position: absolute;
	top: 0;
}

.bg-cloud-btm {
	background: url(../common/bg_cloud_btm.png) center bottom repeat-x;
	width: 100%;
	height: 400px;
	position: absolute;
	bottom: 0;
}

.bg-cloud-star {
	margin: 0 auto 0 -480px;
	width: 960px;
	position: absolute;
	top: 0;
	left: 50%;
}

.bg-cloud-star1 {
	position: absolute;
	top: -5px;
	left: -371px;
}

.bg-cloud-star2 {
	position: absolute;
	top: 131px;
	right: -224px;
}

.bg-cloud-star3 {
	position: absolute;
	top: 269px;
	left: -375px;
}



/* ========================================
	#bg
======================================== */
#bg .bg-circle-robobo {
	width: 100%;
	height: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#bg .bg-circle-robobo {
	background: url(../robobo/images/bg_circle_robobo.png) center top no-repeat;
}


#container .pagetop {
	margin-top: -100px;
}