@charset "utf-8";
/*
 * top.css
 */

/* !Clearfix
---------------------------------------------------------- */
.entry_list01,
.pro_carousel01,
.sec_pick_up01 ul
{
	display: block;
	min-height: 1%;
}
.entry_list01:after,
.pro_carousel01:after,
.sec_pick_up01 ul:after
{
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .entry_list01,
* html .pro_carousel01,
* html .sec_pick_up01 ul
{
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* メインスライダー */
#mainimg {
	position: relative;
	z-index: 50;
	width: 100%;
	margin: 0 auto 20px;
}
	#mainimg .slick-list {
		overflow: hidden;
	}
		#mainimg .slick-slide {
			float: left;
			max-width: 1000px;
			margin: 0 0 0 0;
		}
		#mainimg .slick-slide a {
			display: block;
			text-align: center;
		}
			#mainimg .slick-slide img {
				opacity: 0.3;
			}
		#mainimg .slick-current img {
			opacity: 1;
		}

	#mainimg .slick-prev,
	#mainimg .slick-next {
		display: block;
		position: absolute;
		top: 50%;
		z-index: 100;
		width: 19px;
		height: 33px;
		cursor: pointer;
	}
	#mainimg .slick-prev {
		left: 10px;
	}
	#mainimg .slick-next {
		 right: 10px;
	}
	#mainimg .slick-prev:before {
		display: inline-block;
		content: "";
		width: 19px;
		height: 33px;
		background: url(../img/carousel_prev01.svg) no-repeat left center;
		background-size: 9px 16px;
	}
	#mainimg .slick-next:before {
		display: inline-block;
		content: "";
		width: 19px;
		height: 33px;
		background: url(../img/carousel_next01.svg) no-repeat right center;
		background-size: 9px 16px;
	}

	#mainimg .slick-dots {
		bottom: 10px;
	}
		#mainimg .slick-dots li {
			width: 15px;
			height: 15px;
			margin: 0 7px 0 7px;
		}
		#mainimg .slick-dots li.slick-active {
			width: 20px;
			height: 20px;
			margin: 0 3px -3px 3px;
			color: #ffd553;
		}
			#mainimg .slick-dots li button {
				width: 6px;
				height: 6px;
				border: 2px solid #ffffff;
				border-radius: 100px;
			}
			#mainimg .slick-dots li.slick-active button {
				width: 16px;
				height: 16px;
				background: #ffd553;
				border: none;
			}
@media screen and (min-width:768px) {
	#mainimg .slick-prev:before,
	#mainimg .slick-next:before {
		background-size: 19px 33px;
	}
}
@media screen and (min-width:1000px) {
	#mainimg {
		margin: 0 auto 30px;
	}
		#mainimg img {
			max-width: auto;
			max-height: 400px;
		}
		#mainimg .slick-dots {
			bottom: 22px;
		}
			#mainimg .slick-dots li.slick-active {
				margin: 0 7px 1px 7px;
			}
				#mainimg .slick-dots li button {
					width: 10px;
					height: 10px;
				}
				#mainimg .slick-dots li.slick-active button {
					width: 20px;
					height: 20px;
				}
}
@media screen and (min-width:1001px) {
	#mainimg img {
		max-height: none;
	}
}
@media screen and (min-width:1200px) {
	#mainimg {
		margin: 0 auto 60px;
	}
		#mainimg .slick-slide {
			margin: 0 5px 0 5px;
		}
		#mainimg .slick-prev {
			left: 50%;
			margin: 0 0 0 -550px;
		}
		#mainimg .slick-next {
			 right: 50%;
			 margin: 0 -550px 0 0;
		}
}

/* おすすめ */
.sec_pick_up01 {
	margin: 0 0 30px 0;
}
	.sec_pick_up01 ul li {
		float: left;
	}
		.sec_pick_up01 ul li img {
			width:100%;
		}
	.sec_pick_up01 .col_2 li {
		width: 100%;
		margin: 0 0 20px 0;
	}
	.sec_pick_up01 .col_2 li.first {
		margin: 0 0 20px 0;
	}
	.sec_pick_up01 .col_4 {
		padding: 0 0 20px 0;
		border-bottom: 1px solid #dedede;
	}
		.sec_pick_up01 .col_4 li {
			width: 48.5%;
			margin: 0 3% 20px 0;
		}
		.sec_pick_up01 .col_4 li:nth-child(even) {
			margin: 0 0 20px 0;
		}
		.sec_pick_up01 .col_4 li.last {
			margin: 0 0 20px 0;
		}
			.sec_pick_up01 ul li a {
				display: block;
				padding: 0 0 0 0;
				text-decoration: none;
			}
				.sec_pick_up01 ul li p {
					margin: 3px 0 0 0;
				}
