@charset "utf-8";

/* ------------------------------------------------------------ common */
.link-area{ background: #fff; }


/* ------------------------------------------------------------ store */
#store{ padding: 70px 0 200px; background: url(../images/bg_03.jpg) center/cover no-repeat; }
#store .main-ttl{ padding: 0 0 70px; }

.tab-list{ display: flex; align-items: center; justify-content: center; padding: 0 0 100px; text-align: center; }
.tab-list li{ cursor: pointer; display: flex; align-items: center; justify-content: center; width: 330px; height: 70px; font-size: 25px; letter-spacing: 0.1em; font-weight: 600; color: #C39631; border: 1px solid #C39631; }
.tab-list li.active{ background: #C39631; color: #fff; }

.w-box{ background: #fff; padding: 50px; }
.tab-panel{ display: none; }
.tab-panel.active{ display: block; }

.commodity{ display: flex; align-items: flex-start; justify-content: center; gap: 50px; }
.commodity li{ width: 400px; text-align: center; }
.commodity li h3{ padding: 20px 0 35px; font-size: 24px; font-weight: 600; }
.commodity li .btn{ width: 300px; height: 70px; margin: 0 auto; font-weight: 600; }

.btn-box{ width: 510px; margin: 0 auto; padding: 130px 0 0; }
.btn-box a{ height: 90px; }



/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
	/* ------------------------------------------------------------ common */
	

	/* ------------------------------------------------------------ store */
	#store{ padding: 50px 0; }
	#store .main-ttl{ padding: 0 0 30px; }
	
	.w-box{ padding: 30px 5%; }
	.tab-list{ padding: 0 0 30px; }
	.tab-list li{ height: 50px; font-size: 15px; }
	
	.commodity{ flex-direction: column; gap: 60px; }
	.commodity li{ width: 100%; }
	.commodity li img{ width: 40%; height: auto; }
	.commodity li h3{ padding: 15px 0 20px; font-size: 20px; }
	.commodity li .btn{ width: 65%; height: 50px; }
	
	.btn-box{ width: 100%; padding: 50px 0 0; }
	.btn-box a{ height: 60px; }
	
	
	
}