/*********************************************************************************************************

カテゴリーページ

*********************************************************************************************************/
.pro-slider {
	display: block;
	margin: 0 auto;
  max-width: 920px;
  }
  


.slider-3 .slick-slide {
  margin: 0 auto;
  padding: 0 5px;
  position: relative;
}
.slider-3 .slick-slide .slide-img {
  width: 300px;
  height: auto;
  margin: 10px 0;
  transition: all 0.6s ease 0.4s;
  box-shadow: 7px 7px 15px -10px #666;
  overflow: hidden;
}
.slider-3 .slick-slide.slick-current .slide-img {
    transform: scale(1.2);
    opacity: 1;
}
.slider-3 .slick-slide .slide-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider-3 .slick-arrow {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 0;
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}
.slider-3 .slick-arrow::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #09000d;
  border-width: 3px 3px 0 0;
  position: absolute;
  top: 24px;
  transform: rotate(45deg);
}
.slider-3 .slick-next {
  right: 0;
}
.slider-3 .slick-prev {
  left: 0;
}
.slider-3 .slick-next::before {
  left: 20px;
}
.slider-3 .slick-prev::before {
  border-width: 0 0 3px 3px;
  right: 22px;
}
.dots-3 .slick-dots {
  text-align: center;
}
.dots-3 .slick-dots li {
  display: inline-block;
}
.dots-3 .slick-dots button {
  display: block;
  width: 10px;
  height: 10px;
  margin: 6px;
  font-size: 0;
  padding: 0;
  border: 0;
  outline: none;
  cursor: pointer;
  background: #bcbcbc;
  border-radius: 50%;
}
.dots-3 .slick-dots .slick-active button {
  background: #0a467d;
}

.title-txt{
	margin: 0;
    font-weight: 400;
    font-size: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.title-box{
	text-align: center;
    padding: 60px 5% 0;
}

.slider-1 {
	display: block;
	margin: 0 auto;
  max-width: 300px;
  }
  
.slide-img1 {
  margin: 10px 5px;
  box-shadow: 7px 7px 15px -10px #666;
  text-align: center;
}

.slider-2{
    text-align: center;
    padding: 10px;
}

.slide-img2 {
  margin: 10px 5px;
  box-shadow: 7px 7px 15px -10px #666;
  text-align: center;
  max-width:300px;
}

.serum_prod_box { max-width: 980px; margin: 0 auto 40px; text-align: center; }
.serum_prod_box dl { display: inline-block; border: 1px solid #ccc; border-bottom: 4px solid #999; background: #fbfbfb; margin: 15px 0px; vertical-align: top; transition: .2s; }


.serum_prod_box dl:hover { position:relative; box-shadow:0 1px 8px rgba(0,0,0,0.15); }
.serum_prod_box dl:hover::before, .prod_guide_box dl:hover::after { content: ''; position: absolute; z-index: -1; box-shadow: 0 0 12px rgba(0,0,0,0.15); top: 10px; bottom: 10px; left: 0; right: 0; border-radius: 100px / 10px; }
.serum_prod_box dl:hover::after { right:10px; left:auto; transform:skew(8deg) rotate(3deg); }


.serum_prod_box dt { height: 45px; line-height: 45px; font-size: 15px; position: relative; background: #fff; background: linear-gradient(to bottom, #fff 0%, #f6f6f6 100%); }

.serum_prod_type dl { width: 100%;}



@media screen and (max-width:768px){
	
.pro-slider {
  padding: 0;
}
  
.title-box{
    padding: 60px 5px 0;
    
}

.serum_prod_box dt { font-size: 12px;}
}
.serum_prod_box dt::after { content: ''; border-bottom: 1px solid #eee; width: 90%; position: absolute; bottom: 0; left: 50%; margin-left:-45%;}

.serum_prod_box dt a { color: #333; }
.serum_prod_box dd a img { transition: 0.5s; }
.serum_prod_box dd a:hover img { opacity: 0.7; }

	
	
}