@charset "UTF-8";
@import url("../common/css/default.css");
@import url("../common/css/layout.css");

/* --------------------------------
	toppage.css
--------------------------------
toppage.cssはトップページで使用しているCSSファイルです。

** index
01.共用CSS上書き
02.汎用class
	01.banners				バナー群
03.#ContentHeader		コンテンツヘッダー
04.#CatList				カテゴリナビ
05.#Pickup				商品紹介
06.#Ranking				人気商品ランキング
07.#Login				ログイン
08.#Cart				ショッピングカート
09.#Evaluate			各店舗の評価
10.#PR					PRバナー
-------------------------------- */

/* --------------------------------
■01.共用CSS上書き
--------------------------------
サイト全体で共用しているCSSの設定を上書きします。
-------------------------------- */
/* section */
.section {
	margin-bottom:15px;
}

/* box */
#Main .box h2,
#Main .box .title {
	height:20px;
	padding-top:4px;
	background-image:url("../img/bg_main_headline.gif");
}
#Sub .box h2,
#Sub .box .title {
	height:19px;
	padding-top:5px;
	padding-left:45px;
	background-image:url("../img/bg_sub_headline.gif");
}

/* Header */
#Header {
	margin:0 0 15px;
}

/* Main */
#Contents {
	position:relative;
}
#Main {
	width:655px;
}


/* Sub */
#Sub {
##	width:305px;
	width:315px;
}
#Sub {
	padding-bottom:2em;
}
#Sub .return-to {
	position:absolute;
	right:0;
	bottom:0;
	_bottom:40px;
##	width:305x;
	width:315x;
}

/* Footer */
#Footer .nav {
	margin-top:40px;
}

/* StoreInfo */
#Contents #StoreInfo {
	_width:619px;
}


/* --------------------------------
■02.汎用class
--------------------------------
ページ内で汎用的に使用されているclassの定義です。
-------------------------------- */

/* --------------------------------
■■02-01.banners(バナー群)
--------------------------------
バナーをまとめて掲載するブロック用のclassです。
-------------------------------- */
/* Main */
#Main .banners {
	overflow:hidden;
	margin-right:-5px;
	_zoom:1;
}
#Main .banners img {
	vertical-align:bottom;
}
#Main .banners li {
	float:left;
}
#Main .banners .large {
	float:none;
	margin:0 0 10px;
}
#Main .banners .small {
	width:215px;
	margin:0 5px 10px 0;
}

/* Sub */
#Contents #Sub .banners {
	padding:0 0 10px;
}
#Sub .banners ul {
	text-align:center;
}
#Sub .banners ul img {
	vertical-align:bottom;
}
#Sub .banners ul li {
	margin-top:8px;
}
#Sub .banners.no-headline ul li {
	margin-bottom:15px;
}

/* --------------------------------
■■02-02.CartInfo(カート情報)
--------------------------------
バナーをまとめて掲載するブロック用のclassです。
-------------------------------- */
/* CartInfo */
#CartInfo {
	padding:5px;
	border:3px solid #ededed;
	color:#f00;
	text-align:center;
	font-size:14px;
	font-weight:bold;
}


/* --------------------------------
■03.ContentHeader(コンテンツヘッダー)
--------------------------------
メインカラム上部のページヘッダーにあたるブロックです。
-------------------------------- */
#ContentHeader {
	line-height:1.5;
	overflow:hidden;
	margin:0 0 10px;
	_zoom:1;
}
#ContentHeader .main {
	float:left;
	width:655px;
}
#ContentHeader #Login {
	float:right;
	width:315px;
}
h1 {
	color:#ff1a00;
	font-size:16px;
	font-weight:bold;
}
#ContentHeader p {
	color:#333;
}
#ContentHeader dl {
	height:36px;
	overflow:hidden;
	margin:5px 0 0;
	background:#ededed url("../img/bg_search-box.gif") no-repeat left top;
	_zoom:1;
}
#ContentHeader dt {
	float:left;
	padding:8px 6px 12px 10px;
	color:#00f;
}
#ContentHeader dd {
	padding-top:7px;
}
#ContentHeader dd input {
	vertical-align:center;
}
#ContentHeader dd .text {
	width:460px;
	margin:0 5px 0 0;
}


/* --------------------------------
■04.CatList(カテゴリナビ)
--------------------------------
メインカラムに設置するCat1/2や他Catへのナビをまとめたブロックです。
-------------------------------- */
#CatList {
	line-height:1.5;
	font-size:15px;
}

