@charset "UTF-8";


.slick-dots {
  position: absolute;
  bottom: -45px;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;

  cursor: pointer;
}

.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;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  content: " ";
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  text-align: center;
  opacity: .25;
  background-color: #222222;
  border-radius: 50%;

}

.slick-dots li.slick-active button:before {
  opacity: .75;
  background-color: #222222;
}

.slick-dots li button.thumbnail img {
  width: 0;
  height: 0;
}

/* TOP */

#page_homepage .ec-sliderRole{
  width:1400px;
}
.top_sp{
  display:none;

}

.top_pc{
  display:block;

}

/* 着物ブロック */

.ec-topProductListRole__image{
  transition: .5s cubic-bezier(.23,1,.32,1);
}
.ec-topProductListRole__image:hover{
  opacity:0.7;
}

.block_sp{
  display:none;
}

/* top img */

#page_homepage .ec-sliderRole{
  max-width: unset;
  width: 100%;
  padding:0;
  margin-bottom:0;
}

.ec-role{
  max-width: unset;
  padding:0;
}

/* top slider */
.ec-sliderRole .main_visual .slick-slide {
  margin-inline: 1%;
}

.ec-sliderRole .main_visual .slick-slide a {
  display: flex;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  color: #222;
  text-decoration: none;
}

.ec-sliderRole .main_visual .slick-slide img {
  width: 50%;
  height: auto;
}
.ec-sliderRole .main_visual .slick-slide .news_detail {
  width: 50%;
  position: relative;
}

.ec-sliderRole .main_visual .slick-slide .news_detail dt {
  margin-top: 5%;
  padding-left: 10%;
}

.ec-sliderRole .main_visual .slick-slide .news_detail dd {
  width: 100%;
  top: 50%;
  position: absolute;
}

.ec-sliderRole .main_visual .slick-slide .news_detail .category {
  display: inline-block;
  min-width: 80px;
  padding: 1px 0 3px;
  background: #444;
  color: #fff;
  text-align: center;
}

.ec-sliderRole .main_visual .slick-slide .news_detail .date {
  font-size: 1.6rem;
  margin-left: 1em;
}

