.main__area {
  /* font-family: minion-pro, '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif; */
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-weight: 500;
  font-style: normal;
  box-sizing: border-box;
  overflow: clip;
  /* background: #000; */
  color: #4D4744;
  /* border-bottom: 1px solid #fff; */
}

.main__area img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .main__area .pc_only {
    display: none;
  }
}

.main_content {
  position: relative;
  z-index: 3;
  transform: translateZ(1px);
}

/************** js **************/
.js-fade.active {
  opacity: 1;
  /* transform: translateY(0rem); */
}

.js-fade {
  opacity: 0;
  transition: 1.5s;
  /* transform: translateY(5rem); */
}

/************** btn **************/
.sec_btn {
  padding-bottom: calc(98*(100vw / 375));
  position: relative;
  z-index: 2;
  transform: translateZ(1px);
}

.black_btn {
  margin: calc(51* (100vw /375)) auto 0;
  width: calc(266*(100vw / 375));
  height: calc(50*(100vw / 375));
  font-size: calc(14*(100vw / 375));
  max-width: 100%;
  max-height: 100%;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  position: relative;
  z-index: 15;
  color: var(--white);
  border: 1px #fff solid;
  background-color: #4D4744 !important;
}


/* ===============================================
### PC用デザイン###
=============================================== */
@media screen and (min-width:768px) {

  .main__area {
    margin-top: .6rem;
  }

  .main__area img {
    width: 100%;
    height: auto;
  }

  .main__area .sp_only {
    display: none;
  }

  /************** btn **************/
  .sec_btn {
    padding-bottom: 8.7rem;
  }

  .black_btn {
    margin: 7.6rem auto 0;
    width: 30rem;
    height: 5.0rem;
    font-size: 1.4rem;
    max-width: 100%;
    max-height: 100%;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    position: relative;
    z-index: 15;
    color: var(--white);
  }
}

/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

.sticky_wrap {
  position: sticky;
  top: 10rem;
}

/* #loadArea {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 10;
  height: 100%;
  transition-duration: 3.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.79, 1);
}

#loadArea.is_load {
  transition-duration: 3.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.79, 1);
  height: 0;
} */

/* .mvWrap {
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.79, 1);
  transform: translateY(30%);
}

.mvWrap.is_load {
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.79, 1);
  transform: translate(0);
} */


/* ===============================================
* mv__tx_wrap *
=============================================== */
.mv__tx_wrap {
  padding: calc(40*(100vw / 375)) 0 calc(100*(100vw / 375));
  /* border-bottom: #fff 1px solid; */
  text-align: center;
  position: relative;
}


.mv__tx_wrap .mv__text {
  line-height: 2.2;
  letter-spacing: 0.05em;
  font-size: calc(14*(100vw / 375));
  margin-top: calc(33*(100vw / 375));
  font-weight: 500;
}


.bg_circle {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
}

.bg_circle .circle_item {
  transform: scale(0);
  transition-duration: 0.8s;
  border-radius: 50%;
  position: absolute;
  display: block;
}

.bg_circle.active .circle_item {
  transform: scale(1);
}

.pink {
  left: calc(-50* (100vw /375));
  top: calc(83*(100vw / 375));
  width: calc(170* (100vw /375));
  height: calc(170* (100vw /375));
  background: #FAEEF2;
}

.yellow {
  right: calc(-30*(100vw / 375));
  top: calc(120*(100vw / 375));
  width: calc(100* (100vw /375));
  height: calc(100* (100vw /375));
  transition-delay: 0.2s;
  background: #FFFCF3;
}

.blue {
  right: calc(72*(100vw / 375));
  top: calc(210*(100vw / 375));
  width: calc(70* (100vw /375));
  height: calc(70* (100vw /375));
  transition-delay: 0.4s;
  background: #DEF4F5;
}

@media screen and (min-width: 768px) {
  .mv__tx_wrap {
    padding: 5.6rem 0 17rem;
  }

  .mv__tx_wrap .mv__ttl {
    width: 59.4rem;
    margin: auto;
  }

  .mv__tx_wrap .mv__text {
    font-size: 1.4rem;
    margin-top: 6.8rem;
    line-height: 2.5;
  }

  .bg_circle {
    width: 80rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .pink {
    left: 7rem;
    top: 13rem;
    width: 24rem;
    height: 24rem;
  }

  .yellow {
    right: 12rem;
    top: 16rem;
    width: 13rem;
    height: 13rem;
  }

  .blue {
    right: 27rem;
    top: 27rem;
    width: 10rem;
    height: 10rem;
  }
}



/* ===============================================
* sec_firstView *
=============================================== */
.sec {
  padding-top: calc(50* (100vw /375));

  padding-bottom: calc(50* (100vw /375));
}

.sec01 {
  background: #FAEEF2;
}

.sec02 {
  background: #DEF4F5;
}

.sec03 {
  background: #FFFCF3;
}

.sec_firstView {
  width: calc(315* (100vw /375));
  margin: 0 auto calc(37* (100vw /375));
}

.sec_firstView .tx {
  margin: calc(24*(100vw / 375)) auto 0;
}

.sec_firstView .tx h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(28* (100vw /375));
  letter-spacing: 0.05em;
  font-weight: 400;
}

.sec_firstView .tx h3 span {
  font-size: calc(18* (100vw /375));
  letter-spacing: 0.05em;
  padding-right: calc(14* (100vw /375));
  font-weight: 400;
}

