@charset "utf-8";

/*------------------------------------------------------------
	共通
------------------------------------------------------------*/


body {
  line-height: 1.7;
  letter-spacing: 0.12em;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
}

html,
body {
  font-size: clamp(14px, 3vw, 18px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}

/*------------------------------------------------------------
    共通
------------------------------------------------------------*/
.img_wrap img {
  width: 100%;
}

.d_flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.7vw;
}
h2 img {
  max-width: 100%;
}

h4 {
  font-size: clamp(24px, 6.1vw, 56px);
}

p {
  margin-bottom: 1.5em;
}
p.note {
  font-size: clamp(12px, 3vw, 18px);
}
.t_right {
  text-align: right;
}

@media screen and (min-width: 769px) {
  .only_sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .only_pc {
    display: none;
  }
}

.cont_w {
  max-width: 1200px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.blue_tit {
  background: #53a1d8 linear-gradient(to right, #fff 3%, #53a1d8 35%, #53a1d8 65%, #fff 97%);
  margin-bottom: 2.3%;
}

.blue_tit img {
  vertical-align: bottom;
}

.blue_tit img:first-of-type {
  margin-right: -1rem;
}

.blue_tit img:last-of-type {
  margin-left: -0.5rem;
}

@media screen and (max-width: 768px) {
  .blue_tit {
    line-height: 1;
    padding-bottom: 0.5em;
  }
  .blue_tit img {
    display: block;
  }
  .blue_tit img:first-of-type {
    width: 30%;
    margin: 0 auto;
  }
  .blue_tit img:last-of-type {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 769px) {
  .blue_tit img {
   max-width: 95%;
  }
}

.inr {
  padding-left: 2.5%;
  padding-right: 2.5%;
}

/*------------------------------------------------------------
    コンテンツ
------------------------------------------------------------*/
.main_cont {
  overflow: hidden;
}

/*-----------------------
FV
-----------------------*/

.sec1 {
  background: #ddf0f9 url(../images/sec1_bg.png) left bottom / 27% no-repeat;
  padding: 38px 0;
}
.sec1 p {
  text-align: center;
  font-size: clamp(16px, 4.1vw, 26px);
  color: #4c5f6c;
}

.sec2 {
  text-align: center;
  background: #e0e1e1 linear-gradient(to right, #efefef, #fafafa, #e0dfdf);
}


.sec2_nayami {
  position: relative;
}

.sec2_nayami .cont_w {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
}

.nayami_check {
  text-align: right;
  margin-top: 8.5%;
}
.nayami_check img {
  width: 34%;
}
@media screen and (max-width: 1024px) {
  .sec2_nayami .img_wrap img {
    object-fit: cover;
    aspect-ratio: 1 / 1;
  }
  .nayami_check img {
    width: 43%;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1740px) {
  .nayami_check {
    margin-top: 2%;
  }
  .nayami_check img {
    width: 25%;
  }
}

.hair_cycle {
  font-size: clamp(16px, 4.1vw, 26px);
  padding-bottom: 4%;
  margin-top: -4%;
  position: relative;
}

.hair_cycle .cont_w {
  background: #fff;
  border-radius: 20px;
  padding: 4.1% 2% 1%;
  margin-top: -1.5%;
}
.hair_cycle h2 {
  margin-bottom: 3%;
}

.hair_cycle .d_flex {
  gap: 26px;
  margin-bottom: 4.5%;
}

.hair_cycle .d_flex img {
  width: calc((100% - 26px) / 2);
}


@media screen and (max-width: 768px) {
  .hair_cycle .cont_w {
    padding: 8% 5% 1%;
    margin-top: -11.5%;
  }
  .hair_cycle .d_flex img {
    width: 100%;
  }
}

.sec3 {
  background: #e2f6fc linear-gradient(to bottom, #e2f6fc 0%, #e2f6fc 78%, #fff 100%);
  text-align: center;
  padding: 0 0 45%;
}
.sec3 h2 {
  margin-bottom: 1.8em;
}
.sec3 > p {
  font-size: clamp(16px, 4.1vw, 24px);
  color: #4c5f6c;
}
.sec3_inr {
  background: #e0e1e1 linear-gradient(to right, #efefef, #fafafa, #e0dfdf);
  margin-bottom: 4.8em;
}

.point_area {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 8px 6px 0px rgba(23, 78, 120, 0.2);
  padding: 0 0 3.3%;
  font-size: clamp(16px, 4.1vw, 26px);
}

.point_inr {
  padding: 0 3.4%;
}
.point {
  padding: 6.4% 0 0;
}
.point:nth-of-type(3) {
  padding: 4% 0 0;
}

.point::after {
  content: "";
  display: block;
  width: 100%;
  padding-top: 11%;
  background: url(../images/sec3_wave.jpg) top left / cover no-repeat;
  margin-top: -1.5%;
}
.point:last-of-type:after {
  content: none;
}

.point1 .point_inr img {
  width: 83%;
}

.point h4 {
  margin-bottom: 1.2%;
  font-feature-settings: normal;
  color: #4c5f6c;

}

.seibun {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 70px 34px;
  margin: 0 0 2.2% 0;
}

.seibun img {
  margin-bottom: 3%;
}

.seibun > div:nth-of-type(3) {
  width: 108.8%;
  margin-left: -4%;
}
.seibun > div:nth-of-type(5) img,
.seibun > div:nth-of-type(6) img {
  margin-bottom: 4.8%;
}
.seibun p {
  font-size: clamp(16px, 4.1vw, 24px);
  width: 92%;
  margin: 0 auto;
  line-height: 1.5;
  color: #4c5f6c;

}

.mutenka {
  gap: 40px;
  margin-bottom: 6.2%;
}

@media screen and (max-width: 768px) {
  .sec3 h2 {
    width: 80%;
  }
  .sec3 .sec3_kv {
    object-fit: cover;
    aspect-ratio: 1 / 0.8;
  }
  .point_area {
    padding-bottom: 8%;
  }
  .point {
    padding: 8% 0 0;
  }
  .point1 .blue_tit img:last-of-type {
    width: 42%;
  }
  .seibun {
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 30px 20px;
  }
  .mutenka {
    gap: 20px;
  }
  .mutenka img {
    max-width: 34%;
  }
  .mutenka img:nth-of-type(3) {
    max-width: 47.6%;
  }
  .mutenka img:nth-of-type(4) {
    max-width: 44.2%;
  }
}

.anzensei {
  justify-content: space-between;
  gap: 20px;
  width: 72.8%;
  margin: 0 auto;
}
.d_flex.anzensei img {
  max-width: 100%;
}
.d_flex.anzensei img:first-of-type {
  max-width: 40.1%;
}

/* よくある質問 */
.faq {
  margin: -35.6% 0 4.3%;
}
.faq h2 {
  margin-bottom: 2.2em;
}
.faq dl {
  border-radius: 20px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 12px 0px rgba(19, 88, 122, 0.35);
  padding: 2.5% 3.5%;
  margin-bottom: 5%;
}
.faq dt {
  color: #53a1d8;
  font-size: clamp(20px, 5.13vw, 36px);
  margin-bottom: 0.5em;
  line-height: 1.25;

  text-indent: -1.7em;
  padding-left: 1.7em;
}
.faq dt span {
  background: #53a1d8;
  color: #fff697;
  display: inline-block;
  border-radius: 5em;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.5;
  text-indent: 0;
  margin-right: 0.25em;
}

.faq dd {
  font-size: clamp(16px, 4.1vw, 24px);
  letter-spacing: 0.12em;
  color: #4c5f6c;
}

@media screen and (max-width: 768px) {
  .faq {
    margin-top: -25%;
    margin-bottom: 18%;
  }
  .faq dl {
    padding: 5%;
    margin-bottom: 8%;
  }
  .faq h2 {
    width: 50%;
  }
}

/* ご使用方法 */
.sec4 h2 {
  margin-bottom: 1em;
}

.sec4 p {
  font-size: clamp(16px, 4.1vw, 24px);
}
.sec4 p span {
  font-size: clamp(14px, 3.6vw, 20px);
}

@media screen and (max-width: 768px) {
  .sec4 h2 {
    width: 50%;
  }
}

/* 商品 */
.product {
  background: url(../images/product_bg1.png) 100% 5% / 25.9% no-repeat, url(../images/product_bg2.png) 0% 100% / 20% no-repeat, #ddf0f9;
  padding-bottom: 3%;
}

.product::before {
  content: "";
  display: block;
  width: 102%;
  padding-top: 10.6%;
  background: url(../images/wave_btm.svg) bottom left / cover no-repeat;
  margin-left: -1%;
}

.product .d_flex {
  gap: 50px;
}

.product_img {
  max-width: 216px;
  width: 18%;
}

.product_info {
  width: calc(100% - 18% - 50px);
  margin: 1% 0 0 0;
}

.product_info img {
  margin-bottom: 3.6%;
}
.product_info > img {
  width: 80%;
}

.product_info p {
  font-size: clamp(14px, 3.6vw, 20px);
  margin: 0 0 2% 2.1%;
  line-height: 1.8;
  letter-spacing: 0.01em;
}
.product_info p:first-of-type {
  margin: 0;
}

.product_info a {
  margin: 3.5% 0 0 2.1%;
  display: block;
}
.product_info a img {
  max-width: 450px;
}

@media screen and (max-width: 768px) {
  .product {
    background: url(../images/product_bg1.png) 100% 0% / 50% no-repeat, url(../images/product_bg2.png) 0% 100% / 30% no-repeat, #ddf0f9;
    padding-bottom: 10%;
  }
  .product_info img {
    width: 100%;
  }
  .product_img {
    width: 30%;
    text-align: center;
  }
  .product_info {
    width: initial;
  }

  .product_info a {
    width: 80%;
  }
}