@charset "utf-8";

/****************** common start ******************/
html, body {
	scroll-behavior: smooth;
}
.productText {
	font-size: 12px;
	line-height: 20px;
}
.detailsLink{
	margin: 0 auto;
	font-size: 12px;
}
@media screen and (max-width: 768px){
	.detailsLink{
		width: 80%;
	}
}
#HBO_care h2, #bodyCare h2, #hairCare h2 {
	text-align: center;
	margin: 10vh 0 5vh 0;
}
#bodyCare::before, #hairCare::before {
	content: "";
	display: block;
	padding-top: 6rem;
	margin-top: -6rem;
}
@media screen and (max-width: 768px){
	#bodyCare::before, #hairCare::before {
		padding-top: 5rem;
		margin-top: -5rem;
	}
}
/****************** common end ******************/


/*all item start*/
#HBO_care {
	border-bottom: 5px solid #ccc;
	position: relative;
}
#HBO_care ul {
	position: absolute;
	left:10%;
	display: table;
	margin: 0 auto;
	width: 80%;
	text-align: center;
}
#HBO_care li {
	display: table-cell;
	min-width: 50px;
}
#HBO_care li:hover {
	border-top: 5px solid #dca89d;
}
#HBO_care li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px 0;
	text-decoration: none;
	color: #aaa;
}
#HBO_care li a:hover {
	color: #dca89d;
	background-color: #faf0ed;
}
#HBO_care .current {
	font-weight: bold;
	border-top: 5px solid #dca89d;
}	
#HBO_care .current a {
	color: #dca89d;
}
/*all item end */


/*body care start*/
#bodyCare ul {
	flex-wrap: wrap;
}
#bodyCare li {
	width: 19%;
	padding: 30px;
}
#bodyCare li img {
	width: 100%;
}
#bodyCare h3 {
	text-align: center;
}
/*body care start*/


/*hair care start*/
#hairCare ul {
	flex-wrap: wrap;
}
#hairCare li {
	width: 19%;
	padding: 30px;
}
#hairCare li img {
	width: 100%;
}
#hairCare h3 {
	text-align: center;
}
/*hair care end*/


/*SP*/
@media screen and (max-width: 768px){
	.contentInner h2 img{
		width: 70%;
	}
	/*body care, hair care start*/
	#bodyCare li, #hairCare li {
		width: 44%;
		padding: 10px;
	}
	#hairCare {
		margin-bottom: 60px;
	}
	/*body care, hair care end*/
}