@charset "UTF-8";

/* Inview */
.fadein {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1s, transform 1s;
}
.fadein.inview {
  opacity: 1;
  transform: translateY(0);
}

/*-------------------------------------------
メインビジュアル
-------------------------------------------*/
.mv .slick .slick-item img {
  width: 100%;
  max-height: 1000px;
  object-fit: cover;
}
.mv .slick .slick-item .mv1-text {
  width: 28vw;
  position: absolute;
  top: 25%;
  left: 15%;
}
.mv .slick .slide-arrow {
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 10;
  top: calc(50% - 20px);
}
.mv .slick .slide-arrow.prev-arrow {
  left: 50px;
}
.mv .slick .slide-arrow.next-arrow {
  right: 50px;
}
.mv .slick .slick-dots {
  bottom: -35px;
  z-index: 10;
}
.mv .slick .slick-dots li {
  margin: 0 10px;
}
.mv .slick .slick-dots li button::before {
  font-size: 14px;
}
.mv .slick .slick-dots li button:hover::before {
  color: #703018;
}
.mv .slick .slick-dots li.slick-active button::before {
  color: #703018;
}

/*-------------------------------------------
ジュレリッチブランドについて
-------------------------------------------*/
#about {
  width: 100%;
  height: 840px;
  background-image: url(../img/top/about-pc.jpg);
  background-position: top center;
  background-size: cover;
  padding-top: 100px;
  margin: -37px 0 100px;
  position: relative;
}
#about .text-area {
  max-width: 515px;
  color: #fff;
  position: absolute;
  top: 32%;
  left: 6%;
}
#about .text-area .title {
  font-size: 30px;
  line-height: 1.7;
  margin-bottom: 30px;
}
#about .text-area .text {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
  text-align: justify;
}
#about .text-area .note {
  font-size: 12px;
}

/*-------------------------------------------
トピックス
-------------------------------------------*/
.topics .topics-list {
  grid-template-columns: repeat(3, 1fr);
}

/*-------------------------------------------
シリーズ
-------------------------------------------*/
.series {
  margin-bottom: 70px;
}

/*-------------------------------------------
お悩み検索
-------------------------------------------*/
.search {
  margin-bottom: 100px;
}

/*-------------------------------------------
エイジングケア講座一覧
-------------------------------------------*/
.lesson {
  background-color: #f4f4f4;
  padding: 100px 0 50px;
}
.lesson .lesson-list {
  margin-bottom: 30px;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {
  /*-------------------------------------------
  メインビジュアル
  -------------------------------------------*/
  .mv .slick .slick-item .mv1-text {
    width: 310px;
    top: 7%;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .mv .slick .slide-arrow {
    width: 26px;
    height: 26px;
    top: calc(50% - 13px);
  }
  .mv .slick .slide-arrow.prev-arrow {
    left: 15px;
  }
  .mv .slick .slide-arrow.next-arrow {
    right: 15px;
  }
  .mv .slick .slick-dots {
    bottom: 35px;
  }
  .mv .slick .slick-dots li {
    margin: 0 6px;
  }
  .mv .slick .slick-dots li button::before {
    color: #777;
  }

  /*-------------------------------------------
  ジュレリッチブランドについて
  -------------------------------------------*/
  #about {
    height: 700px;
    background-image: url(../img/top/about-sp.jpg);
    background-position: bottom center;
    padding-top: 0;
    margin: 0 0 40px;
  }
  #about .main-title {
    margin-bottom: 30px;
  }
  #about .text-area {
    color: #201f1e;
    max-width: 100%;
    padding: 0 20px;
    position: static;
  }
  #about .text-area .title {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 20px;
    text-align: center;
  }
  #about .text-area .text {
    font-size: 15px;
    margin-bottom: 20px;
  }

  /*-------------------------------------------
  トピックス
  -------------------------------------------*/
  .topics {
    margin-bottom: 80px;
  }
  .topics .topics-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }

  /*-------------------------------------------
  シリーズ
  -------------------------------------------*/
  .series {
    margin-bottom: 0;
  }

  /*-------------------------------------------
  お悩み検索
  -------------------------------------------*/
  .search {
    margin-bottom: 40px;
  }

  /*-------------------------------------------
  エイジングケア講座一覧
  -------------------------------------------*/
  .lesson {
    padding: 40px 0 60px;
  }

  /*-------------------------------------------
  メンバーズクラブ
  -------------------------------------------*/
  .members {
    display: none;
  }
}