@charset "utf-8";

/* page */

.snkk_chocolate h2{
	font-size:1.25rem;
	font-weight:700;
	border-top:1px solid #7f7f7f;
	border-bottom:1px solid #7f7f7f;
	padding:0.5em 0;
	margin-bottom:40px;
}

.snkk_chocolate .fv{
	margin-bottom:40px;
}

.snkk_chocolate .lead{
	margin-bottom:40px;
	color:#593827;
	font-weight:700;
}

.snkk_chocolate .recommend{
	margin-bottom:60px;
	background:#729126;
	padding:0 0 40px;
	border-radius:16px;
}

.snkk_chocolate .recommend .title{
	background:#593827;
	padding:28px 0 84px;
	justify-content: center;
	align-items: center;
	border-radius:16px 16px 0 0;
}

.snkk_chocolate .recommend .title .icon{
	width:40px;
	margin:0 8px;
}

.snkk_chocolate .recommend .title h4{
	margin:0 8px;
	font-size:1.25rem;
	font-weight:700;
	color:#fff;
}

.snkk_chocolate .recommend .content_wrap{
	margin-top:-56px;
	padding:0 60px;
	justify-content: space-between;
}

.snkk_chocolate .recommend .content_wrap a{
	width:30%;
	color:#fff;
	transition:.5s;
}

.snkk_chocolate .recommend .content_wrap a:hover{
	opacity:0.8;
}

.snkk_chocolate .recommend .content_wrap a .img{
	margin-bottom:1rem;
	background:#fff;
	padding:1rem;
	border-radius:12px;
}

.snkk_chocolate .recommend .content_wrap a .txt{
	padding:0 1rem;
}

.snkk_chocolate .recommend .content_wrap a .txt p{
	font-size:0.8rem;
}

.snkk_chocolate .recommend .content_wrap a .txt h5{
	font-weight:700;
}

.snkk_chocolate .box{
	padding:24px 40px;
	border-radius:16px;
	border:2px dotted #d7434e;
	margin-bottom:40px;
}

.snkk_chocolate .box:last-child{
	margin-bottom:0;
}

.snkk_chocolate .box .title{
	justify-content: space-between;
	align-items: center;
	margin-bottom:24px;
}

.snkk_chocolate .box .title .img{
	width:30%;
}

.snkk_chocolate .box .title .detail{
	width:70%;
	padding:0;
}

.snkk_chocolate .box .title .detail .brand{
	justify-content: space-between;
	align-items: center;
	margin-bottom:1rem;
}

.snkk_chocolate .box .title .detail .brand .icon{
	width:64px;
}

.snkk_chocolate .box .title .detail .brand h3{
	width:calc(100% - 64px - 12px);
	font-weight:700;
	color:#593827;
	font-size:1.25rem;
}

.snkk_chocolate .box .title .detail .brand h3 span{
	font-size:0.9rem;
}

.snkk_chocolate .box .title .detail ul{
	justify-content: space-between;
	margin-bottom:1rem;
}

.snkk_chocolate .box .title .detail ul li{
	width:24%;
	text-align:center;
	padding:0.5em 0;
	font-size:0.8rem;
	color:#fff;
	background:#ccc;
	border-radius:2em;
}

.snkk_chocolate .box .title .detail ul li.active{
	background:#d7434e;
}

.snkk_chocolate .box .title .detail ul li i{
	margin-right:0.25em;
}

.snkk_chocolate .box .title .detail p{
	font-size:0.8rem;
}

.snkk_chocolate .box .products_archive a{
	width:20%;
	padding:0 0.5rem;
	margin-bottom:2rem;
	transition:.5s;
}

.snkk_chocolate .box .products_archive a:hover{
	opacity:0.8;
}

.snkk_chocolate .box .products_archive a .img{
	margin-bottom:0.5rem;
}

.snkk_chocolate .box .products_archive a p{
	font-weight:700;
	font-size:0.8rem;
	color:#593827;
}

.snkk_chocolate .box .products_archive a p.price{
	font-weight:400;
	color:#729126;
}

