/*メインビジュアル*/
 .mainvisual {
  position: relative;
  margin-top: -20px;
  overflow: hidden;
}
.mainvisual.back-image {
 padding: 0;
}
@media screen and (max-width: 1024px) {
.mainvisual {
  margin-top: -40px;
　}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.mainvisual {
  height: auto!important;
　}
}


/*カルーセル*/
.main-list {
 margin: 0 auto;
 width: 80%;
}
@media screen and (max-width: 1024px) {
.main-list {
  width: 100%;
  height: 100%;
 }
}

.main-list li {
}
@media screen and (max-width: 1024px) {
.main-list li {
  margin: 0;
 }
}

.main-img {
  width: 100%;
  height: 100%;
  object-fit: cever;
}
@media screen and (max-width: 1024px) {
.main-img {
 }
}

.main-list-sp {

}

@media screen and (max-width: 767px) {
 .main-list-sp {
 display: block;
 }
}



/*カテゴリで探す*/
.top-category-contents {

}

.category-contents {
  display: flex;
  justify-content: space-around;
  max-width: 800px;
  margin: 30px auto;
}
@media screen and (max-width: 767px) {
  .category-contents {
    max-width: 100%;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .category-contents {
   
  }
}

.category-contents li { 
 text-align: center;
 margin-bottom: 30px;
 width: 20%;
}
@media screen and (max-width: 767px) {
  .category-contents li {
    width: 40%;
  }
}

.category-contents li a {

}

.category-circle {
border: 1px solid #EFEEEA;
  border-radius: 50%;
  padding: 25px 0 25px 0;
  margin: 0 auto 10px auto;
  width: 120px;
  height: 120px;
}

.category-image {
 width: 60px;
  height: 60px;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .category-image {
   width: 70px;
   height: 70px;
  margin-right: 0;
  margin-bottom: 10px;
  }
}

.category-text {
 overflow-wrap: break-word;
}

/*----- トップバナー -----*/
.top-banner {
 margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
 .top-banner {
 margin-bottom: 40px;
  }
}

.banner-contents {
 display: flex;
 justify-content: center;
 gap: 30px;
}
@media screen and (max-width: 767px) {
.banner-contents {
flex-direction: column;
align-items: center;
gap: 20px;
 }
}

.banner-contents li {
  width: 45%;
}
@media screen and (max-width: 767px) {
.banner-contents li {
  width: 100%;
 }
}


/*商品一覧*/
.product-list {
 display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) { 
.product-list {
  justify-content: space-between;
　}
}

.product-item {
 width: calc(90%/4);
margin: 0 10px 30px 10px;
}
@media screen and (max-width: 767px) { 
.product-item {
 width: calc(90%/2);
margin: 10px 5px;
　}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.product-item {
 width: calc(90%/3);
margin: 10px;
　}
}

.item-image {
 width: 100%;
  margin: 0 auto 10px auto;
  text-align: center;
}
@media screen and (max-width: 767px) { 
.item-image {
 }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.item-image {
　}
}

.item-name {
 width: 100%;
}

.item-price {
  margin-top: 10px;
font-weight: bold;
 text-align: right;
}

.soldout {
  text-align: right;
 color: red;
}

.extra {
 text-align: center;
}

.c-btn {

}

/*ランキング*/
#ranking-section {
 padding: 50px 0;
}
@media screen and (max-width: 767px) {
 #ranking-section {
  padding: 20px 0;
 }
}

.ranking-container {
position: relative;
}

.ranking-slider .item-image {
}

 .ranking-badge {
display: inline-block;
   position: absolute;
   font-weight: bold;
   text-align: center;
   padding: 15px;
   margin: 5px;
   border-radius: 50%;
   top: -5px;
   left: -5px;
   width: 45px;
   height: 45px;
}
@media screen and (max-width: 767px) {
 .ranking-badge {
   top: 0;
   left: 0;
   width: 35px;
   height: 35px;
 }
}

.ranking-number {
 position: absolute;
 top: 9px;
 left: 18px;
 color: #fdfdfd;
}
@media screen and (max-width: 767px) {
 .ranking-number {
   top: 6px;
   left: 14px;
 }
}

.ranking-badge.rank1 {
 background-color: #FFE201; /* 1位のバッジの背景色 */
}

.ranking-badge.rank2 {
 background-color: #AFAFAF; /* 2位のバッジの背景色 */
}

.ranking-badge.rank3 {
 background-color: #C37C40; /* 3位のバッジの背景色 */
}

.ranking-badge.rank4 {
 background-color:  #606060; /* 4位のバッジの背景色 */
}

.ranking-badge.rank5 {
 background-color: #606060; /* 5位のバッジの背景色 */
}

.ranking-badge.rank6 {
 background-color: #606060; /* 6位のバッジの背景色 */
}

.is-hidden {
 display: none;
}

