@charset "Shift_JIS";
/*___________ 基本設定 ==の部分に値を入れます。___________ */
body {
margin:0;
padding:0;
font-family:'ＭＳ Ｐゴシック','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', sans-serif;
font-size:12px;
line-height:1.3;
text-align:center;
color:#333;
	}

.size {
width:==px;
margin:0 auto;
	}

div,td,th {
text-align:left;
	}

img {
border:0;
	}

p,pre {
font-family:'ＭＳ Ｐゴシック','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', sans-serif;
font-size:12px;
line-height:1.3;
	}

h1 {
font-size:12px;
line-height:14px;
font-weight:normal;
text-align:right;
float:right;
}

h2 {
font-size:14px;
line-height:18px;
font-weight:bold;
}

h3 {
font-size:12px;
line-height:16px;
font-weight:bold;
margin:0;
	}

h4,h5,h6 {
font-size:8px;
line-height:10px;
font-weight:normal;
margin:0px;
	}

a {
	color:#666;
	text-decoration:none;
	outline:none;
	}
	
a:hover{
	color:#F30;
	text-decoration:none;
	}
	
a:focus{
	outline:none;
	}

select {
display:block;
	}

form {
margin:0;
	}
	
hr {
margin:20px 0px;
border-bottom:#999 dotted 1px;
}

.indent {
text-indent:-9999px;
font-size:9px;
line-height:10px;
	}

.float_left{
	float:left;
	}

.text_right{text-align:right;
	}

.imgline_one{
	width:100%;
	border-bottom:1px solid #666;
	}
	
.imgline_two{
	width:100%;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
	}

#wapper{
	width:855px;
	margin:0 auto;
	}
	
#header{
	width:855px;
	height:125px;
	margin-bottom:15px;
	margin-top:20px;
	}

#navi{
	width:855px;
	height:20px;
	clear:both;
	border-bottom:1px solid #666;

	}
	
#login{
	width:855px;
	height:30px;
	}

.login{
	text-align:right;
	margin-top:10px;
}
	
#contents{
	width:855px;
	height:auto;
	}
	
#contents_left{
	width:180px;
	float:left;
	padding-right:25px;
	}
	
.contents_left_banner_top{
border-top:#999 dotted 1px;
border-bottom:#999 dotted 1px;
margin-top:30px;
}

.contents_left_banner{
border-bottom:#999 dotted 1px;
}

.contents_left_bottom{
border-bottom:1px solid #666;
margin-top:30px;
}

#contents_right{
	width:650px;
	float:left;
	}
	
#topics{
	width:650px;
	margin-top:25px;
	font-size:10px;
	}
	
.topics_arrival{
width:650px;
background-image:url(../images/layout/topics_arrival.png);
background-repeat:no-repeat;
line-height:2.2;
border-bottom:#999 dotted 1px;
}

.topics_campaign{
width:650px;
background-image:url(../images/layout/topics_campaign.png);
background-repeat:no-repeat;
line-height:2.2;
border-bottom:#999 dotted 1px;
}

.topics_recipe{
width:650px;
background-image:url(../images/layout/topics_recipe.png);
background-repeat:no-repeat;
line-height:2.2;
border-bottom:#999 dotted 1px;
}

.topics_sale{
width:650px;
background-image:url(../images/layout/topics_sale.png);
background-repeat:no-repeat;
line-height:2.2;
border-bottom:#999 dotted 1px;
}

.topics_event{
width:650px;
background-image:url(../images/layout/topics_event.png);
background-repeat:no-repeat;
line-height:2.2;
border-bottom:#999 dotted 1px;
}

.topics_blog{
width:650px;
background-image:url(../images/layout/topics_blog.png);
background-repeat:no-repeat;
line-height:2.2;
border-bottom:#999 dotted 1px;
}

.topics_media{
width:650px;
background-image:url(../images/layout/topics_media.png);
background-repeat:no-repeat;
line-height:2.2;
border-bottom:#999 dotted 1px;
}

