@charset "utf-8";


#all h3 {
	font-size: 1.3rem;
	margin: 10px 0 10px 10px;
	padding: 0;
	text-align: left;
}

.pro-content {
	margin-top: 10px;
	margin-bottom: 10px;
}
.pro-content h4 {
	margin: 5px;
}
/*tabの形状*/
.tab {
	display: flex;
	flex-wrap: wrap;
}
.tab li a {
	display: block;
	margin: 5px;
	padding: 5px 15px;
	border-radius: 100vh;
	background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
	color: #59220d;
	border: 2px solid #A38A9E;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
}

.tab li a:hover {
	color: #A38A9E;
}

/*liにactiveクラスがついた時の形状*/
.tab li.active a {
	background-image: linear-gradient(-20deg, #F2B1E5 0%, #fbfcdb 100%);
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
	display: block;/*表示*/
	animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}

@keyframes displayAnime {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
#product h3 {
	border-bottom: 1px solid #A38A9E;
}
#all-t {
	width: 65px;
}

.pro-content {
	padding: 5px;
	border: 1px solid #D9B54A;
	border-radius: 5px;
}
.pro-content h4 {
	box-shadow:
		0 0 30px rgba(255,255,255,1) inset,
		0 0 40px rgba(245,235,190,0.8) inset,
		0 0 50px rgba(230,215,160,0.5) inset,
		0 0 80px rgba(200,190,140,0.3) inset,
		0 5px 5px rgba(0, 0, 0, .2);
	border-radius: 5px;
	width: 90%;
	margin: 10px auto;
	padding: 2px 5px;
	font-family: 'Hina Mincho', serif;
	font-size: 1.2em;
}