@charset "UTF-8";

/* ========================================
	main
======================================== */
img {
	width: 100%;
}



/*----------------------
	#area1
----------------------*/
#area1 {
	margin-top: -2.445%;
	background-image: url(../robobo/images/area1_bg.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.area1-movie {
	position: relative;
}

.movie-arw/*,
.movie-3ds*/ {
	position: absolute;
	top: 0;
	left: 0;
}
/*----------------------
	#area2
----------------------*/
#area2 {
	background-image: url(../robobo/images/area2_bg.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.switch {
	position: relative;
}

.switch-ttl {
	padding-top: 16%;
	position: absolute;
	top: 0;
	z-index: 10;
}

.switch-wrap {
	padding-top: 16%;
}

switch-slider li {
	position: relative;
}

.switch-movie {
	width: 48.4375%;
	position: absolute;
	top: 80.645%;
	left: 49.218%;
}



/*.switch-spec {
	display: table;
}

.switch-name,
.switch-movie {
	display: table-cell;
	position: relative;
}

.switch-name {
	width: 49.218%;

}

.switch-movie {
	width: 50.782%;
}*/

.switch-movie-arw {
	position: absolute;
	top: 0;
	left: 0;
}

.switch-btn-wrap {
	margin-top: 1.98%;
	position: relative;
}

.switch-btn {
}


.switch-btn li {
	width: 26.4%;
}

.switch-btn li .switch-btn-ov {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

.switch-btn li .active .switch-btn-ov {
	display: inline;
}

.switch-btn li .switch-btn-new {
	position: absolute;
	bottom: 0;
	left: 0;
}

.switch-btn1 {
	position: absolute;
	left: 2.5%;
	top: 13.75%;
}

.switch-btn2 {
	position: absolute;
	left: 25.62%;
	top: 0;
}

.switch-btn3 {
	position: absolute;
	left: 48.75%;
	top: 13.75%;
}
.switch-btn4 {
	position: absolute;
	left: 71.875%;
	top: 0;
}

.switch-btn5 {
	position: absolute;
	top: 57.3%;
	left: 2.5%;
}
.switch-btn6 {
	position: absolute;
	top: 43.55%;
	left: 25.62%;
}
.switch-btn7 {
	position: absolute;
	top: 57.3%;
	left: 48.75%;
}
.switch-btn8 {
	position: absolute;
	top: 43.55%;
	left: 71.875%;
}


.switch-control {
	width: 100%;
	position: absolute;
	top: 40%;
	height: 7.428%;
}

.switch-control li {
	width: 14%;
	height: 100%;
	position: absolute;
	top: 0;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.switch-control li a {
	display: block;
	width: 100%;
	height: 100%;
}

.switch-control .switch-prev {
	left: 0;
	background-image: url(../robobo/images/switch_prev.png);
}
.switch-control .switch-next {
	right: 0;
	background-image: url(../robobo/images/switch_next.png);
}

.bx-prev,
.bx-next {
	text-indent:-9999px;
	position: absolute;
	top: 40%;
	width: 14%;
	height: 7.428%;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.bx-prev {
	left: 0;
	background-image: url(../robobo/images/switch_prev.png);
}

.bx-next {
	right: 0;
	background-image: url(../robobo/images/switch_next.png);
}



.slide-inner {
	display: table;
	width: 100%;
}
.slide-inner span {
	display: table-cell;
}
.slide-inner .switch-name {
	width: 45%;
}
.slide-inner .switch-movie {
	width: 55%;
}

/* btn */
#slide-btn ul {
	display: table;
	width: 76%;
	margin: 0 auto;
}
#slide-btn li {
	display: table-cell;
}