#CatList dl.category dt{
	margin:0 0 5px 20px;
	padding-left:5px;
	border-left: 3px solid #0063c8;
}
/* categories */
/* Cat1の各アイコンは、各Cat1毎に設定されたclassに応じて
　 背景画像を設定して出し分けています。 */
#CatList .categories {
	overflow:hidden;
	_zoom:1;
	margin-left:20px;
}
#CatList .categories dl {
	float:left;
	width:50%;
	*width:49.5%;
	margin-bottom:3px;
}
#CatList .categories dl.etc {
	float:none;
	clear:both;
	width:100%;
}
#CatList .categories dt {
	float:left;
	width:280px;
	font-weight:normal;
	border:1px solid #0070c0;
	border-radius: 5px;
}
#CatList .categories dt figure{
	margin:5px 10px 5px 10px;
	float:left;
}
#CatList .categories dt img{
	width:30px;
	height:30px;
}
#CatList .categories dt a {
	display:block;
	min-height:15px;
	background-repeat:no-repeat;
	background-position:left top;
	color:#000;
	margin-top:10px;
}
#CatList .categories dd {
	margin-left:155px;
	padding-right:10px;
	color:#0070c0;
}
#CatList .categories .odd dd {
	margin-left:130px;
}

/* CatList - other */
#CatList .sub {	/* 2011/2/1 */
	margin-left:20px;
}
#CatList .sub dl {	/* 2011/2/1 */
	overflow:hidden;
	margin:20px 0 3px;
	_zoom:1;
}
#CatList .sub dt {	/* 2011/2/1 */
	font-weight:normal;
}
#CatList .sub dd {	/* 2011/2/1 */
	color:#0070c0;
}
#CatList .sub .brand dd {	/* 2011/2/1 */
}
#CatList .sub .maker dt {
	margin-bottom:5px;
	padding-left:5px;
	border-left: 3px solid #0063c8;
}
#CatList .sub .maker span {
	font-weight:bold;
}
#CatList .sub .maker li {
	padding:7px;
	border:1px solid #0070c0;
	border-radius: 5px;
}
#CatList .sub .maker a {
	color:#000;
}
#CatList .sub dd span {
	float:left;
}
#CatList .sub li {
	float:left;
	margin-right:1em;
}


/* --------------------------------
■05.Pickup(商品紹介)
--------------------------------
メインカラムに設置する「オススメ商品」「イチオシ商品」ブロックです。
-------------------------------- */
#Pickup .items {
	overflow:hidden;
	padding:0 10px;
	_zoom:1;
}
#Pickup .item {
	float:left;
	position:relative;
	width:50%;
	min-height:160px;
	_height:160px;
	margin:10px 0;
}
#Pickup .item ul {
	position:absolute;
	left:0;
	top:0;
}
#Pickup .item li {
	float:left;
	margin-right:5px;
}
#Pickup .item p {
	margin-right:10px;
	margin-left:150px;
}
#Pickup .item .name img {
	display:block;
	position:absolute;
	left:0;
	top:25px;
	width:140px;
	height:140px;
}
#Pickup .item .lead {
	font-weight:bold;
}
#Pickup .item .price {
	color:#eb1c15;
}


/* --------------------------------
■06.Ranking(人気商品ランキング)
--------------------------------
メインカラムに設置する「人気商品ランキング」ブロックです。
-------------------------------- */
#Ranking ol {
	overflow:hidden;
	padding:10px 0;
	_zoom:1;
}
#Ranking ol li {
	float:left;
	width:20%;
	*width:19.5%;
}
#Ranking ol dl {
	margin:0 15px;
}
#Ranking ol dt {
	min-height:13px;
	margin-left:-5px;
	padding:7px 0 0 30px;
	background:url("../img/icon_ranking.gif") no-repeat left bottom;
	font-weight:normal;
}
#Ranking ol .no01 dt {
	color:#bc2102;
}
#Ranking ol .no02 dt {
	color:#f8a800;
}
#Ranking ol .no03 dt {
	color:#35b97c;
}
#Ranking ol .no04 dt {
	color:#125e99;
}
#Ranking ol .no05 dt {
	color:#b25cb1;
}
#Ranking ol .name {
	text-align:center;
}
#Ranking ol .name img {
	display:block;
	margin:0 auto 5px;
	_width:99.9%;
}
#Ranking ol .price {
	color:#f00;
}
#Ranking h3,
#Ranking ul {
	margin:0 80px;
	font-size:10px;
	font-weight:normal;
}
#Ranking h3 {
	margin-bottom:5px;
}
#Ranking ul {
	padding-bottom:10px;
	text-align:center;
	color:#0070c0;
}
#Ranking ul li {
	display:inline;
	margin:0 5px;
	white-space:nowrap;
	*zoom:1;
}


/* --------------------------------
■07.Login(ログイン)
--------------------------------
右カラムに設置する「ログイン」ブロックです。
-------------------------------- */
#Login a {
	display:block;
	position:relative;
	height:100%;
//	background:#eee url("../img/bg_login.gif") no-repeat center center;
	color:#0ff0;
	text-align:center;
	text-decoration:none;
//	font-size:10px;
	font-size:12px;
	_cursor:pointer;
}
#Login a:hover {
	text-decoration:underline;
}

#Login .text {
	display:block;
	position:absolute;
	left:30px;
	top:30%;
	width:272px;
}
#Login .to-login {
	display:block;
	margin-bottom:5px;
	font-size:16px;
	font-weight:bold;
	color:#00f;
}
#Login .corner span {
	display:block;
	position:absolute;
	width:315px;
	height:8px;
	left:0;
}
#Login .corner span.top {
	top:0;
	background:url("../img/bg_login_top.gif") no-repeat center top;
}
#Login .corner span.bottom {
	bottom:0;
	_bottom:-1px;
	background:url("../img/bg_login_bottom.gif") no-repeat center bottom;
}