@media (max-width: 1400px) {

/* page */
	
	.snkk_chocolate h2{
		margin-bottom:calc(100vw / 1366 * 40);
	}
	
	.snkk_chocolate .fv{
		margin-bottom:calc(100vw / 1366 * 40);
	}
	
	.snkk_chocolate .lead{
		margin-bottom:calc(100vw / 1366 * 40);
	}
	
	.snkk_chocolate .recommend{
		margin-bottom:calc(100vw / 1366 * 60);
		padding:0 0 calc(100vw / 1366 *  40);
	}
	
	.snkk_chocolate .recommend .title{
		padding:calc(100vw / 1366 * 28) 0 calc(100vw / 1366 *  84);
	}
	
	.snkk_chocolate .recommend .title .icon{
		width:calc(100vw / 1366 * 40);
		margin:0 calc(100vw / 1366 *  8);
	}
	
	.snkk_chocolate .recommend .title h4{
		margin:0 calc(100vw / 1366 *  8);
	}
	
	.snkk_chocolate .recommend .content_wrap{
		margin-top:calc(100vw / 1366 * -56);
		padding:0 calc(100vw / 1366 *  60);
	}
	
	.snkk_chocolate .recommend .content_wrap a .txt{
		padding:0;
	}
	
	.snkk_chocolate .box{
		padding:calc(100vw / 1366 * 24) calc(100vw / 1366 *  40);
		margin-bottom:calc(100vw / 1366 * 40);
	}
	
	.snkk_chocolate .box .title{
		margin-bottom:calc(100vw / 1366 * 24);
	}
	
	.snkk_chocolate .box .title .detail .brand .icon{
		width:calc(100vw / 1366 * 64);
	}
	
	.snkk_chocolate .box .title .detail .brand h3{
		width:calc(100% - (100vw / 1366 *  64) - (100vw / 1366 *  12));
	}

}

@media (max-width: 768px) {

	 /* page */

	.snkk_chocolate h2{
		margin-bottom:calc(100vw / 768 * 40);
	}
	
	.snkk_chocolate .fv{
		margin-bottom:calc(100vw / 768 * 40);
	}
	
	.snkk_chocolate .lead{
		margin-bottom:calc(100vw / 768 * 40);
	}
	
	.snkk_chocolate .recommend{
		margin-bottom:calc(100vw / 768 * 80);
		padding:0 0 calc(100vw / 768 *  80);
	}
	
	.snkk_chocolate .recommend .title{
		flex-direction: column;
		padding:calc(100vw / 768 * 48) 0 calc(100vw / 768 *  96);
	}
	
	.snkk_chocolate .recommend .title .icon{
		width:calc(100vw / 768 * 80);
		margin:0 auto 0.5rem;
	}
	
	.snkk_chocolate .recommend .title h4{
		width:100%;
		text-align:center;
		font-size:1rem;
		margin:0;
		line-height:1.6
	}
	
	.snkk_chocolate .recommend .content_wrap{
		margin-top:calc(100vw / 768 * -56);
		padding:0;
	}
	
	.snkk_chocolate .recommend .content_wrap a{
		width:60%;
		margin:0 auto 2rem;
	}
	
	.snkk_chocolate .recommend .content_wrap a:last-child{
		margin:0 auto;
	}
	
	.snkk_chocolate .recommend .content_wrap a .img{
		margin-bottom:0.5rem;
	}
	
	.snkk_chocolate .box{
		padding:calc(100vw / 768 * 48) calc(100vw / 768 *  48) calc(100vw / 768 *  28);
		margin-bottom:calc(100vw / 768 * 80);
	}
	
	.snkk_chocolate .box .title{
		margin-bottom:calc(100vw / 768 * 40);
	}
	
	.snkk_chocolate .box .title .img{
		width:60%;
		margin:0 auto calc(100vw / 768 * 28);
	}
	
	.snkk_chocolate .box .title .detail{
		width:100%;
		margin-bottom:calc(100vw / 768 * 28);
	}
	
	.snkk_chocolate .box .title .detail .brand .icon{
		width:calc(100vw / 768 * 84);
	}
	
	.snkk_chocolate .box .title .detail .brand h3{
		width:calc(100% - (100vw / 768 *  84) - (100vw / 768 *  12));
	}
	
	.snkk_chocolate .box .title .detail .brand h3 span{
		display:inline-block;
	}
	
	.snkk_chocolate .box .title .detail ul li{
		width:48%;
		padding:0.75em 0;
		margin-bottom:0.75rem;
	}
	
	.snkk_chocolate .box .title .thumb{
		width:50%;
		margin-bottom:calc(100vw / 768 * 28);
	}
	
	.snkk_chocolate .box .title .txt{
		width:100%;
	}
	
	.snkk_chocolate .box .products_archive a{
		width:100%;
		padding:0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		margin-bottom:calc(100vw / 768 * 28);
	}
	
	.snkk_chocolate .box .products_archive a:last-child{
		margin-bottom:0;
	}
	
	.snkk_chocolate .box .products_archive a .img{
		width:28%;
		border-radius:8px;
		padding:0.5rem;
	}
	
	.snkk_chocolate .box .products_archive a .txt{
		width:68%;
	}
	
	.snkk_chocolate .box .products_archive a p{
		line-height:1.6;
	}

}