@charset "UTF-8";
/*メディアクエリ*/
/*
@mixin mq_tb {
  @media screen and (min-width:769px) and (max-width:($mq_tb)) {
    @content;
  }
}
*/
/*
$tbBreakPoint: 1000;
@function tbVw($pxValue) {
	@return (($pxValue / $tbBreakPoint) * 100) + vw;
}
*/
html, body {
  margin: 0;
  padding: 0;
}

.sno_contents * {
  /* =========================================================
    reset
  ========================================================== */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
  line-height: 1;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
.sno_contents * div, .sno_contents * iframe, .sno_contents * h1, .sno_contents * h2, .sno_contents * h3, .sno_contents * h4, .sno_contents * h5, .sno_contents * h6, .sno_contents * p, .sno_contents * img, .sno_contents * small, .sno_contents * strong, .sno_contents * b, .sno_contents * dl, .sno_contents * dt, .sno_contents * dd, .sno_contents * ol, .sno_contents * ul, .sno_contents * li,
.sno_contents * form, .sno_contents * label, .sno_contents * legend, .sno_contents * table, .sno_contents * tbody, .sno_contents * tfoot, .sno_contents * thead, .sno_contents * tr, .sno_contents * th, .sno_contents * td, .sno_contents * footer, .sno_contents * header, .sno_contents * menu, .sno_contents * nav, .sno_contents * section, .sno_contents * video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: bottom;
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.sno_contents * ul li {
  list-style: none;
}
.sno_contents * a {
  margin: 0;
  padding: 0;
  color: #43413a;
  text-decoration: none;
  vertical-align: baseline;
}
.sno_contents * a:hover {
  opacity: 0.8;
}
.sno_contents * table {
  border-spacing: 0;
}
.sno_contents * img {
  width: 100%;
  border: none;
  vertical-align: bottom;
  max-width: 100%;
}

/* =========================================================
  resetここまで
========================================================== */
.sno_contents * {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1;
}
@media screen and (max-width: 750px) {
  .sno_contents * {
    font-size: 3.7333333333vw;
  }
}
.sno_contents * .mincho {
  font-family: "Noto Serif JP", serif;
}
.sno_contents * a {
  text-decoration: none;
}
.sno_contents * a:hover img {
  opacity: 0.8;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.sno_contents * sup {
  font-size: 0.6em;
  vertical-align: super;
}

@media (min-width: 751px) {
  .sp_only {
    display: none !important;
  }
}
@media screen and (max-width: 750px) {
  .pc_only {
    display: none !important;
  }
}
/********************************
	flexbox 基本class
	wrapやjustify-contentの指定は個別のcss classで追記する
********************************/
*.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.sno_contents {
  position: relative;
  width: 750px;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .sno_contents {
    width: 100%;
  }
}

.sno_contents {
  /**-----------------------------
    FV
  -----------------------------**/
}
.sno_contents #fv {
  position: relative;
  height: 1200px;
  background: url(../images/fv_bg.jpg) center top no-repeat;
  background-size: 750px 1200px;
}
@media screen and (max-width: 750px) {
  .sno_contents #fv {
    height: 160vw;
    background-size: 100vw 160vw;
  }
}
.sno_contents #fv .fv_img1 {
  width: 100%;
}
.sno_contents #fv .fv_text_wrap {
  position: absolute;
  top: 598px;
  left: 0;
}
@media screen and (max-width: 750px) {
  .sno_contents #fv .fv_text_wrap {
    top: 79.7333333333vw;
    left: 0;
  }
}
.sno_contents #fv .fv_text_wrap .fv_text {
  font-size: 26px;
  color: #ffffff;
  letter-spacing: 0.08em;
  line-height: 46px;
  padding: 0 12px 0 35px;
  height: 46px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: rgba(141, 182, 199, 0.77);
  margin-bottom: 6px;
}
@media screen and (max-width: 750px) {
  .sno_contents #fv .fv_text_wrap .fv_text {
    font-size: 3.4666666667vw;
    line-height: 6.1333333333vw;
    padding: 0 1.6vw 0 4.6666666667vw;
    height: 6.1333333333vw;
    margin-bottom: 0.8vw;
  }
}
.sno_contents {
  /**------------------------------------------
    cta1:初回1,980円で気軽に始められます
  ------------------------------------------**/
}
.sno_contents #cta1 {
  position: relative;
  background: url(../images/cta1_bg.jpg) center top no-repeat;
  height: 2174px;
}
@media screen and (max-width: 750px) {
  .sno_contents #cta1 {
    height: 289.8666666667vw;
    background-size: 100vw 289.8666666667vw;
  }
}
.sno_contents #cta1.cta2 {
  margin-top: 70px;
  background: url(../images/cta2_bg.jpg) center top no-repeat;
  height: 2174px;
}
@media screen and (max-width: 750px) {
  .sno_contents #cta1.cta2 {
    margin-top: 9.3333333333vw;
    background: url(../images/cta2_bg.jpg) center top no-repeat;
    height: 289.8666666667vw;
    background-size: 100vw 289.8666666667vw;
  }
}
.sno_contents #cta1 .cta1_img1 {
  width: 100%;
}
.sno_contents #cta1 .cta_btn1 {
  display: block;
  margin: 0 auto 35px;
  width: 608px;
  height: 132px;
  -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.2));
}
@media screen and (max-width: 750px) {
  .sno_contents #cta1 .cta_btn1 {
    margin: 0 auto 4.6666666667vw;
    width: 81.0666666667vw;
    height: 17.6vw;
  }
}
.sno_contents #cta1 .cta1_img2 {
  width: 100%;
}
.sno_contents #cta1 .cta_text1 {
  position: absolute;
  top: 188px;
  width: 100%;
  font-size: 26px;
  color: #ffffff;
  letter-spacing: 0.08em;
  text-align: center;
}
.sno_contents #cta1 .cta_text1 span {
  font-size: 30px;
}
@media screen and (max-width: 750px) {
  .sno_contents #cta1 .cta_text1 {
    top: 25.0666666667vw;
    width: 100%;
    font-size: 3.4666666667vw;
  }
  .sno_contents #cta1 .cta_text1 span {
    font-size: 4vw;
  }
}
.sno_contents #cta1 .cta_text2 {
  position: absolute;
  top: 570px;
  left: 80px;
  font-size: 26px;
  color: #333333;
}
@media screen and (max-width: 750px) {
  .sno_contents #cta1 .cta_text2 {
    top: 76vw;
    left: 10.6666666667vw;
    font-size: 3.4666666667vw;
  }
}
.sno_contents #cta1 .cta_text3 {
  position: absolute;
  top: 1070px;
  left: 60px;
  font-size: 26px;
  color: #333333;
  line-height: 36px;
}
@media screen and (max-width: 750px) {
  .sno_contents #cta1 .cta_text3 {
    top: 142.6666666667vw;
    left: 8vw;
    font-size: 3.4666666667vw;
    line-height: 4.8vw;
  }
}
.sno_contents #cta1 .cta_textbox {
  width: 100%;
  padding: 42px 62px 0;
}
@media screen and (max-width: 750px) {
  .sno_contents #cta1 .cta_textbox {
    padding: 5.6vw 8.2666666667vw 0;
  }
}
.sno_contents #cta1 .cta_textbox .cta_info_text {
  font-size: 20px;
  color: #333333;
  line-height: 36px;
  padding-left: 1em; /* 全体を1文字分右に下げる */
  text-indent: -1em; /* 1行目のみ1文字分左に戻す */
}
.sno_contents #cta1 .cta_textbox .cta_info_text strong {
  font-size: 22px;
  line-height: 36px;
}
@media screen and (max-width: 750px) {
  .sno_contents #cta1 .cta_textbox .cta_info_text {
    font-size: 2.6666666667vw;
    line-height: 4.8vw;
    padding-left: 1em; /* 全体を1文字分右に下げる */
    text-indent: -1em; /* 1行目のみ1文字分左に戻す */
  }
  .sno_contents #cta1 .cta_textbox .cta_info_text strong {
    font-size: 2.9333333333vw;
    line-height: 4.8vw;
  }
}
.sno_contents {
  /**------------------------------------------
    sec01:こんな肌悩み、ありませんか？
  ------------------------------------------**/
}
.sno_contents #sec01 {
  position: relative;
  background: url(../images/sec01_bg.jpg) center top no-repeat;
  height: 1731px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec01 {
    background-size: 100vw 230.8vw;
    height: 230.8vw;
  }
}
.sno_contents #sec01 .sec01_img1 {
  width: 100%;
}
.sno_contents #sec01 .sec01_checklist {
  width: 650px;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec01 .sec01_checklist {
    width: 86.6666666667vw;
    margin: 0 auto;
  }
}
.sno_contents #sec01 .sec01_checklist li {
  position: relative;
  padding: 26px 0 29px 80px;
  border-bottom: 1px #5b89a2 solid;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec01 .sec01_checklist li {
    padding: 3.4666666667vw 0 3.8666666667vw 10.6666666667vw;
  }
}
.sno_contents #sec01 .sec01_checklist li .li_text {
  font-size: 30px;
  line-height: 46px;
  color: #4d4d4d;
  letter-spacing: 0.04em;
}
.sno_contents #sec01 .sec01_checklist li .li_text span {
  color: #5b89a2;
  line-height: inherit;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec01 .sec01_checklist li .li_text {
    font-size: 4vw;
    line-height: 6.1333333333vw;
  }
}
.sno_contents #sec01 .sec01_checklist li::before {
  position: absolute;
  content: "";
  top: 28px;
  left: 18px;
  width: 41px;
  height: 41px;
  background: url(../images/sec01_check_icon.png) center top no-repeat;
  background-size: contain;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec01 .sec01_checklist li::before {
    top: 3.7333333333vw;
    left: 2.4vw;
    width: 5.4666666667vw;
    height: 5.4666666667vw;
  }
}
.sno_contents #sec01 .sec01_img2 {
  width: 100%;
}
.sno_contents {
  /**--------------------------------------------------
    sec02: 皮脂が気になる肌には、“落とすだけ”では足りないことも。
  --------------------------------------------------**/
}
.sno_contents #sec02 {
  position: relative;
  background: url(../images/sec02_bg.jpg) center top no-repeat;
  height: 2370px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec02 {
    background-size: 100vw 316vw;
    height: 316vw;
  }
}
.sno_contents #sec02 .sec02_img1 {
  width: 100%;
}
.sno_contents #sec02 .sec02_text1 {
  position: absolute;
  top: 352px;
  left: 0;
  width: 100%;
  font-size: 28px;
  line-height: 44px;
  color: #333333;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec02 .sec02_text1 {
    top: 46.9333333333vw;
    left: 0;
    width: 100%;
    font-size: 3.7333333333vw;
    line-height: 5.8666666667vw;
  }
}
.sno_contents #sec02 .sec02_img2 {
  width: 100%;
}
.sno_contents #sec02 .sec02_text2 {
  position: absolute;
  right: 48px;
  bottom: 418px;
  width: 37px;
  height: 500px;
  background: #9e8cd1;
  background: -webkit-gradient(linear, left top, left bottom, from(#92d2ff), to(#9e8cd1));
  background: linear-gradient(#92d2ff 0%, #9e8cd1 100%);
  font-size: 29px;
  color: #ffffff;
  letter-spacing: 0.26em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  line-height: 37px;
  padding-top: 1em;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec02 .sec02_text2 {
    right: 6.4vw;
    bottom: 55.7333333333vw;
    width: 4.9333333333vw;
    height: 66.6666666667vw;
    font-size: 3.8666666667vw;
    line-height: 4.9333333333vw;
  }
}
.sno_contents {
  /**--------------------------------------------------
    sec03: 皮脂が気になる肌を、表面だけで終わらせない
  --------------------------------------------------**/
}
.sno_contents #sec03 {
  position: relative;
  background: url(../images/sec03_bg.jpg) center top no-repeat;
  height: 2640px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec03 {
    background-size: 100vw 352vw;
    height: 352vw;
  }
}
.sno_contents #sec03 .sec03_point {
  position: relative;
  width: 700px;
  -webkit-filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.2));
}
@media screen and (max-width: 750px) {
  .sno_contents #sec03 .sec03_point {
    width: 93.3333333333vw;
  }
}
.sno_contents #sec03 .sec03_point .point_img {
  width: 100%;
}
.sno_contents #sec03 .sec03_point .point_text {
  position: absolute;
  font-size: 26px;
  color: #55534c;
  letter-spacing: 0.08em;
  line-height: 44px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec03 .sec03_point .point_text {
    font-size: 3.4666666667vw;
    line-height: 5.8666666667vw;
  }
}
.sno_contents #sec03 .sec03_point.point1 {
  margin-left: 50px;
  margin-bottom: 24px;
}
.sno_contents #sec03 .sec03_point.point1 .point_text {
  top: 246px;
  left: 235px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec03 .sec03_point.point1 {
    margin-left: 6.6666666667vw;
    margin-bottom: 3.2vw;
  }
  .sno_contents #sec03 .sec03_point.point1 .point_text {
    top: 32.8vw;
    left: 31.3333333333vw;
  }
}
.sno_contents #sec03 .sec03_point.point2 {
  margin-right: 50px;
  margin-bottom: 24px;
}
.sno_contents #sec03 .sec03_point.point2 .point_text {
  top: 202px;
  left: 100px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec03 .sec03_point.point2 {
    margin-right: 6.6666666667vw;
    margin-bottom: 3.2vw;
  }
  .sno_contents #sec03 .sec03_point.point2 .point_text {
    top: 26.9333333333vw;
    left: 13.3333333333vw;
  }
}
.sno_contents #sec03 .sec03_point.point3 {
  margin-left: 50px;
  -webkit-filter: none;
          filter: none;
}
.sno_contents #sec03 .sec03_point.point3 .point_text {
  width: 408px;
  top: 200px;
  left: 237px;
}
.sno_contents #sec03 .sec03_point.point3 .point_text .point_note {
  font-size: 20px;
  line-height: 30px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec03 .sec03_point.point3 {
    margin-left: 6.6666666667vw;
    -webkit-filter: none;
            filter: none;
  }
  .sno_contents #sec03 .sec03_point.point3 .point_text {
    width: 54.4vw;
    top: 26.6666666667vw;
    left: 31.6vw;
  }
  .sno_contents #sec03 .sec03_point.point3 .point_text .point_note {
    font-size: 2.6666666667vw;
    line-height: 4vw;
  }
}
.sno_contents #sec03 .sec03_text1 {
  margin-top: 584px;
  margin-left: 53px;
  font-size: 26px;
  color: #3f7592;
  letter-spacing: 0.08em;
  line-height: 46px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec03 .sec03_text1 {
    margin-top: 77.8666666667vw;
    margin-left: 7.0666666667vw;
    font-size: 3.4666666667vw;
    line-height: 6.1333333333vw;
  }
}
.sno_contents #sec03 .sec03_text2 {
  width: 490px;
  margin-top: 40px;
  margin-left: 53px;
  font-size: 26px;
  color: #333333;
  letter-spacing: 0.04em;
  line-height: 52px;
}
.sno_contents #sec03 .sec03_text2 .point_note {
  font-size: 20px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec03 .sec03_text2 {
    width: 65.3333333333vw;
    margin-top: 5.3333333333vw;
    margin-left: 7.0666666667vw;
    font-size: 3.4666666667vw;
    line-height: 6.9333333333vw;
  }
  .sno_contents #sec03 .sec03_text2 .point_note {
    font-size: 2.6666666667vw;
  }
}
.sno_contents {
  /**--------------------------------------------------
    sec04: オイリーに傾きやすい肌を考えた成分設計
  --------------------------------------------------**/
}
.sno_contents #sec04 {
  position: relative;
  background: url(../images/sec04_bg.jpg) center top no-repeat;
  height: 2830px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 {
    background-size: 100vw 377.3333333333vw;
    height: 377.3333333333vw;
  }
}
.sno_contents #sec04 .sec04_title {
  width: 100%;
}
.sno_contents #sec04 .sec04_img1_wrap {
  position: relative;
  width: 750px;
  height: 434px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img1_wrap {
    width: 100vw;
    height: 57.8666666667vw;
  }
}
.sno_contents #sec04 .sec04_img2_wrap {
  position: relative;
  width: 750px;
  height: 408px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img2_wrap {
    width: 100vw;
    height: 54.4vw;
  }
}
.sno_contents #sec04 .sec04_img3_wrap {
  position: relative;
  width: 750px;
  height: 338px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img3_wrap {
    width: 100vw;
    height: 45.0666666667vw;
  }
}
.sno_contents #sec04 .sec04_img4_wrap {
  position: relative;
  width: 750px;
  height: 440px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img4_wrap {
    width: 100vw;
    height: 58.6666666667vw;
  }
}
.sno_contents #sec04 .sec04_img5_wrap {
  position: relative;
  width: 750px;
  height: 480px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img5_wrap {
    width: 100vw;
    height: 64vw;
  }
}
.sno_contents #sec04 .sec04_img6_wrap {
  position: relative;
  width: 750px;
  height: 370px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img6_wrap {
    width: 100vw;
    height: 49.3333333333vw;
  }
}
.sno_contents #sec04 .sec04_img {
  width: 100%;
}
.sno_contents #sec04 .sec04_img_text_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sno_contents #sec04 .sec04_img_text_wrap .sec04_img_capton {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 24px;
  color: #b6a8dc;
  letter-spacing: 0.16em;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img_text_wrap .sec04_img_capton {
    font-size: 3.2vw;
  }
}
.sno_contents #sec04 .sec04_img_text_wrap .sec04_img_capton::after {
  position: absolute;
  content: "";
  height: 1px;
  top: 50%;
  right: 1em;
  background-color: #b6a8dc;
}
.sno_contents #sec04 .sec04_img_text_wrap .sec04_img_text {
  font-size: 26px;
  color: #236182;
  line-height: 42px;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img_text_wrap .sec04_img_text {
    font-size: 3.4666666667vw;
    line-height: 5.6vw;
  }
}
.sno_contents #sec04 .sec04_img_text_wrap.img1 {
  padding-top: 80px;
}
.sno_contents #sec04 .sec04_img_text_wrap.img1 .sec04_img_capton {
  margin-left: 416px;
}
.sno_contents #sec04 .sec04_img_text_wrap.img1 .sec04_img_capton::after {
  width: 65px;
  right: calc(-0.3em - 65px);
}
.sno_contents #sec04 .sec04_img_text_wrap.img1 .sec04_img_text {
  margin: 134px 0 0 410px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img_text_wrap.img1 {
    padding-top: 10.6666666667vw;
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img1 .sec04_img_capton {
    margin-left: 55.4666666667vw;
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img1 .sec04_img_capton::after {
    width: 8.6666666667vw;
    right: calc(-0.3em - 8.6666666667vw);
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img1 .sec04_img_text {
    margin: 17.8666666667vw 0 0 54.6666666667vw;
  }
}
.sno_contents #sec04 .sec04_img_text_wrap.img2 {
  padding-top: 0;
}
.sno_contents #sec04 .sec04_img_text_wrap.img2 .sec04_img_capton {
  margin-left: 50px;
}
.sno_contents #sec04 .sec04_img_text_wrap.img2 .sec04_img_capton::after {
  width: 128px;
  right: calc(-0.3em - 128px);
}
.sno_contents #sec04 .sec04_img_text_wrap.img2 .sec04_img_text {
  margin: 90px 0 0 50px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img_text_wrap.img2 {
    padding-top: 0;
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img2 .sec04_img_capton {
    margin-left: 6.6666666667vw;
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img2 .sec04_img_capton::after {
    width: 17.0666666667vw;
    right: calc(-0.3em - 17.0666666667vw);
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img2 .sec04_img_text {
    margin: 12vw 0 0 6.6666666667vw;
  }
}
.sno_contents #sec04 .sec04_img_text_wrap.img3 {
  padding-top: 0;
}
.sno_contents #sec04 .sec04_img_text_wrap.img3 .sec04_img_capton {
  margin-left: 416px;
}
.sno_contents #sec04 .sec04_img_text_wrap.img3 .sec04_img_capton::after {
  width: 65px;
  right: calc(-0.3em - 65px);
}
.sno_contents #sec04 .sec04_img_text_wrap.img3 .sec04_img_text {
  margin: 90px 0 0 410px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img_text_wrap.img3 {
    padding-top: 0;
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img3 .sec04_img_capton {
    margin-left: 55.4666666667vw;
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img3 .sec04_img_capton::after {
    width: 8.6666666667vw;
    right: calc(-0.3em - 8.6666666667vw);
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img3 .sec04_img_text {
    margin: 12vw 0 0 54.6666666667vw;
  }
}
.sno_contents #sec04 .sec04_img_text_wrap.img4 {
  padding-top: 0;
}
.sno_contents #sec04 .sec04_img_text_wrap.img4 .sec04_img_capton {
  margin-left: 60px;
}
.sno_contents #sec04 .sec04_img_text_wrap.img4 .sec04_img_capton::after {
  width: 84px;
  right: calc(-0.3em - 84px);
}
.sno_contents #sec04 .sec04_img_text_wrap.img4 .sec04_img_text {
  margin: 92px 0 0 60px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img_text_wrap.img4 {
    padding-top: 0;
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img4 .sec04_img_capton {
    margin-left: 8vw;
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img4 .sec04_img_capton::after {
    width: 11.2vw;
    right: calc(-0.3em - 11.2vw);
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img4 .sec04_img_text {
    margin: 12.2666666667vw 0 0 8vw;
  }
}
.sno_contents #sec04 .sec04_img_text_wrap.img5 {
  padding-top: 108px;
}
.sno_contents #sec04 .sec04_img_text_wrap.img5 .sec04_img_text {
  margin: 0 0 0 428px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img_text_wrap.img5 {
    padding-top: 14.4vw;
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img5 .sec04_img_text {
    margin: 0 0 0 57.0666666667vw;
  }
}
.sno_contents #sec04 .sec04_img_text_wrap.img6 {
  padding-top: 185px;
}
.sno_contents #sec04 .sec04_img_text_wrap.img6 .sec04_img_text {
  margin: 0 0 0 60px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec04 .sec04_img_text_wrap.img6 {
    padding-top: 24.6666666667vw;
  }
  .sno_contents #sec04 .sec04_img_text_wrap.img6 .sec04_img_text {
    margin: 0 0 0 8vw;
  }
}
.sno_contents {
  /**--------------------------------------------------
    sec05: うるおいと肌のすこやかさも支える設計です。 
  --------------------------------------------------**/
}
.sno_contents #sec05 {
  position: relative;
  background: url(../images/sec05_bg.jpg) center top no-repeat;
  height: 1715px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec05 {
    background-size: 100vw 228.6666666667vw;
    height: 228.6666666667vw;
  }
}
.sno_contents #sec05 .sec05_caption {
  margin: 0 auto;
  width: 555px;
  height: 58px;
  background-color: #ffffff;
  font-size: 30px;
  color: #236182;
  line-height: 58px;
  letter-spacing: 0.16em;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec05 .sec05_caption {
    margin: 0 auto;
    width: 74vw;
    height: 7.7333333333vw;
    font-size: 4vw;
    line-height: 7.7333333333vw;
  }
}
.sno_contents #sec05 .sec05_title {
  width: 100%;
}
.sno_contents #sec05 .sec05_img1 {
  position: relative;
  width: 750px;
  height: 319px;
}
.sno_contents #sec05 .sec05_img1 .sec05_img1_text {
  position: absolute;
  top: 242px;
  left: 50px;
  font-size: 27px;
  color: #a0c9e7;
  letter-spacing: 0.16em;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec05 .sec05_img1 {
    width: 100vw;
    height: 42.5333333333vw;
  }
  .sno_contents #sec05 .sec05_img1 .sec05_img1_text {
    top: 32.2666666667vw;
    left: 6.6666666667vw;
    font-size: 3.6vw;
  }
}
.sno_contents #sec05 .sec05_voice_list {
  width: 750px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec05 .sec05_voice_list {
    width: 100vw;
  }
}
.sno_contents #sec05 .sec05_voice_list .voice1 {
  background: url(../images/sec05_voice1.png) left top no-repeat;
  background-size: contain;
  width: 750px;
  height: 318px;
  padding-top: 42px;
  padding-left: 282px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec05 .sec05_voice_list .voice1 {
    width: 100vw;
    height: 42.4vw;
    padding-top: 5.6vw;
    padding-left: 37.6vw;
  }
}
.sno_contents #sec05 .sec05_voice_list .voice2 {
  background: url(../images/sec05_voice2.png) left top no-repeat;
  background-size: contain;
  width: 750px;
  height: 322px;
  padding-top: 42px;
  padding-left: 90px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec05 .sec05_voice_list .voice2 {
    width: 100vw;
    height: 42.9333333333vw;
    padding-top: 5.6vw;
    padding-left: 12vw;
  }
}
.sno_contents #sec05 .sec05_voice_list .voice3 {
  background: url(../images/sec05_voice3.png) left top no-repeat;
  background-size: contain;
  width: 750px;
  height: 290px;
  padding-top: 58px;
  padding-left: 282px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec05 .sec05_voice_list .voice3 {
    width: 100vw;
    height: 38.6666666667vw;
    padding-top: 7.7333333333vw;
    padding-left: 37.6vw;
  }
}
.sno_contents #sec05 .sec05_voice_list dt {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 42px;
  padding: 0 17px;
  background-color: #ffffff;
  border-radius: 21px;
  font-size: 26px;
  line-height: 42px;
  color: #5b89a2;
  letter-spacing: 0.04em;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec05 .sec05_voice_list dt {
    height: 5.6vw;
    padding: 0 2.2666666667vw;
    border-radius: 2.8vw;
    font-size: 3.4666666667vw;
    line-height: 5.6vw;
  }
}
.sno_contents #sec05 .sec05_voice_list dd {
  margin-top: 18px;
  width: 380px;
  font-size: 26px;
  line-height: 48px;
  color: #ffffff;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec05 .sec05_voice_list dd {
    margin-top: 2.4vw;
    width: 50.6666666667vw;
    font-size: 3.4666666667vw;
    line-height: 6.4vw;
  }
}
.sno_contents #sec05 .sec05_note {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 5px 50px 0 auto;
  font-size: 20px;
  line-height: 34px;
  color: #55534c;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec05 .sec05_note {
    margin: 0.6666666667vw 6.6666666667vw 0 auto;
    font-size: 2.6666666667vw;
    line-height: 4.5333333333vw;
  }
}
.sno_contents {
  /**--------------------------------------------------
    sec06: HOW TO USE ご使用方法
  --------------------------------------------------**/
}
.sno_contents #sec06 {
  position: relative;
  background: url(../images/sec06_bg.jpg) center top no-repeat;
  height: 1435px;
  padding-top: 70px;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec06 {
    background-size: 100vw 191.3333333333vw;
    height: 191.3333333333vw;
    padding-top: 9.3333333333vw;
  }
}
.sno_contents #sec06 .sec06_title {
  margin: 0 auto;
  width: 186px;
  height: 44px;
  background-color: #5b89a2;
  font-size: 26px;
  line-height: 44px;
  color: #ffffff;
  letter-spacing: 0.12em;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec06 .sec06_title {
    width: 24.8vw;
    height: 5.8666666667vw;
    font-size: 3.4666666667vw;
    line-height: 5.8666666667vw;
  }
}
.sno_contents #sec06 .sec06_text1 {
  margin: 360px auto 0;
  width: 610px;
  font-size: 26px;
  line-height: 44px;
  color: #55534c;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec06 .sec06_text1 {
    margin: 48vw auto 0;
    width: 81.3333333333vw;
    font-size: 3.4666666667vw;
    line-height: 5.8666666667vw;
  }
}
.sno_contents #sec06 .sec06_img1 {
  margin-top: 70px;
  width: 100%;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec06 .sec06_img1 {
    margin-top: 9.3333333333vw;
  }
}
.sno_contents #sec06 .sec06_text2 {
  margin: 34px 50px 0 auto;
  width: 520px;
  font-size: 26px;
  line-height: 44px;
  color: #55534c;
  letter-spacing: 0.04em;
  text-align: right;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec06 .sec06_text2 {
    margin: 4.5333333333vw 6.6666666667vw 0 auto;
    width: 69.3333333333vw;
    font-size: 3.4666666667vw;
    line-height: 5.8666666667vw;
  }
}
.sno_contents #sec06 .sec06_howto {
  margin: 52px auto 0;
  width: 650px;
  height: 146px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec06 .sec06_howto {
    margin: 6.9333333333vw auto 0;
    width: 86.6666666667vw;
    height: 19.4666666667vw;
  }
}
.sno_contents #sec06 .sec06_howto .howto_caption {
  width: 166px;
  height: 146px;
  background-color: #5b89a2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 26px;
  color: #ffffff;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec06 .sec06_howto .howto_caption {
    width: 22.1333333333vw;
    height: 19.4666666667vw;
    font-size: 3.4666666667vw;
  }
}
.sno_contents #sec06 .sec06_howto .howto_text {
  width: 484px;
  height: 146px;
  background-color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 26px;
  line-height: 48px;
  color: #333333;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 750px) {
  .sno_contents #sec06 .sec06_howto .howto_text {
    width: 64.5333333333vw;
    height: 19.4666666667vw;
    font-size: 3.4666666667vw;
    line-height: 6.4vw;
  }
}
.sno_contents {
  /**--------------------------------------------------
    footer
  --------------------------------------------------**/
}
.sno_contents footer {
  position: relative;
  width: 100%;
  height: 70px;
  background: #9e8cd1;
  background: -webkit-gradient(linear, left top, right top, from(#92d2ff), to(#9e8cd1));
  background: linear-gradient(to right, #92d2ff 0%, #9e8cd1 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 750px) {
  .sno_contents footer {
    height: 9.3333333333vw;
  }
}
.sno_contents footer .footer_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.sno_contents footer .footer_link li > a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: 0.08em;
  line-height: 36px;
  padding: 0 1em;
}
@media screen and (max-width: 750px) {
  .sno_contents footer .footer_link li > a {
    font-size: 2.6666666667vw;
    line-height: 4.8vw;
  }
}
.sno_contents footer .footer_link li:nth-of-type(2) {
  border-left: 2px #ffffff solid;
}
@media screen and (max-width: 750px) {
  .sno_contents footer .footer_link li:nth-of-type(2) {
    border-left: 1px #ffffff solid;
  }
}
.sno_contents {
  /* 下部フローティングボタン SPのみ*/
}
.sno_contents .floating_area {
  position: fixed;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 170px;
  background-color: rgba(255, 255, 255, 0.8);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 100;
}
.sno_contents .floating_area.visible {
  visibility: visible;
  opacity: 1;
}
@media screen and (max-width: 750px) {
  .sno_contents .floating_area {
    width: 100%;
    height: 22.6666666667vw;
  }
}
.sno_contents .floating_area .floating_btn {
  display: block;
  width: 720px;
  margin: 0 auto;
  -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.4));
          filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.4));
}
@media screen and (max-width: 750px) {
  .sno_contents .floating_area .floating_btn {
    width: 96vw;
  }
}/*# sourceMappingURL=sno_style.css.map */