@charset "Shift_JIS";

/* ----------------------------------------------------------- 
CSS Information  

Site URL:	http://www.cosme.net/xxxxx
File name:      cpn.css
Created:        2011-8-16
Last update:    2011-8-23
----------------------------------------------------------- */ 
/* -----------------------------------------------------------

Table of Contents
 * common style ----------- 共通css
 * top -------------------- topページ
 * 第2階層　cmn style -- 第2階層共通css
 * shopping_01 ---------- shopping_01用css
 * shopping_02 ---------- shopping_02用css
 * shopping_03 ---------- shopping_03用css
----------------------------------------------------------- */

/* ----------------------------------------------------------- 
 common style
----------------------------------------------------------- */ 
/* section ----------------------------- */

#spj-contents {
	width: 605px;
	background: url(images/cmn_bg.png) repeat-x left top;
	line-height: 1.6;
	padding: 0px 15px 15px;
	color: #666;
}
#spj-contents .inner {
	width: 605px;
	background: #fff;
	font-size: 93%;
	padding-bottom: 10px;
}
/* page top --------------------------------**/
#spj-contents .spj-pagetop {
	text-align: right;
	padding: 5px 25px 10px 0px;
	clear: both;
	font-weight: bold;
}

/* ----------------------------------------------------------- 
 top
----------------------------------------------------------- */ 
/* nav ---------------------------- */

#top-nav {
	background: url(images/top_nav.jpg) no-repeat;
	height: 580px;
	width: 552px;
	position: relative;
	margin-left: 25px;
}

#top-nav .lbtn_01 {
	width: 239px;
	height: 47px;
}

#top-nav .lbtn_01 a{
	display: block;
	overflow: hidden;
	position: absolute;
	left: 17px;
	top: 189px;
	width: 239px;
	height: 0;
	padding: 47px 0 0 0;
	background: url(images/top_btn_l_01.png) no-repeat left top;
}
#top-nav .lbtn_01 a:hover {
	background-position: 0 -47px;
}

#top-nav .lbtn_02 {
	width: 239px;
	height: 47px;
}

#top-nav .lbtn_02 a{
	display: block;
	overflow: hidden;
	position: absolute;
	left: 17px;
	top: 240px;
	width: 239px;
	height: 0;
	padding: 47px 0 0 0;
	background: url(images/top_btn_l_02.png) no-repeat left top;
}
#top-nav .lbtn_02 a:hover {
	background-position: 0 -47px;
}

#top-nav .pbtn_01 {
	width: 239px;
	height: 47px;
}

#top-nav .pbtn_01 a{
	display: block;
	overflow: hidden;
	position: absolute;
	left: 296px;
	top: 188px;
	width: 239px;
	height: 0;
	padding: 47px 0 0 0;
	background: url(images/top_btn_p01.png) no-repeat left top;
}
#top-nav .pbtn_01 a:hover {
	background-position: 0 -47px;
}

#top-nav .pbtn_02 {
	width: 239px;
	height: 47px;
}

#top-nav .pbtn_02 a{
	display: block;
	overflow: hidden;
	position: absolute;
	left: 296px;
	top: 240px;
	width: 239px;
	height: 0;
	padding: 47px 0 0 0;
	background: url(images/top_btn_p02.png) no-repeat left top;
}
#top-nav .pbtn_02 a:hover {
	background-position: 0 -47px;
}
#top-nav .cbtn_01 {
	width: 239px;
	height: 47px;
}

#top-nav .cbtn_01 a{
	display: block;
	overflow: hidden;
	position: absolute;
	left: 17px;
	top: 463px;
	width: 239px;
	height: 0;
	padding: 47px 0 0 0;
	background: url(images/top_btn_c01.png) no-repeat left top;
}
#top-nav .cbtn_01 a:hover {
	background-position: 0 -47px;
}

#top-nav .cbtn_02 {
	width: 239px;
	height: 47px;
}