.ec-sliderRole .main_visual .slick-slide .news_detail .title {
  margin-left: 7%;
  padding-left: 28px;
  font-size: 2rem;
  font-weight: 600;
  display: inline-block;
  background-image: url(/html/template/default/assets/svg/icon_arrow_sr.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 0% 50%;
}

/* top category block */
.ec-topCategoryListRole h1 {
  margin-top: 100px;
  margin-bottom: 50px;
  padding-inline: 10%;
  font-size: 20px;
}

.ec-topCategoryListRole .ec-topCategoryListRole__image {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 40px;
  margin-right: 15%;
  margin-left: 15%;
}

.ec-topCategoryListRole .ec-topCategoryListRole__image a {
  color: #222;
  text-decoration: none;
}

.ec-topCategoryListRole .ec-topCategoryListRole__image a:hover {
  opacity: 0.7;
}

.ec-topCategoryListRole .ec-topCategoryListRole__image .category_name {
  text-align: center;
}
.ec-topCategoryListRole .ec-topCategoryListRole__image .category_img {
  margin-bottom: 5px;
}

/* top register box */
.ec-topRegisterBox {
  background-color: #F5F0E8;
  margin-top: 150px;
  padding: 20px 0;
  font-size: 16px;
  text-align: center;
}

.ec-topRegisterBox .register_box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ec-topRegisterBox .register_box .register_text {
  line-height: 40px;
}

.ec-topRegisterBox .register_box .register_btn {
  margin-left: 17px;
  letter-spacing: 1px;
  border-radius: 2px;
  opacity: 1;
  display: inline-block;
  text-align: center;
  padding: 8px 0 10px;
  width: 210px;
  font-size: 14px;
  color: #fff;
  background-color: #444;
  border: 1px solid #444;
  background-image: url(/html/template/default/assets/svg/icon_arrow_sr-wt.svg);
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: 95% 50%;
  text-decoration: none;
  transition: color .5s cubic-bezier(.23,1,.32,1);
  transition-property: color,background,border;
}

.ec-topRegisterBox .register_box .register_btn:hover {
  text-decoration: none;
  color: #fff;
  background: #aa8420;
  border: 1px solid #999;
  background-image: url(/html/template/default/assets/svg/icon_arrow_sr-wt.svg);
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: 95% 50%;
  transition: color .5s cubic-bezier(.23,1,.32,1);
  transition-property: color,background,border;
}

/*top left block*/

.ec-topProductListRole .ec-topProductListRole__image{
  width:50% !important;
  order:2 !important;
  margin-bottom:0;

}

.item1{
  margin-bottom: 3px;
  margin-right: 3px;
}

.item3{
  margin-top: 3px;
  margin-right: 3px;

}

.product-name{
  text-align: center;
}

.product-price{
  text-align: center;
}
/* top right block */
.ec-topProductListRole__item{
  order:2 !important;
  width:50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


.item2{
  margin-left: 3px;
  margin-bottom: 3px;

}

.item4{
  margin-top: 3px;
  margin-left: 3px;
}

@media screen and (min-width: 769px){
	.item1{
		margin-bottom: 5px;
		margin-right: 5px;
	}

	.item3{
		margin-top: 5px;
		margin-right: 5px;
	}

	.item2{
		margin-left: 5px;
		margin-bottom: 5px;
	}

	.item4{
		margin-top: 5px;
		margin-left: 5px;
	}

}

/* 大きめの画像　*/

.ec-topProductListRole__image{
  position: relative;
}

.item_texts{
  text-align: center;
  position: absolute;
  width: 100%;
  top: 40%;
  color:#000 !important;
}

.category-name{
  font-size: 40px;
  font-weight: bold;
}

.item_texts img{
  width: 16px;
  margin-right: 5px;
  margin-bottom: 3px;
}

.item_texts a{
  font-size: 15px;
    color: #000;
    margin-top: 18px;
    display: block;
}

/* 2段目 */


/*top left block*/

.ec-topProductListRole .ec-topProductListRole__image2{
  width:50% !important;
  order:2 !important;
  margin-bottom:0;

}


/* top right block */
.ec-topProductListRole__item2{
  order:1 !important;
  width:50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.eye_items{
  width: calc(50% - 5px);
  background-color:#fff;
  transition: .5s cubic-bezier(.23,1,.32,1);
}


.eye_items img{
  width: 60%;
  margin: 12% auto 0;
  display: block;
}

.eye_items p.product-name{
  font-size: 16px;
  margin-top: 6%;
  color: #222222
}
@media screen and (min-width: 769px){
	.eye_items{
		width: calc(50% - 5px);
	}
	.eye_items p.product-name{
		margin-left: 30px;
		margin-right: 30px;
	}
}

.eye_items p.product-price{
  font-size: 12px;
  margin-top: 2.5%;
  color: #868686
}

@media screen and (max-width: 768px){
	.eye_items p.product-name {
		font-size: 12px;
	}
	.eye_items p.product-price{
		font-size: 10px;
	}
	.eye_items p.product-name,
	.eye_items p.product-price {
		margin-right: 15px;
		margin-left: 15px;
	}

}

/* 商品hover */
.eye_items:hover{
  text-decoration: none;
}

.eye_items p:hover{
  color: #222222
}

.item1:hover{
  box-shadow: 1px 1px 3px 2px #EEECE8;
  transition: 0.2s;
  opacity:0.7;
}

.item2:hover{
  box-shadow: -1px 1px 3px 2px #EEECE8;
  transition: 0.2s;
  opacity:0.7;
}

.item3:hover{
  box-shadow: 1px -1px 5px 5px #EEECE8;
  transition: 0.2s;
  opacity:0.7;
}

.item4:hover{
  box-shadow: -1px -1px 5px 5px #EEECE8;
  transition: 0.2s;
  opacity:0.7;
}


/* 大きめ画像　文字　*/

.ec-topProductListRole__image2{
  position: relative;
}

.item_texts2{
  text-align: center;
  position: absolute;
  top: 300px;
  left: 290px;
  color:#fff !important;
}



.ec-topProductListRole {
  margin-bottom: 0px;
  display:flex;
  /*min-width: 1400px;*/
}
/*一番下のボーダー*/
.ec-layoutRole__main {
  border-bottom: solid 0px #CCCCCC !important;
}

.product-price{
  font-size:13px;
  color:#868686!important;
}

/* TOP */
.top_sp{
    display:none;
    width: 100%;
    transition: .5s cubic-bezier(.23,1,.32,1);
}

.top_pc{
    display:block;
    width: 100%;
    transition: .5s cubic-bezier(.23,1,.32,1);
}
.top_pc:hover{
  opacity:0.7;
}
/* 着物ブロック */

.block_sp{
    display:none;
}

/* スマホレスポンシブ */

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

    /* TOP */
    .ec-layoutRole .ec-layoutRole__contents{
        width:100%;
    }
    .ec-layoutRole__contents{
        width:100%;
    }



    .ec-topProductListRole {
        display:block;
        min-width: 0px;
        width: 100%;
    }


    /* TOPブロック */

    .ec-topProductListRole .ec-topProductListRole__image {
        width: 100% !important;
    }

    .eye_items{
        width:calc(50% - 5px);
        padding-bottom: 40px;
    }

    /* ジュエリー */
    .item_texts {
        text-align: center;
        position: absolute;
        color: #000 !important;
    }

    .category-name {
        font-size: 45px;
    }

    .ec-topProductListRole__item{
        width: 100%;
    }

    /* 着物ブロック */

    .block_sp{
        display:block;
        transition: .5s cubic-bezier(.23,1,.32,1);
    }
    .block_pc{
        display:none;
    }

}


/* レスポンシブ */


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

  #page_homepage .ec-sliderRole {
    width: 100%;
  }


}


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

    /* TOP */
    #page_homepage .ec-sliderRole{
        width:100%;
    }

    .top_sp{
        display:block;
        transition: .5s cubic-bezier(.23,1,.32,1);

    }
    .top_sp:hover{
        opacity:0.7;
    }

    .top_pc{
        display:none;

    }

    /* ジュエリーブロック */

    .item_texts {
        text-align: center;
        position: absolute;
        top: 40%;
        color: #000 !important;
    }

    .category-name {
        font-size: 38px;
    }

    /* top slider */
    .ec-sliderRole h1 {
      text-align: center;
      font-size: 30px;
    }

    .ec-sliderRole .main_visual .slick-slide a {
      display: block;
      text-decoration: none;
      border-top: none;
      margin: 0 12%;
    }

    .ec-sliderRole .main_visual .slick-slide img {
      width: 100%;
    }

    .ec-sliderRole .main_visual .slick-slide .news_img {
    }

    .ec-sliderRole .main_visual .slick-slide .news_detail {
      width: 100%;
    }

    .ec-sliderRole .main_visual .slick-slide .news_detail dt {
      padding-left: 17%;
    }

    .ec-sliderRole .main_visual .slick-slide .news_detail dd {
      position: static;
    }

    .ec-sliderRole .main_visual .slick-slide .news_detail .category {
      min-width: 70px;
      font-size: 3vw;
      padding: 1px 5% 3px;
    }

    .ec-sliderRole .main_visual .slick-slide .news_detail .date {
      font-size: 3vw;
    }

    .ec-sliderRole .main_visual .slick-slide .news_detail .title {
      padding-left: 15%;
      margin-top: 5%;
      margin-left: 0;
      background-image: none;
      font-size: 4vw;
      width: 100%;
      text-align: center;
      font-weight: 600;
      display: inline-block;
      background-image: url(/html/template/default/assets/svg/icon_arrow_sr.svg);
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: 6% 50%;
    }

    /* top category block */
    .ec-topCategoryListRole {
      margin-bottom: 100px;
    }

    .ec-topCategoryListRole h1 {
      text-align: center;
      font-size: 30px;
      margin-top: 50px;
    }

    .ec-topCategoryListRole .ec-topCategoryListRole__image {
      margin-left: 2%;
      margin-right: 2%;
      grid-template-columns: repeat(2,1fr);
      gap: 10px;
    }

    .ec-topCategoryListRole .ec-topCategoryListRole__image .category_name {
      margin-bottom: 30px;
    }

    .ec-topCategoryListRole .ec-topCategoryListRole__image figure {
      margin: 0;
    }

    .ec-topCategoryListRole {
      margin-bottom: 100px;
    }

    /* top register box */
    .ec-topRegisterBox {
      margin-top: 0;
      padding: 40px 0;
    }

    .ec-topRegisterBox .register_box {
      display: block;
    }

    .ec-topRegisterBox .register_text {
      line-height: 2;
    }

    .ec-topRegisterBox .register_btn {
      margin-left: 0;
      margin-top: 20px;
    }
}

@media screen and (max-width: 480px){
    /* ジュエリーブロック */
    .item_texts {
        text-align: center;
        position: absolute;
        top: 38%;
        color: #000 !important;
    }

    .category-name {
        font-size: 34px;
    }

}