@charset "UTF-8";
/*----------------------------------------
	common
----------------------------------------*/
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 0.8333333333vw;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 2.6666666667vw;
  }
}

/*----------------------------------------
	u-device-sp
----------------------------------------*/
.u-device-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .u-device-sp {
    display: block;
  }
}

/*----------------------------------------
	u-device-pc
----------------------------------------*/
@media screen and (max-width: 767px) {
  .u-device-pc {
    display: none;
  }
}



/*----------------------------------------
	sp or pc
----------------------------------------*/
.only-sp {
  display: none;
}

.only-pc {
  display: block;
}

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

  .only-pc {
    display: none;
  }
}


/*----------------------------------------
	ZodiacBr-mv
----------------------------------------*/

.main-area.lp {
  background: #5F84AD;
  background: linear-gradient(0deg, #1e2c5b, #5f84ad);
}

.zodiacBr {
  color: #fff;
  font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  line-height: 1.6;
}


/*----------------------------------------
	ZodiacBr-mv
----------------------------------------*/

.zodiacBr-mv__txt {
  border-bottom: 1px solid #dbd5a1;
  max-width: 110rem;
  margin: 2.5vw auto 5vw;
  padding: 0 2vw;
}

.zodiacBr-mv__txt p {
  font-size: 1.1vw;
  line-height: 1.8;
  text-align: center;
  margin: 2vw 0 2.5vw;
}
@media screen and (max-width: 767px) {
  .zodiacBr-mv__txt {
    border-bottom: none;
    max-width: initial;
    margin: 6vw auto 5vw;
  }

  .zodiacBr-mv__txt p {
    font-size: 3.5vw;
    margin: 3vw 0 3vw;
  }
}

/*----------------------------------------
	ZodiacBr-product
----------------------------------------*/
.zodiacBr-product {
  max-width: 120rem;
  margin: auto;
  padding-bottom: 2vw;
}

.zodiacBr-product__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.zodiacBr-product__list li {
  text-align: center;
  border-right: 1px solid #dbd5a1;
  padding: 0 0.5vw 0 0.5vw;
  margin-bottom: 5vw;
}

.zodiacBr-product__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.zodiacBr-product__brArea {
  margin-top: auto;
}

.zodiacBr-product__list li:nth-of-type(4n) {
  border-right: none;
}

.zodiacBr-product__name {
  padding: 0 8%;
  aspect-ratio: 2 / 0.91;
}

.zodiacBr-product__period,
.zodiacBr-product__jewelry,
.zodiacBr-product__efficacy {
  color: #dbd5a1;
  font-size: 0.8vw;
}

.zodiacBr-product__period {
  font-size: clamp(10px, 1vw, 15.8px);
  margin-bottom: 0.8vw;
}

.zodiacBr-product__jewelry {
  font-weight: bold;
  margin-bottom: 5px;
}

.zodiacBr-product__efficacy {
  line-height: 1.6;
  margin-bottom: 1vw;
}

.zodiacBr-product__detail01 {
  font-size: 0.8vw;
  margin: 0.5vw 0 0;
}

@media screen and (max-width: 767px) {
  .zodiacBr-product {
    max-width: initial;
    margin: auto;
    padding-bottom: 15vw;
  }

  .zodiacBr-product__list {
    display: block;
  }

  .zodiacBr-product__list li {
    text-align: center;
    border-right: none;
    border-top: 1px solid #dbd5a1;
    padding: 2.5vw 2vw;
    margin-bottom: 0;
  }

  .zodiacBr-product__list li:nth-child(odd) .zodiacBr-product__zodiacArea {
    order: 1;
  }

  .zodiacBr-product__list li:nth-child(odd) .zodiacBr-product__brArea {
    order: 0;
  }

  .zodiacBr-product__link {
    display: flex;
    flex-direction: row;
  }

  .zodiacBr-product__period,
  .zodiacBr-product__jewelry,
  .zodiacBr-product__efficacy {
    color: #dbd5a1;
    font-size: 3vw;
  }

  .zodiacBr-product__name {
    margin-top: 1vw;
    aspect-ratio: auto;
    padding: 10%;
    padding-bottom: 1%;
  }

  .zodiacBr-product__period {
    font-size: 3.4vw;
    margin-bottom: 4vw;
  }

  .zodiacBr-product__jewelry {
    font-weight: bold;
    margin-bottom: 5px;
  }

  .zodiacBr-product__efficacy {
    line-height: 1.6;
    margin-bottom: 1vw;
  }

  .zodiacBr-product__detail01 {
    font-size: 3.3vw;
    margin: 2vw 0 0;
    line-height: 1.3;
  }
}