@charset "UTF-8";
/* common ----------------------------------- */
html,
body {
  overflow-x: hidden;
}

.mp_approach_page {
  font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  margin-bottom: 100px;
  color: #000000;
  /* kv ----------------------------------- */
  /* animation ----------------------------------- */
  /* main bg*/
}
@media screen and (max-width: 768px) {
  .mp_approach_page {
    background: url(../../assets/img/skincare/series/moonpearl/approach/main_contens_bg_new.png) top -50px center no-repeat;
    background-position: -116vw 38vh;
    background-size: 240vw;
  }
}
@media screen and (max-width: 599px) {
  .mp_approach_page {
    background-position: -172vw 40vh;
    background-size: 322.4vw;
  }
}
@media screen and (max-width: 375px) {
  .mp_approach_page {
    background-position: -172vw 40vh;
    background-size: 322.4vw;
  }
}
@media screen and (max-height: 734px) and (max-width: 375px) {
  .mp_approach_page {
    background-position: -172vw 39vh;
    background-size: 322.4vw;
  }
}
@media screen and (max-width: 768px) {
  .mp_approach_page {
    margin-bottom: 0;
  }
}
.mp_approach_page a {
  display: inline-block;
  transition: 0.5s;
}
.mp_approach_page a:hover {
  opacity: 0.7;
}
.mp_approach_page img {
  display: inline-block;
  max-width: 100%;
}
.mp_approach_page .common-w {
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .common-w {
    width: 100%;
  }
}
.mp_approach_page .sp_z {
  display: none;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .sp_z {
    display: block;
  }
}
.mp_approach_page .pc_z {
  display: block;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .pc_z {
    display: none;
  }
}
.mp_approach_page .kv {
  line-height: 1.6;
  background: url(../../assets/img/skincare/series/moonpearl/approach/new_main_kv_20230228.png) center center no-repeat;
  background-size: 1920px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .kv {
    background: unset;
  }
}
@media screen and (min-width: 1921px) and (max-width: 9000px) {
  .mp_approach_page .kv {
    background-size: 100%;
    background: url(../../assets/img/skincare/series/moonpearl/approach/new_main_kv_20230228.png) top center no-repeat;
    background-position: center calc(50% + 0.1vw);
  }
}
.mp_approach_page .kv {
  position: relative;
  width: 100%;
  height: calc(100vh - 150px);
  min-height: 734px;
  max-height: 734px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .kv {
    height: calc(100vh - 14.6vw);
    min-height: calc(100vh - 14.6vw);
    max-height: none;
  }
}
.mp_approach_page .kv .main_text {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .mp_approach_page .kv .main_text {
    top: 22%;
    width: 43vw;
  }
  .mp_approach_page .kv .main_text img {
    width: 100%;
  }
}
.mp_approach_page .kv .scroll {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 64px;
}
.mp_approach_page .kv .scroll img {
  width: 64px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .kv .scroll {
    width: 17.0666vw;
  }
  .mp_approach_page .kv .scroll img {
    width: 17.0666vw;
  }
}
.mp_approach_page .kv .scroll {
  transition: 3s;
  -webkit-animation: fuwafuwa 3s infinite linear alternate;
  animation: fuwafuwa 3s infinite linear alternate;
}
@keyframes fuwafuwa {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -10px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
.mp_approach_page .main_contents {
  line-height: 1.6;
  height: auto;
  padding-top: 96px;
}
@media screen and (min-width: 1921px) and (max-width: 9000px) {
  .mp_approach_page .main_contents {
    background-size: 100%;
  }
}
@media screen and (max-width: 768px) {
  .mp_approach_page .main_contents {
    background-size: 322.93333vw;
    background-position: -173vw -24vw;
    padding-left: 5.6vw;
    padding-right: 5.6vw;
    padding-top: 14.333vw;
  }
}
.mp_approach_page .contents_1 .contents_title {
  font-size: 22px;
  line-height: 1.7;
  margin-bottom: 32px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_1 .contents_title {
    text-align: left;
    font-size: 5.8vw;
  }
}
.mp_approach_page .contents_1 .contents_title sup {
  font-size: 12px;
  -webkit-transform: translate(0, -12px);
  transform: translate(0, -12px);
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_1 .contents_title sup {
    font-size: 3.2vw;
  }
}
.mp_approach_page .contents_1 .contents_text {
  font-size: 14px;
  line-height: 2;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_1 .contents_text {
    text-align: left;
    font-size: 3.73333333vw;
    letter-spacing: 0.6vw;
  }
}
.mp_approach_page .contents_1 .contents_text sup {
  font-size: 12px;
  display: inline-block;
  transform: translate(0, -4px);
}
.mp_approach_page .contents_1 .note {
  font-size: 12px;
  margin-top: 32px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_1 .note {
    text-align: left;
  }
}
.mp_approach_page .contents_1 .note .kometxt {
  font-size: 12px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_1 .note .kometxt {
    font-size: 2.6vw;
  }
}
.mp_approach_page .contents_1 .note .txt1 {
  margin-left: 4px;
  font-family: Arial, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_1 .note .txt1 {
    font-size: 3.2vw;
  }
}
.mp_approach_page .contents_line {
  width: 100%;
  height: 1px;
  background-color: #707070;
  margin-top: 96px;
  margin-bottom: 96px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_line {
    margin-top: 17.06666vw;
    margin-bottom: 17.06666vw;
  }
}
.mp_approach_page .contents_2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_2 {
    display: block;
  }
}
.mp_approach_page .contents_2 .contents_box {
  flex-basis: 47.6%;
  margin-bottom: 32px;
}
.mp_approach_page .contents_2 .contents_box .mini_title {
  font-size: 20px;
  margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_2 .contents_box .mini_title {
    font-size: 5.3333333vw;
  }
}
.mp_approach_page .contents_2 .contents_box .mini_title .box_txt {
  border: 1px solid #000000;
  font-size: 12px;
  line-height: 1;
  font-family: Arial, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  padding: 4px 6px;
  margin-right: 6px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_2 .contents_box .mini_title .box_txt {
    font-size: 3.2vw;
    padding: 1.0666666vw 1.6vw;
    margin-right: 1.6vw;
  }
}
.mp_approach_page .contents_2 .contents_box .mini_title.img_plus img, .mp_approach_page .contents_2 .contents_box .mini_title.img_plus span, .mp_approach_page .contents_2 .contents_box .mini_title.img_plus sub {
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_2 .contents_box .mini_title.img_plus img {
    width: 21.333333vw;
  }
}
.mp_approach_page .contents_2 .contents_box .mini_title img {
  margin-right: 8px;
}
.mp_approach_page .contents_2 .contents_box .mini_title_sub {
  font-family: Arial, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 12px;
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_2 .contents_box .mini_title_sub {
    font-size: 3.2vw;
  }
}
.mp_approach_page .contents_2 .contents_box .mini_text {
  font-size: 14px;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_2 .contents_box .mini_text {
    font-size: 3.73333333vw;
    letter-spacing: 0.6vw;
  }
}
.mp_approach_page .contents_2 .contents_box .mini_text sup {
  font-size: 12px;
  display: inline-block;
  transform: translate(0, -4px);
}
.mp_approach_page .contents_2 .contents_box .note {
  font-size: 12px;
  margin-top: 16px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_2 .contents_box .note {
    font-size: 3.2vw;
  }
}
.mp_approach_page .contents_2 .contents_box .note .kometxt {
  font-size: 12px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_2 .contents_box .note .kometxt {
    font-size: 3.2vw;
  }
}
.mp_approach_page .contents_2 .contents_box .note .txt1 {
  margin-left: 0px;
}
.mp_approach_page .contents_3 {
  margin-top: 64px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_3 {
    margin-top: 0px;
  }
}
.mp_approach_page .contents_3 .contents_3_wrap {
  border: 1px solid #707070;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0 37px;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .contents_3 .contents_3_wrap {
    display: block;
    padding-top: 0px;
    padding-bottom: 0px;
    border: unset;
  }
  .mp_approach_page .contents_3 .contents_3_wrap img {
    width: 100%;
  }
}
.mp_approach_page .contents_3 .contents_3_wrap img {
  margin: 0 auto;
}
.mp_approach_page .contents_3 .c3_text_set {
  font-family: Arial, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  margin-top: 5.6vw;
}
.mp_approach_page .contents_3 .c3_text_set:nth-child(n+4) {
  margin-top: 8.5333333vw;
}
.mp_approach_page .contents_3 .c3_text_set .s_title {
  font-weight: bold;
  font-size: 4.2666666vw;
  line-height: 2;
}
.mp_approach_page .contents_3 .c3_text_set .s_text1 {
  font-size: 3.7333333vw;
  line-height: 2;
  margin-bottom: 1.6vw;
}
.mp_approach_page .contents_3 .c3_text_set .s_waku {
  border: 1px solid #707070;
  width: 100%;
}
.mp_approach_page .contents_3 .c3_text_set .s_waku .s_text2 {
  width: 28.8vw;
  font-size: 3.2vw;
  display: block;
  margin: 4.2666666vw auto;
}
.mp_approach_page .contents_3 .c3_text_set .s_waku .s_text2 sub {
  font-size: 3.2vw;
}
.mp_approach_page .contents_3 .c3_text_set .s_waku .s_text2_2 {
  width: 45.6vw;
}
.mp_approach_page .contents_3 .c3_text_set .s_waku .s_text2_3 {
  width: 41.8666666vw;
}
@media screen and (max-width: 768px) {
  .mp_approach_page .cmn_bottom_m50 {
    margin-bottom: 13.33333vw;
  }
}

#contents {
  margin: 0px 0px 80px 0px;
}
@media screen and (max-width: 768px) {
  #contents {
    margin: 0px 0px 0px 0px;
  }
}

#contents.mp_approach_page .main_contents {
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  #contents.mp_approach_page .main_contents {
    padding-bottom: 25.6vw;
  }
}/*# sourceMappingURL=moonpearl_approach.css.map */