@media screen and (min-width:640px) {
	.sec_pick_up01 {
		margin: 0 0 6.3% 0;
	}
		.sec_pick_up01 .col_2 li {
			width: 48%;
			margin: 0 0 25px 0;
		}
		.sec_pick_up01 .col_2 li.first {
			margin: 0 4% 0 0;
		}
		.sec_pick_up01 .col_4 {
			width: 104%;
			padding: 0 0 0 0;
			border: none;
		}
			.sec_pick_up01 .col_4 li,
			.sec_pick_up01 .col_4 li:nth-child(even) {
				width: 21%;
				margin: 0 4% 20px 0;
			}
			.sec_pick_up01 .col_4 li.last {
				margin: 0 0 20px 0;
			}
}

/* 新商品のお知らせ */
.sec_new_item01 {
	margin: 0 0 30px 0;
	padding: 0 0 30px 0;
	border-bottom: 1px solid #dedede;
}
	.sec_new_item01 .tit_basic01 h2 {
		margin: 0 0 20px 0;
	}
	.sec_new_item01 em {
		font-weight: bold;
	}

@media screen and (min-width:640px) {
	.sec_new_item01 {
		margin: 0 0 40px 0;
		padding: 0 0 0 0;
		border: none;
	}
}

/* お知らせ */
.sec_news01 {
	margin: 0 0 30px 0;
}
	.sec_news01 .tit_basic01 h2 {
		margin: 0 0 25px 0;
	}
	.sec_news01 ul {
		overflow-y: scroll;
		height: 220px;

	}
	.sec_news01 ul li {
		display: table;
		width: 100%;
		margin: 0 0 15px 0;
	}
		.sec_news01 ul li div {
			display: inline-block;
		}
		.sec_news01 .date,
		.sec_news01 .label {
			font-weight: bold;
		}
		.sec_news01 .label {
			padding: 0 10px 0 10px;
		}
			.sec_news01 .label span {
				display: inline-block;
				width: 100%;
				padding: 0 5px 0 5px;
				background: #464646;
				color: #ffffff;
				font-size: 0.8rem;
				font-weight: normal;
				text-align: center;
			}
		.sec_news01 .txt {
			display: block;
		}
@media screen and (min-width:680px) {
	.sec_news01 {
		margin: 0 0 7.5% 0;
	}
		.sec_news01 ul li div,
		.sec_news01 .txt {
			display: table-cell;
			vertical-align: top;
		}
		.sec_news01 .date {
			width: 15%;
			font-size: 1.2rem;
		}
		.sec_news01 .label {
			width: 13%;
			font-size: 1.2rem;
		}
		.sec_news01 .label a {
			display: block;
		}
			.sec_news01 .label span {
				padding: 0 0 0 0;
				font-size: 1.2rem;
			}
}
@media screen and (min-width:1200px) {
	.sec_news01 .date {
		font-size: 1.4rem;
	}
}

