/*ランキング*/
.cm-ctgry-ranking h3{}
.carousel-ranking{text-align:center;}
.cm-rank-box{ margin: 0; padding:20px 0 0 0; border:solid 2px #fff;}
.cm-rank-box h4{font-size:18px; font-weight:700; text-align:center; margin: 0 0 3px 0; padding: 2px; color:#3c3c3c; background-color: #FFF; border: solid 2px #ccc;}
.cm-rank-box p{text-align:left; font-size:14px; padding:0 10px;}

.cm-rank-box a{text-decoration: none; color: #3c3c3c;}


/*左右の矢印の色を変える*/
.carousel-ranking .slick-prev:before,
.carousel-ranking .slick-next:before { color: #3c3c3c;}
/*左右の矢印の位置を変える*/
.carousel-ranking .slick-next {top:5px; right: 5px; z-index: 99;}
.carousel-ranking .slick-prev {top:5px; left: 5px; z-index: 100;}
/*スライド数のドットの色を変える*/
.carousel-ranking .slick-dots li.slick-active button:before,
.carousel-ranking .slick-dots li button:before { color: #fff;}
/*スライド画像の横幅可変*/
.cm-rank-box img { object-fit: cover; width: 100%; height: 140px;}

/*トップページ*/
.cm-top-carousel{margin-bottom: 20px;}
/*左右の矢印の色を変える*/
.cm-top-carousel .slick-prev:before{color: #3CAA9D;}
.cm-top-carousel .slick-next:before{ color: #3CAA9D;}
/*左右の矢印の位置を変える*/
.cm-top-carousel .slick-next {top:565px; right: 5px; z-index: 99;}
.cm-top-carousel .slick-prev {top:565px; left: 5px; z-index: 100;}

/*====================================================================
.carousel-top
====================================================================*/
.carousel-top .slick-dots { bottom: -33px;}
.carousel-top .slick-dots li {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.carousel-top .slick-dots li button {
  font-size: 0;
  line-height: 0;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  text-indent: -9999px;
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 8px;
  outline: 0;
  border-radius: 5px;
  transition-duration: 0.3s;
}
.carousel-top .slick-dots li button:before { content: none;}
.carousel-top .slick-dots li button { background: #A4D8D4;}
.carousel-top .slick-dots li button:hover{ background: #3CAA9D;  border-radius: 0px; width: 12px; height: 12px;}
.carousel-top .slick-dots li.slick-active button {background: #F95746;  border-radius: 0px; width: 12px; height: 12px;}

/*====================================================================
.carousel-top-sp
====================================================================*/
.carousel-top-sp{text-align: center; max-width: 100%; margin:0; padding:0 0 5px 0;}
.carousel-top-sp img{max-width: 100%;}

.carousel-top-sp .slick-dots {background-color: #f4f3ed; bottom: -46px; padding:5px 0; margin:5px 0; }


/*====================================================================
.carousel-top-pickup
====================================================================*/
.carousel-top-pickup-a{text-align: center; max-width: 100%; background-color: #f9f8f4; margin:0; padding:0;}
.carousel-top-pickup-a div{margin:0 5px ; }
.carousel-top-pickup-a a{text-decoration: none; font-size:0.9em; color:#3c3c3c;}
.carousel-top-pickup-a .slick-dots {background-color: #f4f3ed; bottom: -33px; padding:10px 0; margin: 0; }
.carousel-top-pickup-a img{ width: 100%; margin: 0 auto; height: auto; }
.carousel-top-pickup-a .slick-next { right: 20px; z-index: 99;}
.carousel-top-pickup-a .slick-prev { left: 15px; z-index: 100;}

.carousel-top-pickup-b{text-align: center; max-width: 100%; background-color: #fff; margin:0; padding:0;}
.carousel-top-pickup-b div{margin:0 5px ; }
.carousel-top-pickup-b a{text-decoration: none; font-size:0.9em; color:#3c3c3c;}
.carousel-top-pickup-b .slick-dots {background-color: #f4f3ed; bottom: -33px; padding:10px 0; margin: 0; }
.carousel-top-pickup-b img{ width: 100%; margin: 0 auto; height: auto; }
.carousel-top-pickup-b .slick-next { right: 20px; z-index: 99;}
.carousel-top-pickup-b .slick-prev { left: 15px; z-index: 100;}


/*====================================================================
.carousel-sp-special
====================================================================*/
.carousel-sp-special{text-align: center; max-width: 100%; background-color: #fff; margin:20px 0; padding:20px 0 5px 0;}
.carousel-sp-special div{margin:0 5px ; }
.carousel-sp-special a{text-decoration: none; }
.carousel-sp-special p{ text-align: left; font-size:0.9em; color:#3c3c3c; line-height: 1.5; 
font-size:0.8em; padding:0 0.5em;}
.carousel-sp-special .slick-dots {background-color: #f4f3ed; bottom: -33px; padding:10px 0; margin: 0; }

.carousel-sp-special img{ width: 100%; margin: 0 auto; height: auto; }

/*左右の矢印の色*/
.carousel-sp-special .slick-prev:before,
.carousel-sp-special .slick-next:before { color: #3c3c3c;}
/*左右の矢印の位置*/
.carousel-sp-special .slick-next { right: 20px; top:175px; z-index: 100;}
.carousel-sp-special .slick-prev { left: 15px; top:175px; z-index: 100;}
/*スライド数のドットの色*/
.carousel-sp-special .slick-dots li.slick-active button:before,
.carousel-sp-special .slick-dots li button:before { color: #666;}

.carousel-sp-special .slick-arrow:before{ opacity:1!important; }

/*====================================================================
.carousel-contents1
====================================================================*/

/*コンテンツ*/
.carousel-contents1{text-align: center; max-width: 100%; background-color: #f4f3ed; margin:20px 0; padding:20px 0 5px 0;}
.carousel-contents1 div{margin:0 5px ; }
.carousel-contents1 a{text-decoration: none;}
.carousel-contents1 h4{background-color: #f4f3ed; font-size:16px; font-weight:bold; color:#3c3c3c; border:none; margin:10px 0 5px 0; }
.carousel-contents1 p{text-align: left; background-color: #f4f3ed; font-size:16px; color:#3c3c3c; padding: 0 10px 10px 10px; margin: 0;}
.carousel-contents1 .slick-dots {background-color: #f4f3ed; bottom: -33px; padding:10px 0; margin: 0; }

.carousel-contents1 img{ width: 80%; margin: 0 auto; height: auto; }



.carousel-contents1 .slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.carousel-contents1 .slick-active {
  opacity: 1;
}
.carousel-contents1 .slick-current {
  opacity: 1;
}