@charset "UTF-8";

/* index.cssについて
	このCSSは、トップページの内容部分（#contents）を定義しています。
*/

/* 内容部分全域の横幅と位置を指定 */
#contents
{
	float : right ;
	width:650px;
}

/* 「新着情報」のタイトル画像を表示 */
#contents #news_title {
	background-position:left;
        background-repeat:no-repeat;
	background-image:url(/top/news/c_new_arrivals_b.jpg);
        height : 30px;
	margin:10px 0px;
}

/* 「人気商品ランキング」のタイトル画像を表示 */
#contents #ranking_title {
	background-position:left;
        background-repeat:no-repeat;
	background-image:url(/top/ranking/c_rank_b.jpg);
        height : 30px;
	margin:3px 0px;    /*←もとは10px。ランキング更新日を挿入したため減らしました。*/
}

/* 「うまいもん情報」のタイトル画像を表示 */
#contents #um_title {
	background-position:left;
        background-repeat:no-repeat;
	background-image:url(/top/um/c_um_b.jpg);
        height : 30px;
	margin:10px 0px;
}

/* 「人気商品ランキング」のテーブル内、サムネイルの横幅と位置 */
#contents table td.ranking_img{
	text-align:left;
	width:120px;
}

/* 「人気商品ランキング」のテーブル内、商品名などをセンタリング */
#contents table td{
	text-align:center;
}

/* 「うまいもん情報」の内容部分（幅が広い領域） */
#contents #um_contents {
	float : left ;
	width:400px;
}

/* 「うまいもん情報」の内容部分（幅が広い領域）の商品テキストで、マークの高さ指定 */
#contents #um_contents p img{
	vertical-align:-2px;
	margin:2px 0px;
}

/* 「うまいもん情報」のサイドバー（幅が狭い領域）*/
#contents #um_sidebar {
	float : right ;
	width:180px;
}

/* 段落の体裁指定 */
#contents p
{
	text-align:left;
	font-size:80%;
	line-height:170%;
}

/* tdの文字サイズ、横幅を指定 */

#contents td {
	font-size:80%;
	width:295px;
}

.renew { text-align: right;}

/* その他、追加分 */

#tab_m {
	margin-top: 10px;}



/* --------------------------------------
 商品一覧カタログ表示
-------------------------------------- */
#recommend{
	margin-bottom:10px;
}



#catalog-wrap {
	background:url(/shared/images/bg-commodity-catalog-test.gif) repeat-y;
	_background:url(/shared/images/bg-commodity-catalog-ie6.gif) repeat-y;
	background-position:0 top;
	padding-bottom:0px;
	*padding-bottom:30px;
	font-size:14px;
	text-align:center;
}


#catalog-wrap .syouhin-line {
	width:640px;
	height:100%;
	position:relative;
	margin-bottom:30px;
	_margin-bottom:50px;
	margin-top:30px;
	border-top:dotted 1px #CCCCCC;
	padding-top:15px;
	padding-bottom:15px;
	display: inline-block;   
	zoom: 100%; 

}


#catalog-wrap .syouhin-line:after {   
    content: ".";   
    display: block;   
    visibility: hidden;   
    height: 0.1px;   
    font-size: 0.1em;   
    line-height: 0;   
    clear: both;   
}  


#catalog-wrap .first {
	border-top:none;
	margin-top:0px!important;
}


#catalog-wrap .syouhin {
	width:190px;
	margin:0;
	padding:0 8px;
	height:auto;
	float:left;
}

#catalog-wrap .syouhin .thumbnail {
border:solid 2px #CCCCCC;
width:86px;
max-width:86px;
mix-width:86px;
height:86px;
max-height:86px;
mix-height:86px;
padding:5px;
margin:0 auto 5px;
text-align:center;
}

#catalog-wrap .syouhin .syouhin-name {
font-weight:bold;
font-size:100%;
margin-bottom:8px;
}

#catalog-wrap .thumbnail img {
/*margin:auto;
text-align:center;
vertical-align:middle;*/
}

#catalog-wrap .thumbnail table{
/*text-align:center;
margin:auto;
width:86px;
max-width:86px;
mix-width:86px;
height:86px;
max-height:86px;
mix-height:86px;*/
}