#ranking-section a, #ranking-section p {
 color: #333;
}

.c-btn::after {
  top: 16px;
 transform: rotate(135deg);
}
.c-btn:hover {
 opacity: 0.6;
}

/*ランキングスライドボタン*/
#ranking-section .slick-prev,#ranking-section .slick-next {
background-color: #EFDDB9;
 border-radius: 50%;
 width: 40px;
 height: 40px;
 top: 28%;
 z-index: 3;
}
@media screen and (max-width: 767px) {
#ranking-section .slick-prev,#ranking-section .slick-next {
 top: 24%;
 }
}

#ranking-section .slick-prev::before, #ranking-section .slick-next::before {
  content: "";
  position: absolute;
  top:  40%;
  left: 30%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-left: 3px solid #fdfdfd;
  border-top: 3px solid #fdfdfd;
  transition: all 0.4s ease;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #ranking-section  .slick-prev:before, #ranking-section  .slick-next:before {
    top: 15px;
  }
}
#ranking-section .slick-prev {
  left: -12px;
}
@media screen and (max-width: 767px) {
  #ranking-section .slick-prev {
    left: -10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) { 
#ranking-section .slick-prev {
  left: -12px;
 }
}

#ranking-section .slick-prev:before {
  transform: rotate(-45deg);
   left: 18px;
}
@media screen and (max-width: 767px) {
 #ranking-section .slick-prev:before {
    left: 16px;
  }
}
#ranking-section .slick-next {
  right: -12px;
}
@media screen and (max-width: 767px) {
#ranking-section .slick-next {
    right: -10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) { 
#ranking-section .slick-next {
    right: -12px;
  }
}

#ranking-section .slick-next:before {
  left: 14px;
  transform: rotate(135deg);
}
@media screen and (max-width: 767px) {
#ranking-section .slick-next:before {
    right: 11px;
  }
}

/*trees Productsについて*/
.top-about-contents {
 text-align: center;
}
@media screen and (max-width: 767px) {
.top-about-contents {
  
 }
}

.top-about-image1 {
  max-width: 60%;
  margin: 30px auto;
}
@media screen and (max-width: 767px) {
.top-about-image1 {
  max-width: 100%;
 }
}
@media screen and (min-width: 768px) and (max-width: 1024px) { 
.top-about-image1 {
  }
}

.top-about-text {
 
}
@media screen and (max-width: 767px) {
.top-about-text {
 
 }
}
@media screen and (min-width: 768px) and (max-width: 1024px) { 
.top-about-text {

  }
}

.top-about-text  h3 {
  font-family: "Great Vibes", system-ui;
  font-weight: normal;
  font-size: 3.5rem;
}
@media screen and (max-width: 767px) {
.top-about-text  h3 {
  font-size: 2.6rem;
 }
}


.top-about-text .btn-block {
 margin-top: 30px;
}

.top-about-image1 img {
 margin-bottom: 20px;
}

.top-about-text2 {
max-width: 60%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
.top-about-text2 {
 max-width: 100%;
 }
}

.top-about-text2 p {
  line-height: 1.8rem;
 display: inline-block;
  text-align: left;
}


/*ブログ*/
#blog-list {
 display: flex;
 justify-content: space-between;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
#blog-list {
 flex-direction: column;
 }
}

#blog-list li {
 width: calc(95% / 4);
 margin: 0 15px;
}
@media screen and (max-width: 767px) {
#blog-list li {
 width: 90%;
 margin-bottom: 20px;
 }
}

.blog-card a { 
 color: #333;
}

.blog-img {
 margin-bottom: 10px;
 width: 100%;
  height: 200px;
  object-fit: cover;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
 .blog-img {
  height: 140px;
 }
}

@media screen and (max-width: 767px) {
 .blog-meta {
 margin-left: 10px;
 }
}

.blog-date {
 margin-top: 5px;
}

.blog-title {
 margin-top: 5px;
font-weight: 600;
}

/*お知らせ*/
.infomation {
 padding: 50px 0;
}
@media screen and (max-width: 767px) {
 .infomation {

 }
}

.infomation ul {
display: inline-block;
}
@media screen and (max-width: 767px) {
 .infomation ul {
 display: block;
 }
}

.infomation ul li {
 font-size: 1.2rem;
 line-height: 2.5rem;
 border-bottom: 1px solid #DDDDDD;
 padding-bottom: 15px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
 .infomation ul li {
 font-size: 1rem;
 }
}

.infomation ul li time {
 color: #EFDDB9;
 margin-bottom: 10px;
}

.infomation ul li a {
 font-size: 1.2rem;
 font-weight: 500;
}

@media screen and (max-width: 767px) { 
 .infomation ul {
 margin-top: 30px;
}
  
.infomation ul li {
 font-size: 1rem;
 line-height: 2rem;
}
  
.infomation ul li a {
 font-size: 1rem;
　}
}