/*/////////////////////////////////////////////////////////////////////////////////////////////////

 Base Layout

/////////////////////////////////////////////////////////////////////////////////////////////////*/

html, body {
	width:960px; height:500px; overflow:hidden;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size:12px;
}
body {
	position:relative;
	background:url(../images/bg_main.jpg) no-repeat;
}

/* TOP AREA */
#top { position:relative;}
#top h1 { position:absolute; top:15px; left:20px; z-index:100;}
#top ul { width:100%; position:relative;}
#top li { position:absolute; top:60px; left:1000px; z-index:1; cursor:pointer;}

#top li .data {
	width:150px; height:130px; overflow:hidden;
	position:absolute; top:255px; left:50%; margin-left:-75px;
}
#top li .data_inner {
	width:130px; height:130px; margin-top:0; padding:10px;
	background:url(../images/check_back.png) repeat-y;
}
#top li .data_inner img { margin-bottom:10px;}
#top li .data_inner p { margin-bottom:4px; font-size:10px;}

#top li .btn {
	width:150px; height:19px; text-align:center;
	background:#000 url(../images/check_over.gif) no-repeat -150px 0;
	position:absolute; top:392px; left:50%; margin-left:-75px;
}
#top li .btn img { display:inline-block; margin-top:5px;}

/* DETAIL AREA */
.detail { display:none; width:960px; height:500px; position:absolute; top:0; left:0;}
.left_area {
	position:absolute; top:0; left:0; width:331px; height:500px; overflow:hidden;
	background:url(../images/bg_style.jpg) no-repeat;
}
.left_area .data { width:331px; margin-top:50px; margin-left:331px; text-align:center;}
.left_area img.style { display:block; margin-bottom:5px; }

.single .left_area .data { margin:0;}




.right_area { position:absolute; top:0; left:331px; width:629px; height:500px; position:relative;}
.right_area .data { position:absolute; top:60px; left:50px;}
.right_area .data img { display:block;}
.right_area .data h3 { margin-top:10px; margin-bottom:30px;}
.right_area .data li.item_detail {
	float:left; width:130px; height:200px; margin-right:5px; position:relative;
	background:url(../images/box_off.gif) no-repeat;
}
.right_area .data li.item_detail img.over { display:none; position:absolute; top:0; left:0; z-index:0;}
.right_area .data li.item_detail img.item { display:block; position:absolute; top:4px; left:4px; z-index:100;}
.right_area .data li.item_detail div.item_info { position:absolute; top:130px; left:0; font-size:10px; line-height:1.2em;}
.right_area .data li.item_detail div.item_info span { display:block; font-weight:bold; margin-bottom:5px;}

.right_area .data ul.color_list { margin-top:5px;}
.right_area .data ul.color_list li {
	float:left; width:12px; height:12px; margin-bottom:1px; margin-right:1px;
	background-color:#FFF; border:#CCC 1px solid;
}
.right_area .data ul.color_list li span { display:block; width:10px; height:10px; margin:1px;}
.right_area .data ul.color_list li span.sp1 { float:left; width:5px; height:10px; margin:1px 0 1px 1px;}
.right_area .data ul.color_list li span.sp2 { float:left; width:5px; height:10px; margin:1px 1px 1px 0;}

.right_area img.btn { display:block; position:absolute; z-index:100; cursor:pointer;}
.right_area img.next { bottom:60px; right:54px;}
.right_area img.prev { bottom:60px; left:50px;}
.right_area img.close {  top:0; right:0;}