#catalog-wrap .thumbnail td{
text-align:center;
vertical-align:middle;
}

#catalog-wrap .hidari .btn {
	position:absolute;
	bottom:-35px;
	left:12px;
}

#catalog-wrap .chuou .btn {
	position:absolute;
	bottom:-35px;
	left:240px;
}

#catalog-wrap .chuou {
	margin:0 9px;
}

#catalog-wrap .migi .btn {
	position:absolute;
	bottom:-35px;
	right:12px;
}

#catalog-wrap .btn img {
	margin:auto 2px;
}

#catalog-wrap .btn {
	width:168px;
}

#catalog-wrap .nedan img{
	vertical-align:middle;
	margin-right:3px;
}

#catalog-wrap .nedan{
	margin:3px 0;
	text-align:left;
}

/* --------------------------------------
 キャンペーン一覧表示
-------------------------------------- */
/*バナー*/
#main_3column .top_banner01{ 
	width:650px;
	/*margin-bottom:10px;*/
}

#main_3column .top_banner01 img{
	width:650px;
	}

#main_3column .top_banner01 .banner{ 
}

#main_3column .top_banner01 .caption{ 
	font-size: 12px;
	line-height: 120%;
	margin-bottom:10px;
	/*padding:0 5px 10px 20px;
	text-align: left;*/
	
}

#main_3column .top_banner01 .campaignbanner{ 
}



#main_3column .top_banner02{ 
	width:650px;
	/*padding-left:5px;
	padding-right:5px;*/
}

#main_3column .top_banner02 img{
	width:317px;
	}

#main_3column .top_banner02 .left{ 
	width:317px;
	float: left;
	padding-right:16px;
}

#main_3column .top_banner02 .right{ 
	width:317px;
	float: left;
}

#main_3column .top_banner02 .banner{ 
}

#main_3column .top_banner02 .caption{
	font-size: 12px;
	line-height: 120%;
	margin-bottom:10px;
	/*padding:0 5px 10px 0px;
	text-align: left;*/
}

#main_3column .top_banner03{ 
	width:650px;
	padding-right:5px;
}

#main_3column .top_banner03 img{
	width:206px;
	}

#main_3column .top_banner03 .left{ 
	width:206px;
	float: left;
	padding-right:16px;
}

#main_3column .top_banner03 .center{ 
	width:206px;
	float: left;
	padding-right:16px;
}

#main_3column .top_banner03 .right{ 
	width:206px;
	float: left;
}

#main_3column .top_banner03 .banner img{ 
}

#main_3column .top_banner03 .caption{ 
	font-size: 12px;
	line-height: 120%;
	padding:0 5px 10px 0px;
	text-align: left;
}


#main_3column .top_banner01,#main_3column .top_banner02,#main_3column .top_banner03{
	zoom:100%;
	}
	
#main_3column .top_banner01:after , #main_3column .top_banner02:after , #main_3column .top_banner03:after{
	content:" ";
	display:block;
	height:1px;
	visibility:hidden;
	clear:both;
	}

.campaign_all{ 
	width:650px;
	text-align: right;
}

.top_banner03:after, .top_banner02:after, .top_banner01:after { 
content: "."; 
display: block; 
visibility: hidden; 
height: 0.1px; 
font-size: 0.1em; 
line-height: 0; 
clear: both; 
} 

.top_banner03, .top_banner02, .top_banner01 { 
zoom: 100%; 
} 



/*お知らせ*/
#info{
	clear:both;
	margin: 5px 0;
	padding:5px 0;
	/*width:580px;*/
	text-align:left;
}

#info img{
	vertical-align:middle;
}


#info .infolist{
}

#info .infolist table{
	width:650px;
	/*text-align:center;*/
}

#info .infolist th{
	width:120px;
	font-size:0.7em;
	letter-spacing:0.4pt;
	padding:5px;
	text-align:left;
}

#info .infolist th img{
	display:inline!important;
	margin-right:5px;
	}

#info .infolist td{
	vertical-align:middle;
	text-align: left;
	padding:5px;
}


#info .infolist td , #info .infolist th{
	border-bottom:1px dotted #DBDBDB;
}


#info .infolist tr.bg_gray td ,#info .infolist tr.bg_gray th{
	background:#F7F7F7;
}