/* --------------------------------
■08.Cart(ショッピングカート)
--------------------------------
右カラムに設置する「ショッピングカート」ブロックです。
-------------------------------- */
#Contents #Cart {
	padding:0 30px 10px;
	background:#dce6f2;
}
#Contents #Cart .title {
	height:24px;
	margin:0 -33px 10px;
	padding:0 0 6px 15px;
	background-image:url("../img/bg_sub_headline_bg-color.gif");
}
#Cart .title span {
	display:block;
	height:19px;
	padding:5px 5px 0 30px;
	background:url("../common/img/icon_cart.gif") no-repeat left center;
}
#Cart .nav {
	overflow:hidden;
	_zoom:1;
}
#Cart .nav p {
	float:left;
	color:#c00000;
	font-weight:bold;
}
#Cart .nav ul {
	float:right;
}
#Cart .nav li {
	float:left;
	margin-left:7px;
	_margin-left:3px;
}
#Cart .attention {
	margin-top:15px;
	font-size:10px;
}
#Cart .items {
	font-size:10px;
}
#Cart .item,
#Cart .items .none {
	position:relative;
	margin-top:15px;
	padding-top:15px;
	border-top:1px dashed #0070c0;
}
#Cart .items .none {
	color:#094;
	font-weight:bold;
	text-align:center;
	*zoom:1;
}
#Cart .item .name {
	min-height:47px;
	_height:47px;
	padding-left:63px;
}
#Cart .item .name img {
	display:block;
	position:absolute;
	left:0;
	top:15px;
	width:43px;
	border:2px solid #8e9399;
	background:#fff;
}
#Cart .item .volumn {
	margin:5px 0 10px 25px;
	text-align:center;
}
#Cart .item .volumn input {
	margin-left:5px;
}
#Cart .item .volumn input.text {
	width:25px;
	padding:2px 5px;
	margin-left:10px;
}
#Cart .item .delete {
	text-align:center;
}


/* --------------------------------
■09.Evaluate(各店舗の評価)
--------------------------------
右カラムに設置する「各店舗の評価」ブロックです。
-------------------------------- */
#Contents #Evaluate {
	padding:0 15px 15px;
}
#Contents #Evaluate h2 {
	margin-right:-18px;
	margin-left:-18px;
}
#Evaluate p {
	margin:10px 0;
	color:#fe0303;
}
#Evaluate ul {
	text-align:center;
}
#Evaluate ul li {
	margin-top:10px;
	_zoom:1;
}
#Evaluate ul img {
	display:block;
	margin:0 auto 5px;
}


/* --------------------------------
■10.PR(PRバナー)
--------------------------------
右カラムに設置するPRバナーブロックです。
-------------------------------- */
#PR ul {
	text-align:right!important;
}


#CommonList li {
	background: url("../img/c_aw.jpg") no-repeat scroll 0 6px transparent;
	padding:7px 0 0 15px;
}



/* items */
#CatItem .items .group {
	overflow:hidden;
	margin:0 8px;
	padding:25px 0 20px;
	border-bottom:2px solid #888;
	_zoom:1;
}
#CatItem .items .item {
	float:left;
	width:25%;
}
#CatItem .item p {
	margin:0 5px;
}
#CatItem .item p.name img {
	display:block;
	margin:0 auto;
	width:140px;
	height:140px;
}
#CatItem .item p.price span {
	color:#f00;
	font-weight:bold;
}
#CatItem .item p.status {
	color:#094;
}
#CatItem .item p.status span {
	color:#920;
}

#CatItem3 .items .group {
	overflow:hidden;
	margin:0 8px;
	padding:25px 0 20px;
	border-bottom:2px solid #888;
	_zoom:1;
}
#CatItem3 .items .item {
	float:left;
	width:33%;
}
#CatItem3 .item p {
	margin:0 5px;
}
#CatItem3 .item p.name img {
	display:block;
	margin:0 auto;
	width:140px;
	height:140px;
}
#CatItem3 .item p.price span {
	color:#f00;
	font-weight:bold;
}
#CatItem3 .item p.status {
	color:#094;
}
#CatItem3 .item p.status span {
	color:#920;
}

#CatItem5 .items .group {
	overflow:hidden;
	margin:0 8px;
	padding:25px 0 20px;
	border-bottom:2px solid #888;
	_zoom:1;
}
#CatItem5 .items .item {
	float:left;
	width:20%;
}
#CatItem5 .item p {
	margin:0 5px;
}
#CatItem5 .item p.name img {
	display:block;
	margin:0 auto;
	width:110px;
	height:110px;
}
#CatItem5 .item p.price span {
	color:#f00;
	font-weight:bold;
}
#CatItem5 .item p.status {
	color:#094;
}
#CatItem5 .item p.status span {
	color:#920;
}

.sp_banners {
	display:none;
}