.lp-contents {font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", -apple-system, BlinkMacSystemFont, ".SFNSDisplay-Regular", "Helvetica Neue", "Hiragino Sans", ヒラギノ角ゴシック, "ヒラギノ角ゴ ProN W3", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", Arial, メイリオ, Meiryo, Roboto, "Droid Sans", sans-serif;color: #262626;}
.lp-contents .ryumin {font-family: 'リュウミン L-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;line-height: 1;}
.lp-contents .ryumin-m {font-family: 'リュウミン M-KL', 'Ryumin Medium KL','リュウミン L-KL', 'Ryumin Regular KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;line-height: 1;}
.lp-contents .ryumin-r {font-family: 'リュウミン R-KL', 'Ryumin Regular KL','リュウミン M-KL', 'Ryumin Medium KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;line-height: 1;}
.lp-contents .ryumin-b {font-family: 'リュウミン B-KL', 'Ryumin Bold KL','リュウミン M-KL', 'Ryumin Medium KL', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;line-height: 1;}
.lp-contents .mb10 {margin-bottom: 10px !important;}
.lp-contents .mb15 {margin-bottom: 15px !important;}
.lp-contents .mb20 {margin-bottom: 20px !important;}
.lp-contents .mb30 {margin-bottom: 30px !important;}
.lp-contents .mb40 {margin-bottom: 40px !important;}
.lp-contents .mb50 {margin-bottom: 50px !important;}
.lp-contents .mb60 {margin-bottom: 60px !important;}
.lp-contents .mb70 {margin-bottom: 70px !important;}
.lp-contents .mb80 {margin-bottom: 80px !important;}
.lp-contents .mb100 {margin-bottom: 100px !important;}
.lp-contents .mb130 {margin-bottom: 130px !important;}
.lp-contents .mb150 {margin-bottom: 150px !important;}
.lp-contents h1, .lp-contents h2, .lp-contents h3, .lp-contents h4, .lp-contents h5, .lp-contents p {margin: 0;padding: 0;border: none;background: none; color: #001388;}
.lp-contents img {max-width: 100%;height: auto;vertical-align: bottom;}
.lp-contents a {color: #052f57;text-decoration: none;outline: none;}
.lp-contents .redTxt {color: #c20000;}
.lp-contents .txtLeft {text-align: left;}
.lp-contents .txtCenter {text-align: center;}
.lp-contents .txtRight {text-align: right;}

html {
  font-size: 10px;
}
@media screen and (max-width: 640px) {
  html {
    font-size: 1.5625vw;
  }
}
body {
  max-width: 640px;
  margin: auto;
  position: relative;
}
.lp-contents {
  background: #FFF;
  text-align: center;
  margin: 0 auto;
  font-size: 2.133rem;
  overflow: hidden;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
}
/* common */
.m_line {
  position: relative;
  z-index: 2;
}
.m_line:after {
  content: "";
  width: 0%;
  height: 1.4rem;
  background: #001388;
  opacity: 0.2;
  position: absolute;
  bottom: 0.3rem;
  left: 0;
  z-index: -1;
  transition: 2s;
}
.m_line_mini {
  position: relative;
  z-index: 2;
}
.m_line_mini:after {
  content: "";
  width: 100%;
  height: 0.9rem;
  background: #001388;
  opacity: 0.2;
  position: absolute;
  bottom: 0.2rem;
  left: 0;
  z-index: -1;
  background-size: 0% 100%;
}
.js-anim.is-open:after {
  width: 100%;
}
.fadeUp {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fadeUp.active {
  opacity: 1;
  transform: translateY(0);
}
/* mainVisual */
.lp-contents .mask_bnr {
  padding-top: 3rem;
  background: #000060;
}
.mask_bnr a {
  width: 60rem;
  display: block;
  margin: 0 auto;
}
.mask_bnr img {
  border-radius: 20rem;
}
.mainVisual {
  position: relative;
  background: #c8d9ed;
}
.mainVisual .mv_ttl { 
  color: #fff;
  font-size: 6.144rem;
  position: absolute;
  top: 7.1rem;
  left: 0;
  right: 0;
  margin: auto;
  letter-spacing: 0.4rem;
}
.mainVisual .mv_ttl .small {
  font-size: 4.608rem;
}
.mainVisual .mv_detail {
  position: absolute;
  top: 72rem;
  left: 0;
  right: 0;
  margin: auto;
}
.mainVisual .mv_detail img {
  width: 55.6rem;
}
.mainVisual .mv_caution {
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #00118a;
}
.mainVisual .mv_caution_txt {
  width: 53.5rem;
  margin: 0 auto;
  font-size: 1.536rem;
  line-height: 1.5;
  color: #333333;
  text-align: left;
}
/* mainVisual出し分け */
.qa__1 .mainVisual .mv_ttl { 
  font-size: 5.3rem;
  line-height: 1.1;  
}
.qa__1 .mainVisual .mv_ttl sup {
  font-size: 2.3rem;
}
.qa__1 .first_time.cv_mask .mv_caution_txt {
  font-size: 1.46rem;
}
.qa__2 .mainVisual .mv_ttl {
  font-size: 5.3rem;
  line-height: 1.1;  
}
.qa__3 .mainVisual .mv_ttl {
  font-size: 5.3rem;
  line-height: 1.1;  
}
.qa__4 .mainVisual .mv_ttl {
  font-size: 5.3rem;
  line-height: 1.1;  
}
.pram_kol .mainVisual .mv_ttl {
  display: none;
}
.pram_kol .mask_bnr {
  padding-top: 0;
  background: none;
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
  margin: auto;
}
.pram_kol .first_time {
  background-color: #c8d9ed!important;
}
.pram_kol .first_time.cv_mask .first_time_btn {
  top: 43rem;
}
.generic_clear .mainVisual .mv_ttl {
  top: 5rem;
}
.generic_clear .mv_ttl {
  font-size: 5.8rem;
  line-height: 1.4;
}
.generic_clear .mv_ttl .small {
  font-size: 4.2rem;
}
.generic_clear .mv_ttl sup {
  font-size: 1.4rem;
  position: relative;
  top: -2rem;
  margin: 0 -0.5rem;
  letter-spacing: 0;
}
.generic_peeling .mainVisual .mv_ttl {
  top: 5rem;
}
.generic_peeling .mv_ttl {
  font-size: 5rem;
  line-height: 1.4;
}
.generic_peeling .mv_ttl .small {
  font-size: 4rem;
}
.generic_oily .mainVisual .mv_ttl {
  top: 6.5rem;
}
.generic_oily .mv_ttl {
  font-size: 6.2rem;
  line-height: 1;
}
.generic_oily .mv_ttl .small {
  font-size: 4.2rem;
}
.generic_roughskin .mainVisual .mv_ttl {
  line-height: 1.25;
}
.generic_roughskin .mv_ttl {
  font-size: 5.2rem;
}
.generic_pimples .mainVisual .mv_ttl {
  top: 5rem;
}
.generic_pimples .mv_ttl {
  font-size: 6.2rem;
  line-height: 1.25;
}
.generic_pimples .mv_ttl .small {
  font-size: 4.2rem;
}
/* 定期流入除外cta出し分け */
.teiki_exclusion .buy_teiki {
  display: none;
}
.teiki_exclusion .buy_wrap {
  background: url(../img/buy_bg.webp);
  background-size: cover;
  padding-bottom: 0rem;
  background-position:center;
}
.teiki_exclusion .buy {
  display: block;
  padding: 0;
  background: none;
}
.teiki_exclusion .buy .buy_first {
  width: 100%;
  min-height: auto;
  border-radius: 0;
  padding: 0;
  position: relative;
}
.teiki_exclusion .buy .buy_first_img {
  margin-bottom: 0;
}
.teiki_exclusion .buy .buy_btn a {
  display: block;
  color: #fff;
  font-size: 4rem;
  font-weight: 300;
  background: #001388;
  border: 2px solid #001388;
  width: 84%;
  height: 14rem;
  padding: 1.5rem 0;
  padding-top: 1.8rem;
  border-radius: 100px;
  box-sizing: border-box;
  transition: 0.3s;
  position: absolute;
  bottom: 13rem;
  right: 0;
  left: 0;
  margin: auto;
  line-height: 1.5;
  letter-spacing: 1rem;
}
.teiki_exclusion .buy .buy_btn a span {
  display: block;
  font-size: 2.2rem;
  letter-spacing: 0.5rem;
  text-decoration: underline;
}
.teiki_exclusion .buy .buy_btn a:before,
.teiki_exclusion .buy .buy_btn a:after {
  display: none;
}
.no-paypay .first_time.cv_mask .mv_caution_txt {
    top: 60rem;
}
.teiki_exclusion.no-paypay .first_time.cv_mask .mv_caution_txt {
    top: 60rem;
}
/* モーダルCSS */
#openModal {
  text-decoration: underline;
  cursor: pointer;
}
#openModal:hover {
  opacity: 0.8;
}
.modalArea {
display: none;
position: fixed;
z-index: 10; /*サイトによってここの数値は調整 */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modalBg {
width: 100%;
height: 100%;
background-color: rgba(30,30,30,0.9);
}
.modalWrapper {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 80%;
max-width: 570px;
}
.modalContents {
position: relative;
}
.closeModal {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 3rem;
font-size: 0;
cursor: pointer;
}

/* movie */
.lp-contents video {
	width: 100%;
	display: block;
}

/* first_time */
.first_time {
  background: #00118a;
  position: relative;
}
.buy_wrap01 .first_time,
.buy_wrap02 .first_time
{
  padding: 0;
}
.first_time:after {
  content: "";
  width: 100%;
  height: 1px;
  background: #001388;
  position: absolute;
  top: 2.3rem;
  left: 0;
  right: 0;
  margin: auto;
}
.first_time .first_time_ttl {
  font-size: 3.072rem;
  font-weight: bold;
  letter-spacing: 0.5rem;
  border: 1px solid #001388;
  background: #c8d9ed;
  border-radius: 10px;
  vertical-align: middle;
  line-height: 1.5;
  box-sizing: border-box;
  width: 20rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.first_time .first_time_btn a {
  display: block;
  color: #fff;
  font-size: 3.925rem;
  font-weight: 300;
  background: #001388;
  border: 2px solid #001388;
  width: 92%;
  margin: 0 auto 14.7rem;
  padding: 1.5rem 0;
  border-radius: 100px;
  letter-spacing: 1.5rem;
  position: relative;
  box-sizing: border-box;
  transition: 0.3s;
}
.first_time .first_time_btn a:before,
.first_time .first_time_btn a:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 3.6rem;
  width: 2.3rem;
  height: 0.2rem;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: calc(100% - 1px) 50%;
}
.first_time .first_time_btn a:before {
  transform: rotate(45deg);
}
.first_time .first_time_btn a:after {
  transform: rotate(-45deg);
}
.first_time .first_time_btn a:hover {
  color: #001388;
  background: #fff;
}
.first_time .first_time_btn a:hover:before,
.first_time .first_time_btn a:hover:after {
  background-color: #001388;
}
.first_time .first_time_caution {
  color: #001388;
  width: 93.2%;
  margin: 0 auto;
  padding: 2.4rem 0;
  background: #e8eff8;
  border: 1px solid #a1afc8;
  box-sizing: border-box;
  font-size: 2.13rem;
  line-height: 1.7;
}
.first_time .under_line {
  text-decoration: underline;
}
/* skinpeel mask */
.skinpeelmask {
  background: #fff;
}
/* special_movie */
.special_movie_wrap {
  margin: 0;
  padding: 0
}
.special_movie_wrap .special_movie {
  margin: 0;
  padding: 0
}
/* voce */
.voce {
  background: #fff;
}
/* mask */
.first_time {
  position: relative;
}
.first_time.cv_mask:after {
  display: none;
}
.first_time.cv_mask .first_time_btn {
  position: absolute;
  top: 43rem;
  left: 0;
  right: 0;
  margin: auto;
}
.first_time.cv_mask .first_time_btn a {
  width: 84%;
  height: 14rem;
  font-size: 4rem;
  padding-top: 1.8rem;
  line-height: 1.5;
  letter-spacing: 1rem;
}
.first_time.cv_mask .first_time_btn a span {
  display: block;
  font-size: 2.2rem;
  letter-spacing: 0.5rem;
  text-decoration: underline;
}
.first_time.cv_mask .mv_caution_txt {
  width: 85%;
  margin: 0 auto;
  font-size: 1.536rem;
  line-height: 1.5;
  color: #9a9a9a;
  text-align: left;
  position: absolute;
  top: 79rem;
  left: 0;
  right: 0;
}

/* change */
.change .change_head {
  position: relative;
}
.change .change_head_txt {
  position: absolute;
  text-align: left;
  top: 14.4rem;
  left: 1.8rem;
}
.change .change_head_txt p {
  font-size: 2.56rem;
  margin-bottom: 3.2rem;
}
.change .change_head_ttl {
  font-size: 5.83rem;
  padding-left: 2.4rem;
  line-height: 1.5;
  letter-spacing: -0.2rem;
  position: relative;
}
.change .change_content {
  padding: 6.9rem 0 3.7rem;
  background-image: url(../img/change_content_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.change .change_content:after {
  content: "";
  width: 20.5rem;
  height: 58.3rem;
  background-image: url(../img/change_item.webp);
  background-size: cover;
  position: absolute;
  top: 50.9rem;
  left: 4.2rem;
  z-index: 3;
}
.change .change_content_ttl {
  font-size: 2.485rem;
  letter-spacing: 0.3rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}
.change .change_content_ttl_l {
  font-size: 5.632rem;
  font-weight: bold;
  margin-bottom: 14.2rem;
  position: relative;
  line-height: 1;
}
.change .change_content_ttl_l:before,
.change .change_content_ttl_l:after {
  content: "";
  position: absolute;
  bottom: -5.5rem;
  left: calc(50% - 1px);
  width: 0.2rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: #cad7e7;
  transform-origin: 50% calc(100% - 1px);
}
.change .change_content_ttl_l:before {
  transform: rotate(60deg);
}
.change .change_content_ttl_l:after {
  transform: rotate(-60deg);
}
.change .change_content_ttl_l .small {
  font-size: 4.8rem;
}
.change .change_content_ttl_af {
  font-size: 3.925rem;
  font-weight: bold;
  margin-bottom: 4.6rem;
  position: relative;
}
.change .change_content_ttl_af:before,
.change .change_content_ttl_af:after {
  content: "";
  position: absolute;
  top: -10rem;
  left: calc(50% - 1px);
  width: 0.2rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: #cad7e7;
  transform-origin: 50% calc(100% - 1px);
}
.change .change_content_ttl_af:before {
  transform: rotate(60deg);
}
.change .change_content_ttl_af:after {
  transform: rotate(-60deg);
}
.change .change_content_ttl_af sup {
  font-size: 2.3rem;
}
.change .change_content_ttl_af .num {
  font-size: 4.8rem;
}
.change .change_feature {
  background-image: url(../img/change_feature_bg.webp);
  background-size: cover;
  border-radius: 37px;
  width: 37rem;
  min-height: 52.6rem;
  margin: 0 0 14.8rem 22.5rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.change .change_feature:before {
  content: '';
  border-radius: 100%;
  width: 65rem;
  height: 100rem;
  position: absolute;
  top: -25rem;
  right: -12.5rem;
  background: #fafdfe;
  z-index: 2; /* 背景画像の上に表示 */
  transform: rotate(135deg);
}
.change .change_feature.show:before {
  animation: moveDiagonal 2.5s ease-in-out forwards;
}
@keyframes moveDiagonal {
  0% {
    transform: translate(0, 0); /* 初期位置（左下） */
  }
  100% {
    transform: translate(65rem, -100rem); /* 右上へ移動 */
  }
}
.change .change_feature_list {
  padding: 5.9rem 3.9rem 0 9rem;
  position: relative;
  z-index: 3;
}
.change .change_feature_item {
  font-size: 2.731rem;
  font-weight: bold;
  color: #333;
  text-align: left;
  letter-spacing: 0.2rem;
  margin-bottom: 6.2rem;
  position: relative;
}
.change .change_feature_item:before {
  content: "";
  width: 3.2rem;
  height: 2.6rem;
  background-image: url(../img/check_icon.webp);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4.2rem;
  margin: auto;
}
.change .change_feature_item:after {
  content: "";
  width: 0%;
  height: 1.7rem;
  background: rgb(140,177,240);
  background: linear-gradient(90deg, rgba(140,177,240,1) 0%, rgba(72,132,231,1) 50%, rgba(15,93,223,1) 100%);
  border-radius: 0.2rem;
  position: absolute;
  left: 0;
  bottom: -2.8rem;
  transition: 2s;
}
.change .change_feature_item:nth-child(1).js-anim.is-open:after {
  width: 75%;
}
.change .change_feature_item:nth-child(2).js-anim.is-open:after {
  width: 50%;
}
.change .change_feature_item:nth-child(3).js-anim.is-open:after {
  width: 100%;
}
.change .change_feature_item:nth-child(4).js-anim.is-open:after {
  width: 50%;
}
.change .change_feature_item:nth-child(5).js-anim.is-open:after {
  width: 20%;
}
.change .change_feature_item sup {
  font-size: 1.8rem;
}
.change .change_caution {
  width: 86%;
  margin: 0 auto;
  text-align: left;
  font-size: 1.707rem;
  color: #333;
  line-height: 1.72;
}
/* buy */
.buy_wrap {
  background: url(../img/buy_bg.webp);
  background-size: cover;
  padding-bottom: 4rem;
  background-position:center;
}
.buy {
  padding: 3.3rem 0 4rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
.buy .buy_first,
.buy .buy_teiki {
  background: #fff;
  min-height: 63.6rem;
  border-radius: 30px;
  padding: 2.7rem 0 0 0;
  box-sizing: border-box;
}
.buy .buy_first {
  width: 28.3rem;
}
.buy .buy_teiki {
  width: 29.7rem;
}
.buy .buy_first_img,
.buy .buy_teiki_img {
  margin-bottom: 2.8rem;
  display: block;
}
.buy .buy_btn a {
  width: 25.7rem;
  min-height: 8.6rem;
  display: block;
  color: #fff;
  background: #001388;
  font-size: 2.731rem;
  border: 2px solid #001388;
  border-radius: 10rem;
  padding: 1.49rem 1.4rem 1.49rem 0;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  transition: 0.3s;
}
.buy .buy_btn a:before,
.buy .buy_btn a:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 1.8rem;
  width: 1.5rem;
  height: 2px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: calc(100% - 1px) 50%;
}
.buy .buy_btn a:before {
  transform: rotate(45deg);
}
.buy .buy_btn a:after {
  transform: rotate(-45deg);
}
.buy .buy_btn a:hover {
  color: #001388;
  background: #fff;
}
.buy .buy_btn a:hover:before,
.buy .buy_btn a:hover:after {
  background-color: #001388;
}
.buy_wrap .line_bnr {
  width: 50rem;
  margin: 0 auto;
}

/* skin */
.skin .skin_sec01 {
  background: #edf3f9;
  padding: 8rem 0 7.8rem;
}
.skin .skin_sec01_intro_txt {
  font-size: 2.901rem;
  font-weight: bold;
  line-height: 1.65;
  margin-bottom: 7rem;
}
.skin .skin_sec01_intro_img {
  margin-bottom: 9.6rem;
}
.skin .skin_sec01_mid_txt {
  font-size: 5.376rem;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 9rem;
  position: relative;
}
.skin .skin_sec01_mid_txt:before,
.skin .skin_sec01_mid_txt:after {
  content: "";
  position: absolute;
  bottom: -4rem;
  left: calc(50% - 1px);
  width: 0.2rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: #cad7e7;
  transform-origin: 50% calc(100% - 1px);
}
.skin .skin_sec01_mid_txt:before {
  transform: rotate(60deg);
}
.skin .skin_sec01_mid_txt:after {
  transform: rotate(-60deg);
}
.skin .skin_sec01_mid_txt .small {
  font-size: 3.584rem;
}
.skin .skin_sec01_bt_txt {
  font-size: 4.437rem;
  font-weight: bold;
  margin-bottom: 2.5rem;
  position: relative;
}
.skin .skin_sec01_bt_txt:before,
.skin .skin_sec01_bt_txt:after {
  content: "";
  position: absolute;
  top: -6.5rem;
  left: calc(50% - 1px);
  width: 0.2rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: #cad7e7;
  transform-origin: 50% calc(100% - 1px);
}
.skin .skin_sec01_bt_txt:before {
  transform: rotate(60deg);
}
.skin .skin_sec01_bt_txt:after {
  transform: rotate(-60deg);
}
.skin .skin_sec01_btaf_txt {
  font-size: 3.072rem;
  font-weight: bold;
  margin-bottom: 6.2rem;
}
.skin .skin_sec02 {
  position: relative;
}
.skin .skin_sec02_txt {
  position: absolute;
  top: 10.1rem;
  left: 0;
  right: 0;
  margin: auto;
}
.skin .skin_sec02_head_txt {
  font-size: 3.413rem;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 3.8rem;
}
.skin .skin_sec02_main_txt {
  font-size: 5.83rem;
  font-weight: bold;
}
.skin .skin_fact {
  position: relative;
  top: 3rem;
}
.skin .skin_fact_wrapper {
  overflow: hidden;
  height: 11.5rem;
  position: absolute;
  padding: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.skin .skin_fact_txt {
  font-size: 2.56rem;
  color: #001388;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.skin .move_line {
  display: inline-block;
  width: 1px;
  height: 12rem;
  background: #001388;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
  animation: moveline 2s ease-in-out infinite;
  transform: translateY(0%);
}
@keyframes moveline {
  0% {
    transform: translateY(-75%);
  }
  100% {
    transform: translateY(125%);
  }
}
.skin .move_txt {
  display: inline-block;
  position: relative;
  top: 2.3rem;
  z-index: 3;
}
.skin .move_txt img {
  width: 5.9rem;
}
.skin .skin_sec03 {
  padding: 6.9rem 0 5.5rem;
  background: #edf3f9;
}
.skin .skin_sec03_ttl {
  font-size: 4.693rem;
  line-height: 1.17;
  margin-bottom: 8.5rem;
}
.skin .skin_sec03_ttl .bold {
  font-weight: bold;
}
.skin .skin_sec03_mislead {
  width: 84%;
  min-height: 17.9rem;
  border: 2px solid #001388;
  padding: 2.5rem 2.9rem 1rem;
  margin: 0 auto 3.5rem;
  box-sizing: border-box;
  position: relative;
}
.skin .skin_sec03_mislead:before {
  content: "毛穴ケアのよくある誤解";
  font-size: 2.987rem;
  font-weight: bold;
  color: #001388;
  position: absolute;
  top: -3.1rem;
  left: 0;
  right: 0;
  margin: auto;
  letter-spacing: 0.2rem;
  background: #edf3f9;
  display: inline-block;
  width: 68%;
}
.skin .skin_sec03_mislead_txt {
  color: #333;
  font-size: 2.219rem;
  text-align: left;
  line-height: 1.5;
}
.skin .skin_sec03_so {
  font-size: 2.56rem;
  position: relative;
  margin-bottom: 5.1rem;
  position: relative;
}
.skin .skin_sec03_so:before,
.skin .skin_sec03_so:after {
  content: "";
  position: absolute;
  bottom: -2.5rem;
  left: calc(50% - 1px);
  width: 0.2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: #cad7e7;
  transform-origin: 50% calc(100% - 1px);
}
.skin .skin_sec03_so:before {
  transform: rotate(60deg);
}
.skin .skin_sec03_so:after {
  transform: rotate(-60deg);
}
.skin .skin_sec03_main_txt {
  font-size: 4.437rem;
  line-height: 1.5;
  margin-bottom: 2.6rem;
  position: relative;
}
.skin .skin_sec03_main_txt:before,
.skin .skin_sec03_main_txt:after {
  content: "";
  position: absolute;
  top: -3.5rem;
  left: calc(50% - 1px);
  width: 0.2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: #cad7e7;
  transform-origin: 50% calc(100% - 1px);
}
.skin .skin_sec03_main_txt:before {
  transform: rotate(60deg);
}
.skin .skin_sec03_main_txt:after {
  transform: rotate(-60deg);
}
.skin .skin_sec03_main_txt .bold {
  font-weight: bold;
}
.skin .skin_sec03_img01 {
  margin-bottom: 7.9rem;
}
.skin .skin_sec03_img02 {
  position: relative;
  margin-bottom: 3rem;
}
.skin .skin_sec03_img02_area {
  width: 31.1rem;
  min-height: 40.5rem;
  background: rgba( 255 , 255, 255 , 0.9 );
  position: absolute;
  top: 5.4rem;
  right: 4.3rem;
  padding: 6.3rem 1rem 2.5rem 2.5rem;
  box-sizing: border-box;
}
.skin .skin_sec03_img02_ttl {
  font-size: 3.413rem;
  font-weight: bold;
  text-align: left;
  line-height: 1.37;
  margin-bottom: 3rem;
}
.skin .skin_sec03_img02_txt {
  color: #333;
  font-size: 2.2rem;
  text-align: left;
  letter-spacing: 0.3rem;
  line-height: 1.8;
}
.skin .skin_sec03_img03 {
  margin-bottom: 3.8rem;
}
.skin .skin_sec03_bt_area {
  width: 84%;
  margin: 0 auto;
  text-align: left;
  line-height: 1.4;
  letter-spacing: 0.2rem;
}
.skin .skin_sec03_bt_txt01 {
  color: #333;
  font-size: 2.389rem;
  margin-bottom: 0.4rem;
}
.skin .skin_sec03_bt_txt02 {
  font-size: 2.389rem;
}

/* idea */
.idea {
  padding: 50.6rem 0 8rem;
  background-image: url(../img/idea_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
}
.idea .idea_ttl {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 3rem;
}
.idea .idea_icon_img {
  margin-bottom: 2.3rem;
}
.idea .idea_icon_img img {
  width: 58.7rem;
  margin: 0 auto;
  box-shadow: 0.8rem 0.8rem 3rem 0.8rem rgba(0, 7, 62, 0.085);
}
.idea .idea_caution {
  width: 89%;
  color: #333;
  text-align: left;
  font-size: 1.707rem;
  opacity: 0.5;
  line-height: 1.4;
  margin: 0 auto;
}

/* step */
.step {
  background: #f4f6fa;
  padding: 9.8rem 0 7.3rem;
}
.step .step_ttl {
  font-size: 4.267rem;
  font-weight: bold;
  margin-bottom: 1.6rem;
  letter-spacing: 0.5rem;
}
.step .step_txt {
  color: #1b224e;
  font-size: 2.901rem;
  margin: 0 auto 3.5rem;
  line-height: 1.85;
  letter-spacing: 0.1rem;
}
/* cosme */
.cosme {
  background: #f0f5f9;
}
.cosme .cosme_slider_ttl {
  font-size: 4.608rem;
  font-weight: 500;
  letter-spacing: 0.4rem;
  margin: 5rem auto 3rem;
  line-height: calc(64/46);
}
.cosme .cosme_slider_txt {
  font-size: 2.4rem;
  margin-top: 1.2rem;
  letter-spacing: 0.2rem;
}
.cosme .cosme_slider_link a {
  display: inline-block;
  color: #6a88b1;
  font-size: 2.4rem;
  margin-top: 1.2rem;
  letter-spacing: 0.2rem;
  text-decoration: underline;
  transition: 0.3s;
}
.cosme .cosme_slider_link a:hover {
  opacity: 0.7;
  text-decoration: none;
}
.cosme .slick-list {
  width: 100%;
}
.cosme .slick-dots {
  bottom: 0.7rem;
  line-height: 1.5;
}
.cosme .slick-dots li {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0 0.5rem;
  border: 1px solid #001388;
  background: transparent;
}
.cosme .slick-dots li.slick-active {
  background: #001388;
}
.cosme .slick-prev,
.cosme .slick-next {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-image: url(../img/arrow_r.webp);
}
.cosme .slick-next {
  right: 1.9rem;
}
.cosme .slick-prev {
  left: 2.1rem;
  background-image: url(../img/arrow_l.webp);
}
/* check */
.check {
  position: relative;
}
.check .check_top {
  background: #CDE1FA;
  background: linear-gradient(180deg,rgba(205, 225, 250, 0.2) 0%, rgba(255, 255, 255, 1) 34%);
  padding-bottom: 2.8rem;
  position: relative;
}
.check .check_top_ttl {
  font-size: 5.8rem;
  font-weight: 400;
  padding: 6.9rem 0 0;
  margin-bottom: 1.8rem;
  letter-spacing: 0.2rem;
  position: relative;
  z-index: 1;
}
.check .check_top_ttl:before {
  content: "";
  width: 50rem;
  height: 3rem;
  background: #d4e4fb;
  position: absolute;
  bottom: -0.5rem;
  right: 0;
  left: 0;
  margin: auto;
  z-index: -1;
}
.check .check_top_txt {
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1rem;
  margin-bottom: 1.3rem;
}
.check .check_top_txt_bottom {
  color: #333;
  font-size: 2.3rem;
  font-weight: 400;
  letter-spacing: 0.2rem;
}
.check .check_top_txt_bottom:before {
  content: "";
  display: inline-block;
  width: 5.6rem;
  height: 5.5rem;
  background-image: url(../img/swipe_icon.webp);
  background-size: cover;
  position: relative;
  top: 1.4rem;
  margin-right: 1.4rem;
}
.check .check_slide_bottom_wrap {
  padding: 2rem 0 1.5rem; 
  background-image: url(../img/check_slide_bottom_bg.webp);
  background-size: cover;
  min-height: 46.5rem;
}
.check .check_slide_log {
  margin-bottom: 2.7rem;
}
.check .check_slide_txt {
  font-size: 2.23rem;
  font-weight: 400;
  color: #000;
  line-height: 1.83947;
  text-align: left;
  padding: 0 8.3rem;
  letter-spacing: 0.2rem;
}
.check .check_bottom_caution {
  font-size: 1.934rem;
  font-weight: 400;
  text-align: right;
  color: #333;
  padding-right: 2rem;
  margin-bottom: 7rem;
}
.check .slick-list {
  width: 100%;
}
.check .slick-dots {
  bottom: -8.7rem;
}
.check .slick-dots li {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0 0.5rem;
  border: 1px solid #001388;
  background: transparent;
}
.check .slick-dots li.slick-active {
  background: #001388;
}
.check .slick-prev,
.check .slick-next {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-image: url(../img/arrow_r.webp);
  top: 76.5%;
}
.check .slick-next {
  right: 1.9rem;
}
.check .slick-prev {
  left: 2.1rem;
  background-image: url(../img/arrow_l.webp);
}
/* qa */
.qa {
  padding: 8.4rem 0 7.5rem;
  background: #fff;
  background-image: linear-gradient(180deg, rgba(244, 246, 250, 1), rgba(255, 255, 255, 1));
}
.qa .qa_ttl {
  margin-bottom: 3.7rem;
  width: 13rem;
  margin: 0 auto 1.5rem;
  position: relative;
}
.qa .qa_ttl:before {
  content: "";
  background-image: url(../img/matomete.webp);
  width: 9.7rem;
  height: 9.7rem;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 4.7rem;
  right: 14.5rem;
  margin: auto;
}
.qa .qa_ttl_bt_txt {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  color: #001388;
  font-weight: bold;
  font-size: 3.2rem;
}
.qa .qa_ac_wrapper {
  margin: 0 3.4rem;
}
.qa .qa_ac_article {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  font-size: 2.2rem;
  font-weight: 500;
  color: #fff;
  background: #001388;
  margin: 5.2rem -3.4rem 2.1rem; 
  padding: 1.3rem 0;
}
.qa .qa_ac_article:first-child {
  margin-top: 0;
}
.qa .qa_ac {
  background-color: #fff;
  border-radius: 2rem;
  padding: 2.5rem 0;
  box-shadow: 0 0.3rem 1.5rem 0 rgba(0, 7, 62, 0.35);
  margin-bottom: 1em;
  text-align: left;
}
.qa .qa_ac_ttl {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  color: #001388;
  font-size: 2.219rem;
  font-weight: bold;
  padding-left: 6.8rem;
  padding-right: 3em;
  position: relative;
}
.qa .qa_ac_ttl::before {
  content: "Q. ";
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 2.56rem;
  position: absolute;
  top: -0.4rem;
  left: 2.7rem;
}
.qa .qa_ac_ttl:hover {
  cursor: pointer;
}
.qa .qa_ac_box {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.8rem;
  background-color: #001388;
  width: 3.84rem;
  height: 3.84rem;
  border-radius: 50%;
  z-index: 1;
}
.qa .qa_ac_inner_01 {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 1px;
  height: 1.6rem;
  background-color: #fff;
  transform-origin: center;
  transition-duration: 0.2s;
  z-index: 2;
}
.qa .qa_ac_inner_02 {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 1.6rem;
  height: 1px;
  background-color: #fff;
  transform-origin: center;
  transition-duration: 0.2s;
  z-index: 2;
}
.qa .qa_ac_ttl.active .qa_ac_inner_01 {
  opacity: 0;
}
.qa .qa_ac_ttl.active .qa_ac_inner_02 {
  transform: translate(-50%, -50%) rotate(180deg);
  transform-origin: center;
}
.qa .qa_ac_content {
  padding: 4.5rem 2.2rem 0 6.9rem;
}
.qa .qa_ac_desc {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  color: #333;
  font-size: 2.219rem;
  position: relative;
  line-height: 1.9;
}
.qa .qa_ac_desc:before {
  content: "A. ";
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  color: #6a88b1;
  font-size: 2.56rem;
  position: absolute;
  top: -0.4rem;
  left: -4.1rem;
}
.qa .qa_ac_note {
  display: block;
  font-size: 1.707rem;
}
.qa .qa_ac_youtube {
  width: 90%;
  margin: 5% auto 0;
}
.qa .qa_ac_youtube iframe {
  width: 100%;
  height: 24.4rem;
}

/* brand */
.brand {
  background: #fff;
}
.brand .brand_head {
  padding: 8.1rem 0 46rem;
  background-image: url(../img/brand_head_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
}
.brand .brand_ttl {
  font-size: 4.352rem;
  font-weight: bold;
  line-height: 1.5;
}
.brand .brand_txt_area {
  padding: 30px 5rem 0;
  text-align: left;
}
.brand .brand_txt {
  color: #333;
  font-size: 2.133rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.brand .brand_caution {
  color: #333;
  font-size: 1.963rem;
}
/* footer */
footer {
  background-color: #f8f8f8;
  padding-bottom: 15.4rem;
}
footer .logo {
  padding: 11rem 0 8rem;
  background: #fff;
}
footer .logo img {
  width: 15.9rem;
  margin: 0 auto;
}
footer .nav {
  margin-bottom: 5.866%;
  padding: 2% 5.333% 0;
  text-align: left;
}
footer .nav li {
  border-bottom: 1px solid #e4e4e4;
}
footer .nav li a {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  padding: 1em 0 1em 0.5em;
  color: #333;
  text-decoration: none;
  display: block;
  position: relative;
  transition: 0.3s;
}
footer .nav li a:hover {
  text-decoration: underline;
  opacity: 0.7;
  transform: scale(0.98);
}
footer .nav li a::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
footer .copy {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  color: #333;
  font-size: 1.707rem;
  text-align: center;
  padding-bottom: 8%;
}
.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  max-width: 100%;
  opacity: 0;
  transform: translateY(100%);
  transition: all .5s;
}
.sticky.is-fixed {
opacity: 1;
transform: translateY(0);
}

/* ----------------------------------------
about mask
---------------------------------------- */
#about_mask .txt {
  color: #313131;
	margin-top: -240px;
	padding: 0 50px 50px;
	font-size: 22px;
	line-height: calc(35/22);
	text-align: left;
}
@media screen and (max-width: 767px) {
	#about_mask .txt {
		margin-top: -37.5vw;
		font-size: 3.44vw;
		padding: 0 7.81vw 7.81vw;
	}
}
#about_mask .notes {
	display: block;
	padding: 20px 0 0;
	font-size: 14px;
}
@media screen and (max-width: 767px) {
	#about_mask .notes {
		padding: 3.13vw 0 0;
		font-size: 2.19vw;
	}
}
#about_mask .mask_link {
	color: #001388;
	font-size: 22px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 30px 30px 0 0;
}
@media screen and (max-width: 767px) {
	#about_mask .mask_link {
		margin: 4.69vw 4.69vw 0 0;
		font-size: 3.44vw;
	}
}
#about_mask .mask_link a {
  color: #001388;
	text-decoration: underline;
	font-weight: bold;
	padding-right: 4px;
}
#about_mask .mask_cm_list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 50px 80px;
}
@media screen and (max-width: 767px) {
	#about_mask .mask_cm_list {
		padding: 0 6.67vw 10.67vw;
	}
}
#about_mask .mask_cm_list li {
	cursor: pointer;
	position: relative;
}
#about_mask .mask_cm_list li:after {
	content: '';
	display: block;
	width:0;
	height:0;
	border-style:solid;
	border-width: 10px 0 10px 14px;
	border-color: transparent transparent transparent #FFFFFF;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
@media screen and (max-width: 767px) {
	#about_mask .mask_cm_list li:after {
		border-width: 2.67vw 0 2.67vw 3.73vw;
	}
}
#about_mask .mask_cm_list li:before {
	content: '';
	display: block;
	border-radius: 50%;
	background: rgba(0,0,0,0.3);
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
@media screen and (max-width: 767px) {
	#about_mask .mask_cm_list li:before {
		width: 10.67vw;
		height: 10.67vw;
	}
}
#about_mask .mask_cm_list li:nth-child(1) {
	width: 100%;
	margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
	#about_mask .mask_cm_list li:nth-child(1) {
		margin-bottom: 4%;
	}
}
#about_mask .mask_cm_list li:nth-child(2) {
	width: 100%;
}
.modal-video-close-btn {
	cursor: pointer;
}
.mask_bnr {
  position: relative;
  z-index: 1;
}