@charset "UTF-8";

/* トップページ用css */

/* -----------------------------------------------

	 top共通

----------------------------------------------- */
.sec_title {
  margin-bottom: 35px;
}
.sec_title h2 {
  font-size: 24px;
  font-weight: 600;
  color: #3D2D24;
  letter-spacing: 1px;
}
.sec_title .sub {
  font-size: 14px;
  color: #3D2D24;
}
.sec_title.oneline h2 {
  margin: 0;
  padding-right: 25px;
  margin-right: 20px;
  border-right: 1px solid #A6A09B;
  line-height: 1;
}
h3 {
  font-size: 16px;
  font-weight: 500;
}
.fullwidth {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}




@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 768px) {
  .sec_title h2 {
    font-size: 20px;
    margin-top: 0;
  }
  .sec_title .sub {
    font-size: 13px;
    line-height: 1;
  }
}

@media only screen and (max-width: 479px) {
  .sec_title {
    margin-bottom: 20px;
  }
}








/* -----------------------------------------------

	 メインスライダー（main_slider_area）

----------------------------------------------- */
..main_slider_area .slick-dotted.slick-slider {
  margin-bottom: 80px;
}
.main_slider_area .slick-slide {
  margin: 0 10px;
  line-height: 0;
}
.main_slider_area .slick-dots {
  position: absolute;
  bottom: -45px;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
}
.main_slider_area .slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.main_slider_area .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.main_slider_area .slick-dots li button:hover,
.main_slider_area .slick-dots li button:focus {
  outline: none;
}
.main_slider_area .slick-dots li button:hover:before,
.main_slider_area .slick-dots li button:focus:before {
  opacity: 1;
}
.main_slider_area .slick-dots li button:before {
  content: " ";
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  text-align: center;
  opacity: 1;
  background-color: #D2BEB5;
  border-radius: 50%;
}
.main_slider_area .slick-dots li.slick-active button:before {
  opacity: 1;
  background-color: #372222;
}
.main_slider_area .slick-dots li button.thumbnail img {
  width: 0;
  height: 0;
}



@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 768px) {
  .main_slider_area .slick-dotted.slick-slider {
    margin-bottom: 50px;
  }
  .main_slider_area .slick-dots {
    bottom: -30px;
  }
  .main_slider_area .slick-dots li,
  .main_slider_area .slick-dots li button {
    width: 15px;
    height: 15px;
    padding: 0;
  }
  .main_slider_area .slick-dots li button:before {
    width: 12px;
    height: 12px;
  }
}

@media only screen and (max-width: 479px) {
  .main_slider_area .slick-slide {
    margin: 0;
  }
}




/* -----------------------------------------------

	 ランキング（ranking_area）

----------------------------------------------- */
/*ランキング・おすすめ商品共通*/
.ec-shelfGrid__item a {
  color: #3D2C24;
}
.ec-shelfGrid__item a dl {
  padding: 10px 15px;
}
.ec-shelfGrid__item a dl dt {
  margin-bottom: 5px;
  font-weight: 500;
}
.ec-shelfGrid__item a dl dd {
  font-weight: 700;
}

.ranking_area {
  padding: 80px 0 50px;
}
.ranking_area .ranking_slider .slick-list {
  padding: 0 3% 0 0;
}
.ranking_area .ranking_slider .slick-slide {
  margin: 0 10px;
}
.ranking_area .ranking_slider .slide-arrow {
  width: unset;
  position: absolute;
  top: -50px;
}
.ranking_area .ranking_slider .prev-arrow {
  right: 35px;
}
.ranking_area .ranking_slider .next-arrow {
  right: 0;
}
.ranking_area .rank {
  position: relative;
}
.ranking_area .rank::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 55px;
  height: 52px;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}
.ranking_area .rank01::before {
  background-image: url(/html/user_data/assets/img/top/rank01_icon.png);
}
.ranking_area .rank02::before {
  background-image: url(/html/user_data/assets/img/top/rank02_icon.png);
}
.ranking_area .rank03::before {
  background-image: url(/html/user_data/assets/img/top/rank03_icon.png);
}
.ranking_area .rank04::before {
  background-image: url(/html/user_data/assets/img/top/rank04_icon.png);
}
.ranking_area .rank05::before {
  background-image: url(/html/user_data/assets/img/top/rank05_icon.png);
}


@media only screen and (max-width: 1024px) {
  .ranking_area .rank::before {
    width: 5vw;
    height: 38px;
  }
}

@media only screen and (max-width: 768px) {
  .ec-shelfGrid__item a dl {
    padding: 5px 8px;
  }
  .ec-shelfGrid__item a dl dt,
  .ec-shelfGrid__item a dl dd {
    font-size: 14px;
  }
  .ranking_area {
    padding: 50px 0 30px;
  }
  .ranking_area .ranking_slider .slide-arrow {
    width: 22px;
    top: -35px;
  }
  .ranking_area .ranking_slider .prev-arrow {
    right: 30px;
  }
  .ranking_area .ranking_slider .slick-slide {
    margin: 0 25px 0 0;
  }
  .ranking_area .rank::before {
    width: 9vw;
    height: 70px;
  }
}

@media only screen and (max-width: 479px) {
  .ec-shelfGrid__item a dl dt,
  .ec-shelfGrid__item a dl dd {
    font-size: 13px;
  }
  .ranking_area {
    padding: 40px 0 20px;
  }
  .ranking_area .ranking_slider .slick-list {
    padding: 0;
  }
  .ranking_area .ranking_slider .slick-slide {
    margin: 0 10px 0 0;
  }
  .ranking_area .rank::before {
    width: 40px;
    height: 38px;
  }
}