.topics_travel{
width:650px;
background-image:url(../images/layout/topics_travel.png);
background-repeat:no-repeat;
line-height:2.2;
border-bottom:#999 dotted 1px;
}

.topics_info{
width:650px;
background-image:url(../images/layout/topics_info.png);
background-repeat:no-repeat;
line-height:2.2;
border-bottom:#999 dotted 1px;
}

.topicstext{
line-height:2.2;
padding-left:110px;
font-size:12px;
}

#top_banner{
	width:650px;
	height:210px;
	padding-top:10px;
	}
	
#top_banner02{
	width:320px;
	height:210px;
	float:right;
	}
#top_banner03{
	width:650px;
	height:110px;
	clear:both;
	}
	
#menu{
	width:650px;
	height:450px;
	margin-top:0px;
	}

.menu_box{
	width:650px;
	height:200px;
	padding:25px 0px 0px 0px;
}

.menu01{
float:left;
padding:0px 25px 0px 0px;
	}
	
#ranking{
	width:650px;
	margin-top:40px;
	}
	
.rankingbox{
float:left;
width:120px;
hight:200px;
padding-right:10px;
}

#footer{
	width:855px;
	height:auto;
	clear:both;
	padding-top:60px;
	}
	
#footer p{
	padding-top:10px;
	margin:0;
}
	
#footer_01{
	width:265px;
	height:330px;
	float:left;
	padding-right:30px;
	}
	
.calender{
	margin-left:49px;
	
}
	
#footer_02{
	width:265px;
	float:left;
	padding-right:30px;
	}
	
#footer_03{
	width:265px;
	float:left;
	}

#footer_04{
	width:855px;
	height:25px;
	background-color:#3CC;
	clear:both;
	}
	
#footer_05{
	width:855px;
	height:25px;
	border-top:1px solid #666;
	text-align:center;
	padding-top:10px;
	margin-top:5px;
	}
	
hr {
margin:20px 0px;
border-bottom:#999 dotted 1px;
}
	
	
/* ____ 商品詳細ページ ____ */
.storia{
float:right;
width:310px;
padding:10px 20px 10px 20px;
margin:10px 0px;
border:1px dotted #999999;
}

/* ____ カート中略部分 ____ */
.cart_box01{
width:310px;
padding:10px 20px 10px 20px;
margin:10px 0px;
border:1px dotted #999999;
}

	
/* ____ フロートボックス解除用。htmlでは<br class="clear">で使用 ____ */
.clear {
clear:both;
}
/* ____________ 横並び時のフロートボックスは以下が基本 __________ */
.== {
width:==px;
float:left;
}
/* ____ 横並び時のフロートボックスでマージンを使う場合は以下が基本 ____ */
.== {
width:==px;
margin:==;
float:left;
display:inline;
}
/* ____ パディングやボーダー左右を使う場合はwidthと一緒に使わない。  _____ */
.== {
padding:==;
}
.== {
border:==px solid #==;
}
.== {
padding:==;
border:==px solid #==;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* ~~~~~~~~~~~ スワップイメージ（ロールオーバー）のひな形 ~~~~~~~~~~~*/
/* ~~~~~~~~~~~ ==の箇所を書き換えて使用します             ~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/* ______ フロートありバージョン ______ */

.== ,.== a ,.== a:hover,.== a:focus{
width:==px;height:==px;text-indent:-2000px;
background:url(images/==.gif) no-repeat;
text-decoration: none;float:left;
}
.== {
margin:==;display:inline;
}
.==,.== a:hover,.== a:focus {
background:url(images/==_over.gif) no-repeat;
}

/* ______ フロート無しバージョン ______ */

.== ,.== a ,.== a:hover,.== a:focus{
width:==px;height:==px;text-indent:-2000px;
background:url(image/==.gif) no-repeat;
text-decoration: none;display:block;
}
.== {
margin:==;
}
.==,.== a:hover,.== a:focus {
background:url(image/==_over.gif) no-repeat;
}