@charset "utf-8";

/* ------------------------

	01. slider
	02. タイトル
	03. 商品一覧
	04. 売れ筋ランキング
	05. お知らせ
	
------------------------ */


/*==============================================================
	
	01. slider
	
==============================================================*/

.slider {
	background:url(../img/top_bg.jpg) no-repeat;
	background-size:cover;
	height:550px;
	padding:2em 0;
}
.swiper-container,.slider_bt {
	margin:0 auto;
	width:1000px;
}
.slider_bt {
	position:relative;
}
.swiper-button-prev,.swiper-button-next {
	border-radius:50px;
	top:40px;
	color:#fff;
	height:auto;
	position:absolute;
	width:130px;
}
.swiper-button-prev {
	background:#4ec24e url(../img/arrow01_l.png) no-repeat center left 10%;
	padding:0.5em 2.5em 0.5em 1em;
	text-align:right;
}
.swiper-button-next {
	background:#4ec24e url(../img/arrow01_r.png) no-repeat center right 10%;
	padding:0.5em 1em 0.5em 2.5em;
	text-align:left;
}

@media screen and (max-width: 767px) {

	.slider {
		height:auto;
	}
	.swiper-container,.slider_bt {
		margin:0 auto;
		max-width:1000px;
		width:60%;
	}
	.slider_bt span {
		display:none;
		}
	.swiper-button-prev,.swiper-button-next {
		border-radius:100px;
		top:-40px;
		color:#fff;
		height:50px;
		padding:0.5em 1em;
		position:absolute;
		width:50px;
	}
	.swiper-button-prev {
		background:#4ec24e url(../img/arrow01_l.png) no-repeat center;
		left:-60px;
		text-align:left;
	}
	.swiper-button-next {
		background:#4ec24e url(../img/arrow01_r.png) no-repeat center;
		right:-60px;
		text-align:left;
	}
	
}


/*==============================================================
	
	02. タイトル
	
==============================================================*/

.ttl_index {
	background:rgba(27,172,27,0.7);
	color:#fff;
	font-size:1.25em;
	font-weight:bold;
	padding:3em 2em 1em;
}

/* スライダーの背景をタイトル背景に透過する為に、ネガティブマージンを設定 */

.ttl_index {
	padding:1.5em 1.5em 1em;
}
.mt-150 {
	margin-top:-150px;
}
/**/


/*==============================================================
	
	03. 商品一覧
	
==============================================================*/

.archive_index .archive01 {
	background:#fff;
	padding:2em 2em 0;
}

/* 「全ての商品を見る」ボタン */
.bt_00 a {
	background:#4ec24e;
	color:#fff;
	display:block;
	font-size:0.875em;
	margin:0 auto;
	padding:2em 0;
	text-align:center;
	width:250px;
}
/**/


@media screen and (max-width: 767px) {
	.mt-150 {
		margin-top:0;
	}
	.bt_00 a {
		padding:1.5em 0;
		width:90%;
	}

}



/*==============================================================
	
	04. 売れ筋ランキング
	
==============================================================*/

.ranking {
	padding:4em 0;
	margin:0 2em;
	border-bottom:dotted 1px #ccc;
}

.ranking h3 {
	border-bottom:dotted 1px #ccc;
	color:#555;
	font-size:1.25em;
	font-weight:bold;
	margin-bottom:1em;
	padding:0 12% 1em;
}

.ranking section div {
	padding:0 12%;
}
.ranking a {
	color:#333;
}
.ranking figure {
	border:solid 5px #ccc;
	float:left;
	margin:2%;
	position:relative;
	width:29%;
}
.ranking figure figcaption {
	font-weight:bold;
	padding:1em;
	text-align:center;
}

.ranking figure  img {padding-top:2em;}

.rank1:before {
	content:url(../img/rank1.png);
	position:absolute;
	top:10px;
	left:10px;
}
.rank2:before {
	content:url(../img/rank2.png);
	position:absolute;
	top:10px;
	left:10px;
}
.rank3:before {
	content:url(../img/rank3.png);
	position:absolute;
	top:10px;
	left:10px;
}


@media screen and (max-width: 767px) {
	
	.ranking {
		padding:2em 0;
	}

	.ranking h3 {
		padding:0 1em 1em;
	}
	.ranking section div {
	padding:0;
	}
	.ranking figure figcaption {
		font-size:0.8em;
	}
	.rank1:before {
		content:url(../img/rank1_s.png);
	}
	.rank2:before {
		content:url(../img/rank2_s.png);
	}
	.rank3:before {
		content:url(../img/rank3_s.png);
	}

}



/*==============================================================
	
	05. お知らせ
	
==============================================================*/

.news {
	margin:0 auto 5em;
	padding:4em 2em 0;
	width:75%;
}
.news div {
	margin-bottom:2em;
}
.news div h3 {
	font-size:1.25em;
	float:left;
}
.news div p {
	float:right;
}
.news div p a {
	background:#6c6;
	color:#fff;
	display:block;
	padding:0.5em 1em;
}
.news_list {
	font-size:0.875em;
}
.news_list dt {
	clear:left;
	float:left;
}
.news_list dt:before {
	content:url(../img/arrow02.png)"　";
}
.news_list dd {
	float:left;
}
.new:before {
	content:"【new!!】";
	margin-left:-0.5em;
	color: #f00;
}

@media screen and (max-width: 767px) {

	.news {
		padding:2em 2em 0;
		margin-bottom:2em;
		width:100%;
	}
	.news_list dt {
		float:none;
		font-weight:bold;
	}
	.news_list dd {
		float:none;
		margin:0 0 1em 1.5em;
	}

}