#top-nav .cbtn_02 a{
	display: block;
	overflow: hidden;
	position: absolute;
	left: 17px;
	top: 517px;
	width: 239px;
	height: 0;
	padding: 47px 0 0 0;
	background: url(images/top_btn_c02.png) no-repeat left top;
}
#top-nav .cbtn_02 a:hover {
	background-position: 0 -47px;
}
#top-nav .spoin01{
	height: 0px;
	width: 239px;
	position: absolute;
	left: 297px;
	top: 377px;
	display: block;
}
#top-nav .spoin02{
	height: 0px;
	width: 239px;
	position: absolute;
	left: 297px;
	top: 428px;
	display: block;
}
/* ----------------------------------------------------------- 
 第2階層　common style
----------------------------------------------------------- */ 
/* set up ----------------------------- */
.clearfix { zoom:1; }
.clearfix:after { content:"."; display:block; height:0px; clear:both; visibility:hidden; }

/* header ---------------------------- */
#spj-header {
	background: url(images/cmn_header.png) no-repeat;
	height: 297px;
	font-size: 13px;
	line-height: 1.7;
	color: #666;
}
#spj-header h3 {
	clear: both;
	margin: 0px 0px 10px 15px;
	padding-top: 3px;
}
#spj-header p {
	display: block;
	margin: 0px 15px 0px 18px;
}
#spj-header .paging {
	text-align: right;
	font-weight: bold;
}
#spj-header li {
	float: left;
	margin-bottom: 3px;
}

#spj-header .second-nav .nav01 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 156px;
	padding-top: 72px;
	background: url(images/second_nav01.png);
}

#spj-header .second-nav .nav01 a:hover {
	background: url(images/second_nav01_hover.png);
}
#spj-header .second-nav .nav02 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 160px;
	padding-top: 72px;
	background: url(images/second_nav02.png);
}

#spj-header .second-nav .nav02 a:hover {
	background: url(images/second_nav02_hover.png);
}
#spj-header .second-nav .nav03 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 160px;
	padding-top: 72px;
	background: url(images/second_nav03.png);
}

#spj-header .second-nav .nav03 a:hover {
	background: url(images/second_nav03_hover.png);
}
#spj-header .second-nav .nav04 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 159px;
	padding-top: 72px;
	background: url(images/second_nav04.png);
}

#spj-header .second-nav .nav04 a:hover {
	background: url(images/second_nav04_hover.png);
}


/* footer ---------------------------- */
#spj-footer {
	height: 72px;
}
#spj-footer li {
	float: left;
}
#spj-footer .second-nav .nav01 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 156px;
	padding-top: 72px;
	background: url(images/second_nav01.png);
}

#spj-footer .second-nav .nav01 a:hover {
	background: url(images/second_nav01_hover.png);
}
#spj-footer .second-nav .nav02 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 160px;
	padding-top: 72px;
	background: url(images/second_nav02.png);
}

#spj-footer .second-nav .nav02 a:hover {
	background: url(images/second_nav02_hover.png);
}
#spj-footer .second-nav .nav03 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 160px;
	padding-top: 72px;
	background: url(images/second_nav03.png);
}

#spj-footer .second-nav .nav03 a:hover {
	background: url(images/second_nav03_hover.png);
}
#spj-footer .second-nav .nav04 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 159px;
	padding-top: 72px;
	background: url(images/second_nav04.png);
}

#spj-footer .second-nav .nav04 a:hover {
	background: url(images/second_nav04_hover.png);
}

/* product area ---------------------------- */
#product-area {
	padding-top: 10px;
}
#product-area .product {
	float: left;
	padding-left: 15px;
	height: 298px;
	display: block;
	width: 243px;
}
#product-area .product img {
	vertical-align:bottom;
}
#product-area .img {
	float: left;
}
#product-area .detail {
	float: left;
	padding: 10px 0px 0px 15px;
	display: block;
	width: 315px;
	height: auto;
	line-height: 1.7;
}

#product-area .name {
	font-size: 18px;
	font-weight: bold;

}
#product-area .spec {
	font-size: 15px;
}
#product-area .cmn_btn {
	padding-top: 10px;
}
#product-area .cmn_btn a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 278px;
	padding-top: 42px;
	background: url(images/cmn_btn_com.png);
}

#product-area .cmn_btn a:hover {
	background: url(images/cmn_btn_com_hover.png);
}