.sec_firstView .tx p {
  margin-top: calc(14*(100vw / 375));
  line-height: 1.8;
  font-size: calc(14*(100vw / 375));
  letter-spacing: 0.05em;
  font-weight: 500;
}





.sec__tax {
  display: flex;
  flex-direction: column;
  margin-top: calc(16*(100vw / 375));
  gap: calc(13*(100vw / 375));
}

.sec__tax li {
  font-size: calc(12*(100vw / 375));
  line-height: 1.5;
  letter-spacing: 0.05em;
  width: fit-content;
}

.sec__tax a {
  position: relative;
  display: block;
}

.sec__tax a::before {
  content: "";
  position: absolute;
  width: calc(80* (100vw /375));
  height: calc(27* (100vw /375));
  background: url(../img/buy.svg) center/contain no-repeat;
  top: calc(4* (100vw /375));
  right: calc(-82*(100vw / 375));
}

@media screen and (min-width: 768px) {
  .sec {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }

  .sec_firstView {
    display: flex;
    margin: 0 auto 8rem;
    width: 100rem;
    gap: 8rem;
  }


  .sec_firstView .js-slider-set2 {
    width: 48rem;
  }

  .sec_firstView .tx {
    width: 40rem;
    margin: 17rem 0 0 0;
  }

  .sec_firstView .tx h3 {
    font-size: 3.8rem;
  }

  .sec_firstView .tx h3 span {
    font-size: 2.2rem;
    padding-right: 1.9rem;
  }

  .sec_firstView .tx p {
    margin-top: 2.3rem;
    font-size: 1.4rem;
    white-space: nowrap;
  }

  .sec_firstView .img {
    width: 50rem;
  }

  .sec__tax {
    margin-top: 2.7rem;
    gap: 1.2rem;
  }

  .sec__tax li {
    font-size: 1.2rem;
  }

  .sec__tax a::before {
    width: 7rem;
    height: 2.3rem;
    top: -0.2rem;
    right: -8.5rem;
  }

  .sec02 .sec_firstView {
    flex-direction: row-reverse;
    gap: 5.1rem;
  }

  .sec02 .sec_firstView .tx {
    width: 40rem;
    margin: 18.4rem 0 0 0;
  }

  .sec03 .sec_firstView .tx {
    width: 40rem;
    margin: 15.7rem 0 0 0;
  }

}

/* ===============================================
* sec_item *
=============================================== */

.sec_item .sec__tax {
  margin-left: calc(10* (100vw /375));
  margin-top: calc(11* (100vw /375));
  gap: calc(8*(100vw / 375));
}

.sec_item .sec__tax li {
  font-size: calc(12* (100vw /375));
}

@media screen and (min-width: 768px) {
  .sec_item .sec__tax {
    margin-left: 0;
    margin-top: 1.8rem;
    gap: 1.2rem;
  }

  .sec_item .sec__tax li {
    font-size: 1.2rem;
  }

  /* ___________________________*/
  .sec_item {
    width: 100rem;
    margin: auto;
  }
}


.img_flex {
  display: flex;
  flex-direction: column;
  gap: calc(10* (100vw /375));
  width: calc(355* (100vw /375));
  margin: 0 auto 0;
}

.img_flex.widthfree {
  width: initial;
}

.sec_item_inner_small {
  margin-top: calc(37*(100vw / 375));
}

.js-slider-set3 .slick-dots {
  bottom: calc(-35*(100vw / 375));
  width: fit-content;
  right: calc(5* (100vw /375));
}

.js-slider-set3 .slick-dots li {

  width: calc(8* (100vw /375));
  height: calc(8* (100vw /375));
  margin: 0 calc(5* (100vw / 375));
}

.slick-dots li button:before {
  content: none !important;
}

.js-slider-set3 .slick-dots li button {
  font-size: 0;
  line-height: 0;

  position: absolute;
  top: 0;
  left: 0;
  padding: 0 !important;

  width: calc(8* (100vw /375));
  height: calc(8* (100vw /375));
  border-radius: 50%;

  opacity: 1 !important;
  background: transparent;
  border: #4D4744 1px solid;
}

.js-slider-set3 .slick-dots li.slick-active button {
  opacity: 1 !important;
  background: #4D4744;
}

.js-slider-set3 {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 767px) {
  .js-slider-set3 {
    height: calc(360* (100vw /375));
  }
}

.js-slider-set3_item {
  padding: 0 calc(5* (100vw /375));
}

.sec_item2 {
  margin-top: calc(37* (100vw /375));
}

@media screen and (min-width: 768px) {
  .sec01 .sec_item_inner_big {
    margin-left: auto;
    width: fit-content;
  }

  .sec03 .sec_item1 .sec_item_inner_big {
    margin-left: auto;
    width: fit-content;
  }

  .img_flex {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 85rem;
    margin: 0;
  }

  .img_flex .img {
    width: 42rem;
  }

  .sec_item_inner_small {
    margin-top: 8rem;
    width: 85rem;
  }

  .js-slider-set3 {
    width: 100rem;
  }

  .js-slider-set3 .slick-dots {
    bottom: -2.8rem;
    right: -0.5rem;
  }

  .js-slider-set3 .slick-dots li {
    width: 0.8rem;
    height: 0.8rem;
    margin: 0 0.5rem;
  }

  .js-slider-set3 .slick-dots li button {
    width: 0.8rem;
    height: 0.8rem;
  }

  .js-slider-set3_item {
    padding: 0 0.5rem;
  }

  .sec_item2 {
    margin-top: 8.8rem;
  }
}