/* レシピ */
.sec_basic02 {
}
	.sec_basic02 .entry_list01 {
		margin: 0 0 0 0;
	}
		.entry_list01 section {
			float: left;
			width: 48.5%;
			margin: 0 3% 20px 0;
		}
		.entry_list01 section:nth-child(even) {
			margin: 0 0 20px 0;
		}
		.entry_list01 section a {
			display: block;
			text-decoration: none;
		}
			.entry_list01 section .img {
				overflow: hidden;
				margin: 0 0 5px 0;
				padding: 2.8% 2.8% 2.8% 2.8%;
				background: #ffffff;
				text-align: center;
			}
				.entry_list01 section .img img {
					width: 100%;
				}
			.sec_basic02 h3 {
				font-weight: bold;
			}
		.sec_basic02 .btn {
			margin: 0 0 0 0;
			text-align: right;
		}

		.recipe_pro01 .entry_list01 .name {
			font-size: 1.2rem;
			font-weight: bold;
		}
			.recipe_pro01 .entry_list01 .name span {
				margin: 0 0 0 0.1em;
				font-size: 70%;
				font-weight: normal;
			}
	.pro_carousel01 {
		position: relative;
		padding: 0 12px 0 12px;
		margin: 0 0 20px 0;
	}
		.pro_carousel01 .slick-list {
			overflow:hidden;
		}
			.pro_carousel01 .slick-slide {
				float: left;
				margin: 0 3px 0 3px;
				background: #ffffff;
			}
			.pro_carousel01 .slick-slide a {
				display: table;
				width: 100%;
				padding: 5px 5px 5px 5px;
				box-sizing: border-box;
				text-decoration: none;
			}
				.pro_carousel01 .slick-slide .thumb,
				.pro_carousel01 .slick-slide .txt {
					display: table-cell;
					vertical-align: top;
				}
				.pro_carousel01 .slick-slide .thumb {
					width: 45px;
				}
				.pro_carousel01 .slick-slide .txt {
					padding: 2% 2% 2% 2%;
					font-size: 0.9rem;
					line-height: 1.5;
				}
					.pro_carousel01 .slick-slide .txt .name {
						font-size: 1.0rem;
						font-weight: bold;
					}
						.pro_carousel01 .slick-slide .txt .name span {
							margin: 0 0 0 0.1em;
							font-size:70%;
							font-weight: normal;
						}
					.pro_carousel01 .slick-slide .txt dd {
						color: #8f8f8f;
					}

		.pro_carousel01 .slick-prev,
		.pro_carousel01 .slick-next {
			display: block;
			position: absolute;
			top: 50%;
			width: 12px;
			height: 22px;
			cursor: pointer;
		}
		.pro_carousel01 .slick-prev {
			left: 0;
		}
		.pro_carousel01 .slick-next {
			 right: 0;
		}
		.pro_carousel01 .slick-prev:before,
		.pro_carousel01 .slick-next:before {
			display: block;
			position: absolute;
			top: 0;
			content: "";
			width: 12px;
			height: 22px;
		}
		.pro_carousel01 .slick-prev:before {
			background: url(../img/carousel_prev03.svg) no-repeat left center;
			background-size: 6px 11px;
		}
		.pro_carousel01 .slick-next:before {
			background: url(../img/carousel_next03.svg) no-repeat right center;
			background-size: 6px 11px;
		}
@media screen and (min-width:640px) {
	.sec_basic02 .entry_list01 {
		margin: 0 0 20px 0;
	}
		.entry_list01 section,
		.entry_list01 section:nth-child(even) {
			width: 23.8%;
			margin: 0 1.6% 0 0;
		}
		.entry_list01 section:last-child {
			margin: 0 0 0 0;
		}
			.recipe_pro01 .entry_list01 .name {
				font-size: 1.6rem;
			}

		.sec_basic02 .btn {
			margin: 20px 0 0 0;
		}
}
@media screen and (min-width:768px) {
	.pro_carousel01 {
		position: relative;
		padding: 0 0 0 0;
	}
		.pro_carousel01 .slick-slide .thumb {
			width: 70px;
		}
			.pro_carousel01 .slick-slide .thumb img {
				width:100%
			}
		.pro_carousel01 .slick-slide .txt {
			font-size: 1.2rem;
		}
			.pro_carousel01 .slick-slide .txt .name {
				font-size: 1.4rem;
			}
		.pro_carousel01 .slick-prev,
		.pro_carousel01 .slick-next {
			top: 50%;
		}
		.pro_carousel01 .slick-prev {
			left: -25px;
		}
		.pro_carousel01 .slick-next {
			 right: -25px;
		}
		.pro_carousel01 .slick-prev:before,
		.pro_carousel01 .slick-next:before {
			background-size: 12px 22px;
		}
}

/* ランキングアイテム */
.ranking_item .btn {
    display: block;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;

}
.ranking_item .btn button{
    cursor: pointer;
    position: relative;
    padding: 5px 30px 5px 20px;
}
.ranking_item .product_list01 > li:nth-child(n+5) {
    display: none;
}
.ranking_item .js_close_button {
    display: none;
}
.ranking_item .btn button::after {
    display: inline-block;
    position: absolute;
    top: 3px;
    right: 0.6rem;
    content: "";
    width: 0.5em;
    height: 0.5em;
    margin: 0.45em 0.4em 0 0;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
}

.ranking_item .js_more_button button::after {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.ranking_item .js_close_button button::after {
    top: 6px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media screen and (min-width:768px) {
    .ranking_item .btn {
        display: none !important;
    }
    .ranking_item .product_list01 > li:nth-child(n+5) {
        display: block !important;
    }

}

.ranking_item .btn button{
    cursor: pointer;
}