/* review ------- */
#review_bg01 {
	background: url(images/cmn_review02.png) no-repeat right bottom;
	height: 259px;
	width: 566px;
	clear: both;
	position: relative;
	font-size: 10px;
	padding: 8px 0px 0px 15px;
}
#review_bg02 {
	background: url(images/cmn_review03.png) no-repeat right bottom;
	height: 259px;
	width: 566px;
	clear: both;
	position: relative;
	font-size: 10px;
	padding: 8px 0px 0px 15px;
}

#product-area .review .right {
	text-align: right;
	display: block;
}
#product-area .review .cmt01 {
	display: block;
	width: 194px;
	position: absolute;
	left: 77px;
	top: 100px;
	height: 110px;
}
#product-area .review .cmt02 {
	display: block;
	width: 194px;
	position: absolute;
	left: 360px;
	top: 100px;
	height: 110px;
}
#product-area .review .btn-more {
	position: absolute;
	left: 323px;
	top: 229px;
}
/* pick up ------- */
#product-area .pick-up {
	padding: 15px 0px 0px 18px;
	height: 420px;
	width: 563px;
}
#product-area .pick-up img {
	vertical-align:bottom;
}
/* guide ---------------------------- */
 /* IE7にのみ適用 */
*:first-child+html #splead {
	padding: 15px 15px 0px 10px;
}
*:first-child+html #splead .btn_check02 {
	margin: 5px 10px 0px 22px;
}
 /* IE6にのみ適用 */
* html #splead {
	margin: 15px 0px 0px -20px;
}	
* html #splead .btn_check02 {
 margin: 5px 12px 0px 18px;
}
#splead {
	padding: 15px 0px 0px 25px;
	text-align: center;
}
#splead .btn_check02 {
	float: left;
	margin: 5px 10px 0px 12px;
}
#splead .btn_check02 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 264px;
	padding-top: 41px;
	background: url(images/cmn_btn_check01.png);
}
#splead .btn_check02 a:hover {
	background: url(images/cmn_btn_check01_hover.png);
}
#splead .btn_check03 {
	margin-top: 5px;
	float: left;
}
#splead .btn_check03 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 264px;
	padding-top: 41px;
	background: url(images/cmn_btn_check02.png);
}
#splead .btn_check03 a:hover {
	background: url(images/cmn_btn_check02_hover.png);
}

/* ----------------------------------------------------------- 
shopping_01
----------------------------------------------------------- */ 
/* product-btn --------- */
#l_btn {
	padding-top: 5px;
}

#l_btn a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 278px;
	padding-top: 42px;
	background: url(images/l_btn01.png);
}

#l_btn a:hover {
	background: url(images/l_btn01_hover.png);
}

#l_btn02 {
	padding-top: 5px;
}

#l_btn02 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 278px;
	padding-top: 42px;
	background: url(images/l_btn02.png);
}

#l_btn02 a:hover {
	background: url(images/l_btn02_hover.png);
}

/* guide-btn --------- */
#l_btn_check a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 552px;
	padding-top: 99px;
	background: url(images/l_btn03.png);
}

#l_btn_check a:hover {
	background: url(images/l_btn03_hover.png);
}
/* ----------------------------------------------------------- 
shopping_02
----------------------------------------------------------- */ 
/* product-btn --------- */
#p_btn01 {
	padding-top: 5px;
}

#p_btn01 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 278px;
	padding-top: 42px;
	background: url(images/p_btn01.png);
}

#p_btn01 a:hover {
	background: url(images/p_btn01_hover.png);
}

/* guide-btn --------- */
#p_btn_check a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 552px;
	padding-top: 99px;
	background: url(images/p_btn02.png);
}

#p_btn_check a:hover {
	background: url(images/p_btn02_hover.png);
}
/* ----------------------------------------------------------- 
shopping_03
----------------------------------------------------------- */ 
/* product-btn --------- */
#c_btn01 {
	padding-top: 5px;
}

#c_btn01 a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 278px;
	padding-top: 42px;
	background: url(images/c_btn01.png);
}

#c_btn01 a:hover {
	background: url(images/c_btn01_hover.png);
}