/* -----------------------------------------------

	 バナーエリア（banner_area）

----------------------------------------------- */
.banner_area {
  padding: 40px 0;
  background-color: #F7F4EF;
}
.banner_area .banner_wrap {
  gap: 20px;
}
.banner_area .banner_wrap li {
  width: calc( 100% / 2 - 10px );
  line-height: 0;
}





@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 768px) {
  .banner_area .banner_wrap li {
    max-width: 550px;
    margin: 0 auto;
    width: 100%;
  }
}

@media only screen and (max-width: 479px) {
  .banner_area {
    padding: 30px 0;
  }
}






/* -----------------------------------------------

	 おすすめ商品（recommend_area）

----------------------------------------------- */
.recommend_area {
  padding: 80px 0 50px;
}


@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 768px) {
  .recommend_area {
    padding: 50px 0 30px;
  }
  .ec-shelfGrid .ec-shelfGrid__item {
    width: 50%;
  }
}

@media only screen and (max-width: 479px) {
  .recommend_area {
    padding: 40px 0 20px;
  }
}



/* -----------------------------------------------

	 新着情報（news_area）

----------------------------------------------- */
.news_area {
  padding: 0 0 60px;
  background-color: #F7F4EF;
  position: relative;
  overflow: hidden;
  /*background-image: url(https://shop.ruskthe.com/html/user_data/assets/img/top/news_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;*/
}
.news_area::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(https://shop.ruskthe.com/html/user_data/assets/img/top/news_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 827px;
  height: 538px;
}
.news_area .news_inner {
  max-width: 800px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.news_area .ec-newsRole .ec-newsRole__news {
  border: none;
  padding: 0;
}
.news_area .ec-newsRole .ec-newsRole__newsItem {
  padding: 18px 20px;
  margin-bottom: 10px;
  background-color: #fff;
  border-bottom: none !important;
}
.news_area .ec-newsRole .ec-newsRole__newsDate {
  margin-top: 3px;
}
.news_area .ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn i {
  transform: rotateX(180deg) translateY(0px);
}
.news_area .ec-inlineBtn--top {
  padding: 5px 20px;
  border: none;
  /*display: none;
  position: absolute;
  top: 0;
  right: 0;*/
}
.news_area .ec-inlineBtn--top:hover {
  background-color: #372222;
}
.news_area .news_bnr_area {
  margin-top: 30px;
}
.news_bnr_area ul {
  gap: 10px 50px;
}
.news_bnr_area ul li {
  width: calc( 100% / 2 - 25px );
}





@media only screen and (max-width: 1024px) {
  .news_area::after {
    width: 650px;
    height: 423px;
  }
}

@media only screen and (max-width: 768px) {
  .news_area::after {
    width: 550px;
    height: 358px;
  }
  .news_area .ec-newsRole .ec-newsRole__newsTitle {
    margin-bottom: 0;
  }
  .news_area .ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
    margin: 12px 0 0;
  }
  .news_bnr_area ul {
    gap: 10px 30px;
  }
  .news_bnr_area ul li {
    width: calc( 100% / 2 - 15px );
  }
}

@media only screen and (max-width: 479px) {
  .news_area {
    padding: 0 0 50px;
  }
  .news_area::after {
    width: 350px;
    height: 230px;
  }
  .news_bnr_area ul li {
    width: 100%;
  }
}




/* -----------------------------------------------

	 系列店（affiliated_store_area）

----------------------------------------------- */
.affiliated_store_area {
  padding: 80px 0;
  background-color: #372222;
  color: #fff;
}
.affiliated_store_area .container {
  max-width: 950px;
}
.affiliated_store_area .sec_title h2,
.affiliated_store_area .sec_title .sub {
  color: #fff;
}
.affiliated_store_area .affiliated_store_wrap {
  gap: 50px 80px;
}
.affiliated_store_area .affiliated_store_wrap .box {
  width: calc( 100% / 2 - 40px );
  text-align: center;
  color: #fff;
}
.affiliated_store_area .affiliated_store_wrap .box h3 {
  margin: 15px 0;
}
.affiliated_store_area .affiliated_store_wrap .box ul {
  margin-top: 15px;
  gap: 12px;
}
.affiliated_store_area .affiliated_store_wrap .box ul li a {
  font-size: 13px;
  color: #fff;
  border: 1px solid #fff;
  padding: 10px 20px;
  line-height: 1;
}
.affiliated_store_area .affiliated_store_wrap .box ul li a:hover {
  background-color: #211818;
  /*border-color: #211818;*/
}
.affiliated_store_area .affiliated_store_wrap .box ul li a img {
  margin-right: 10px;
}





@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 768px) {
  .affiliated_store_area {
    padding: 50px 0;
  }
  .affiliated_store_area .affiliated_store_wrap {
    -webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;
  }
  .affiliated_store_area .affiliated_store_wrap .box {
    width: unset;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 479px) {
  .affiliated_store_area {
    padding: 40px 0 50px;
  }
  .affiliated_store_area .affiliated_store_wrap .box ul li {
    width: 75%;
    text-align: center;
  }
  .affiliated_store_area .affiliated_store_wrap .box ul li img {
    margin: 0 10px 0 0;
  }
}




/* -----------------------------------------------

	 ********

----------------------------------------------- */



@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 479px) {
}