@charset "UTF-8";
/* 美白ボディミルク */
#bodymilk {
  background-image: url("/img/usr/static/bodymilk/pc_bg.jpg");
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  padding-bottom: 50px;
}
#bodymilk .inner_content {
  width: min(100%, 760px);
  margin: auto;
  background: #fff;
}
#bodymilk h1, #bodymilk h2, #bodymilk h3, #bodymilk h4 {
  border: none;
  margin: 0;
  padding: 0;
}
#bodymilk div,#bodymilk p {
  box-sizing: border-box;
}
#bodymilk img {
  vertical-align: bottom;
  height: auto;
}
#bodymilk a {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  display: inline-block;
}
#bodymilk a:hover {
  -webkit-transform: translate3d(0, 3px, 0);
          transform: translate3d(0, 3px, 0);
}
#bodymilk ol li {
  list-style: none;
}
/* ----------------------------------------
  .cv_area
------------------------------------------ */
#bodymilk section.cv_area {
  position: relative;
 }
#bodymilk section.cv_area .cv_name {
  margin: 0 auto 5%;
}
#bodymilk section.cv_area .cv_btn {
  position: absolute;
  width: 76.8%;
  right: 12%;
  z-index: 10;
}
#bodymilk section.cv_area .note {
  width: 25.8%;
  position: absolute;
  right: 10%;
  z-index: 10;
}
/* ---------------------ローズCV 1回目 */
#bodymilk section.cv_area .cv_area__rose {
  background: #F2CDD2;
  background: linear-gradient(180deg, rgba(242, 205, 210, 1) 0%, rgba(250, 225, 228, 1) 100%);
  padding: 0 5% 10%;
}
#bodymilk section.cv_area .cv_area__rose_inner {
  background-color: #ffeeef;
  border-radius: 0px 0px 18px 18px;
  padding-bottom: 11%;
  margin-bottom: 16%
}
#bodymilk section.cv_area .cv_area__rose_inner .cv_name {
  width: calc(75.5% / 0.9);
}
/* ---------------------ムスクCV 1回目 */
#bodymilk.musk section.cv_area .cv_area__musk {
  background: #E3E5F9;
  background: linear-gradient(0deg, rgba(227, 229, 249, 1) 0%, rgba(204, 208, 241, 1) 100%);
  padding: 0 5% 10%;
}
#bodymilk.musk section.cv_area .cv_area__musk_inner {
  background-color: #eef0ff;
  border-radius: 0px 0px 18px 18px;
  padding-bottom: 11%;
  margin-bottom: 16%
}
#bodymilk.musk section.cv_area .cv_area__musk_inner .cv_name {
  width: calc(75.1% / 0.9);
}
/* ---------------------ローズCV 2回目 */
#bodymilk section.cv_area.second .cv_area__rose {
  background: #F5D4D8;
  background: linear-gradient(180deg, rgba(245, 212, 216, 1) 0%, rgba(250, 225, 228, 1) 100%);
  padding: 0 6%;
  padding-bottom: 1%;
  margin-bottom: 0;
}
#bodymilk section.cv_area.second .cv_area__rose_inner {
  background-color: #ffeeef;
  border-radius: 0px 0px 18px 18px;
  padding-bottom: 11%;
  margin-bottom: 10%
}
#bodymilk section.cv_area.second .cv_area__rose_inner .cv_name {
  width: calc(75.5% / 0.88);
}
/* ---------------------ムスクCV 2回目 */
#bodymilk section.cv_area.second .cv_area__musk {
  background: #D4D7F4;
  background: linear-gradient(180deg, rgba(212, 215, 244, 1) 0%, rgba(227, 229, 249, 1) 100%);
  padding: 0 6%;
  padding-bottom: 1%;
  margin-bottom: -7%;
}
#bodymilk section.cv_area.second .cv_area__musk_inner {
  background-color: #eef0ff;
  border-radius: 0px 0px 18px 18px;
  padding-bottom: 11%;
  margin-bottom: 10%
}
#bodymilk section.cv_area.second .cv_area__musk_inner .cv_name {
  width: calc(75.1% / 0.88);
}
/* ---------------------ムスクLP */
#bodymilk.musk section.cv_area.second .cv_area__musk {
  margin-bottom: 0;
}
#bodymilk.musk section.cv_area.second .cv_area__rose {
  margin-bottom: -7%;
}

/* ----------------------------------------
  .bath
 ----------------------------------------- */
/* ---------------------.bath_about01　ローズ */
#bodymilk section.bath .bath_about01 {
  background: url("/img/usr/static/bodymilk_rose/bg_bath02.jpg") no-repeat;
  background-size: 100%;
  position: relative;
  padding-top: 68%;
  padding-bottom: 29.3%;
}
#bodymilk section.bath .bath_about01 h2 {
  width: 88.8%;
  position: absolute;
  top: 5.6%;
  left: 5%;
}
#bodymilk section.bath .bath_about01 .bath-text {
  width: 53.3%;
  margin-left: 6%;
}
/* ---------------------.bath_about01　ムスク */
#bodymilk.musk section.bath .bath_about01 {
  background: url("/img/usr/static/bodymilk_musk/bg_bath02.jpg") no-repeat;
  background-size: 100%;
  position: relative;
  padding-top: 68%;
  padding-bottom: 39.3%;
}
#bodymilk.musk section.bath .bath_about01 h2 {
  width: 88.8%;
  position: absolute;
  top: 2%;
  left: 5%;
}
#bodymilk.musk section.bath .bath_about01 .bath-text {
  width: 53.3%;
  margin-left: 6%;
  margin-top: -15%;
}
/* ---------------------.bath_about02 */
#bodymilk section.bath .bath_about02 {
  background: url("/img/usr/static/bodymilk_rose/bg_bath03.jpg") no-repeat;
  background-size: 100%;
  padding: 4% 0 18%;
}
#bodymilk section.bath .bath_about02 .bath-text:nth-of-type(1) {
  width: 76.5%;
  margin: auto;
}
#bodymilk section.bath .bath_about02 .bath-text:nth-of-type(2) {
  width: 81.9%;
  margin: auto;
  margin-top: 48%;
}
/* ---------------------.bath-movie */
#bodymilk section.bath .bath_about02 .bath-movie {
  width: 80%;
  margin: 9% auto 0;
}
#bodymilk section.bath .bath_about02 .bath-movie img {
  width: 100%;
  border-radius: 18px;
}
/* ----------------------------------------
  recommend
 ----------------------------------------- */
#bodymilk section.recommend {
  background: url("/img/usr/static/bodymilk_rose/bg_recommend.jpg") no-repeat;
  background-size: 100%;
  padding: 8% 0 21%;
  display: flex;
  justify-content: right;

}
#bodymilk section.recommend p {
  width: 82%;
  margin-right: 5%;
}
/* ----------------------------------------
  .point
------------------------------------------ */
#bodymilk section.point {
  background: #e9d9e2 url("/img/usr/static/bodymilk_rose/bg_point.jpg") no-repeat;
  background-size: 100%;
  padding-top: 9.4%;
}
#bodymilk section.point .point_detail {
  background: #F7BCD5;
}

#bodymilk.musk section.point {
  background: #cfd6e1 url("/img/usr/static/bodymilk_musk/bg_point.jpg") no-repeat;
  background-size: 100%;
  padding-top: 9.4%;
}
#bodymilk.musk section.point .point_detail {
  background: #A9BCE7;
}
#bodymilk section.point .point_links__area {
  padding-bottom: 11%;
}
#bodymilk section.point .point_links__area h2 {
  width: 59.9%;
  margin: 0 auto 6.8%;
}
#bodymilk section.point .point_links {
  width: 80%;
  margin: auto;
}
#bodymilk section.point .point_links li {
  padding-top: 3%;
}
#bodymilk section.point .point_links li:first-child {
  padding-top: 0;
}
#bodymilk section.point .point-link-note {
  width: 41.9%;
  margin: 3.5% 5% 0 auto;
}
#bodymilk section.point .point_contents {
  padding: 7% 10%;
}
#bodymilk section.point .point_contents h3 {
  margin: auto;
}
/* ---------------------#point01 */
#bodymilk section.point #point01 {
  background: url("/img/usr/static/bodymilk_rose/bg_point01.jpg") no-repeat;
  background-size: 100%;
  padding-bottom: 14.9%;
}
#bodymilk.musk section.point #point01 {
  background: url("/img/usr/static/bodymilk_musk/bg_point01.jpg") no-repeat;
  background-size: 100%;
  padding-bottom: 14.9%;
}
#bodymilk section.point #point01 h3 {
  width: calc(45.9% / 0.8);
  margin-bottom: 6.4%;
}
#bodymilk section.point #point01 p:nth-of-type(2) {
  padding-top: 5%;
}
#bodymilk section.point #point01 p:last-of-type {
  padding-top: 2.4%;
  margin-left: auto;
  margin-right: 0;
  width: calc(41.9% / 0.8);
}
/* ---------------------#point02 */
#bodymilk section.point #point02 {
  background: url("/img/usr/static/bodymilk_rose/bg_point02.jpg") no-repeat;
  background-size: 100%;
  padding-bottom: 11.8%;
}
#bodymilk.musk section.point #point02 {
  background: url("/img/usr/static/bodymilk_musk/bg_point02.jpg") no-repeat;
  background-size: 100%;
  padding-bottom: 11.8%;
}
#bodymilk section.point #point02 h3 {
  width: calc(70.1% / 0.8);
  margin-bottom: 6.4%;
}
#bodymilk section.point #point02 p {
  width: calc(78.7% / 0.8);
  padding-top: 70%;
  margin: auto;
}
/* ---------------------#point03 */
#bodymilk section.point #point03 {
  background: url("/img/usr/static/bodymilk_rose/bg_point03.jpg") no-repeat;
  background-size: 100%;
  padding-bottom: 12.8%;
}
#bodymilk.musk section.point #point03 {
  background: url("/img/usr/static/bodymilk_musk/bg_point03.jpg") no-repeat;
  background-size: 100%;
  padding-bottom: 12.8%;
}
#bodymilk section.point #point03 h3 {
  width: calc(45.6% / 0.8);
  margin: auto;
}
#bodymilk section.point #point03 p {
  width: calc(79.8% / 0.8);
  padding-top: 7.4%;
  margin: auto;
}
/* ---------------------#point_other */
#bodymilk section.point #point_other {
  background: url("/img/usr/static/bodymilk_rose/bg_point04.jpg") no-repeat;
  background-size: 100%;
  padding-bottom: 16.9%;
}
#bodymilk.musk section.point #point_other {
  background: url("/img/usr/static/bodymilk_musk/bg_point04.jpg") no-repeat;
  background-size: 100%;
  padding-bottom: 16.9%;
}
#bodymilk section.point #point_other p {
  margin-left: -1%;
  margin-right: -1%;
}
/* ----------------------------------------
  .cv_which
 ----------------------------------------- */
#bodymilk section.cv_which .cv_which__area {
  padding: 5.8% 5% 0;
}
#bodymilk section.cv_which ul {
  width: calc(76.8% / 0.9);
  margin: auto;
}
#bodymilk section.cv_which li {
  margin-top: -2%;
}
#bodymilk section.cv_which li:first-of-type {
  margin-top: 0;
}
#bodymilk section.cv_which .note {
  width: calc(25.8% / 0.9);
  margin-left: auto;
  margin-right: 0;
}

/* ----------------------------------------
  .howto
 ----------------------------------------- */
#bodymilk section.howto {
  background: #fff29f url("/img/usr/static/bodymilk_rose/bg_howto.jpg") no-repeat;
  background-size: 100%;
  padding-bottom: 9%;
}
#bodymilk section.howto h2 {
  width: 33.8%;
  margin: auto;
  padding: 16.4% 0 6%;
}
#bodymilk section.howto .howto__area {
  padding: 0 10%;
}
#bodymilk section.howto .howto__area li {
  margin-top: 9%;
}
#bodymilk section.howto .howto__area li:first-of-type {
  margin-top: 0;
}
#bodymilk section.howto .howto__area li:nth-of-type(2) picture img {
  margin-bottom: 1%;
}
#bodymilk section.howto .howto__area li:nth-of-type(3) picture img {
  margin-bottom: 3.6%;
}
#bodymilk section.howto .howto__area .note {
  margin-top: 7%;
}
/* ----------------------------------------
  .lineup
------------------------------------------ */
#bodymilk section.lineup {
  margin-top: 7%;
}
#bodymilk section.lineup .lineup_cv_area {
  background: url("/img/usr/static/bodymilk_rose/bg_lineup.jpg") repeat-y;
  background-size: 100%;
  padding-bottom: 7.6%;
}
#bodymilk section.lineup .lineup_cv_area__inner {
  background-color: #fde3e4;
  margin: 0 3%;
  border-radius: 0px 0px 18px 18px;
  padding: 0 5% 8%;
}
#bodymilk section.lineup .lineup_cv_area__inner ul {
  width: calc(75% / 0.9);
  margin: auto;
}
#bodymilk section.lineup .lineup_cv_area__inner ul li {
  margin-top: 5%;
}
#bodymilk section.lineup .lineup_cv_area__inner ul li:first-of-type {
  margin-top: 0;
}
/* ---------------------#ホワイトボディパックソープ */
#bodymilk section.lineup .lineup_cv_area.pack .lineup_cv_area__inner {
  background: #FDE3E4;
  background: linear-gradient(90deg, rgba(253, 227, 228, 1) 0%, rgba(253, 217, 219, 1) 100%);
}
#bodymilk section.lineup .lineup_cv_area.pack .note {
  width: calc(30.4% / 0.9);
  margin-left: auto;
  margin-right: 0;
  margin-top: 3%;
}
/* ----------------------------------------
  .caution
------------------------------------------ */
#bodymilk .caution {
  background-color: #f7f7f7;
  padding: 7% 5%;
}

/* ----------------------------------------
  .visumo
------------------------------------------ */
#bodymilk .visumo {
  margin-bottom: 10%;
}
#bodymilk.multi .visumo {
  margin-bottom: 2%;
}
/* ----------------------------------------
  #bodymilk.multi .cv_area マルチカート
------------------------------------------ */
#bodymilk.multi .cv_area__musk_inner,
#bodymilk.multi section.cv_area .cv_area__musk_inner {
  padding-bottom: 81%;
}
#bodymilk.multi .cv_multi li {
  margin: 5% auto 0;
  width: 90%;
  border-radius: 100px;
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
#bodymilk.multi .cv_multi li:first-of-type {
  margin-top: 0;
}
#bodymilk.multi .cv_multi li a {
  display: inline-block;
}
#bodymilk.multi .cv_multi li:hover {
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0);
  -webkit-transform: translate3d(0, 3px, 0);
          transform: translate3d(0, 3px, 0);
}
/* ---------------------マルチカートCV 1回目 */
#bodymilk.multi section.cv_area .cv_area__rose_inner,
#bodymilk.multi section.cv_area .cv_area__musk_inner {
  padding-bottom: 88%;
}
/* ---------------------マルチカートCV 2回目 */
#bodymilk.multi section.cv_area.second .cv_area__rose_inner,
#bodymilk.multi section.cv_area.second .cv_area__musk_inner {
  padding-bottom: 90%;
}

#bodymilk.multi section.lineup .lineup_cv_area {
  padding-bottom: 7.4%;
}

@media screen and (min-width: 761px) {
    #bodymilk img {
        width: 100%;
    }
}
/* スマホ（～767px） */
@media (max-width: 767px) {
  #bodymilk {
    padding-bottom: 0;
  }
  #bodymilk section.point .point_links__area {
    padding-bottom: 10%;
  }
  /* ----------------------------------------
    .cv_area マルチカート
  ------------------------------------------ */
  #bodymilk.multi .cv_multi.rose li {
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
  }
  #bodymilk.multi .cv_multi.musk li {
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
  }
  #bodymilk.multi section.lineup .lineup_cv_area__inner ul {
    width: calc(82% / 0.9);
  }
}
/* タブレット（768px～1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
  #bodymilk.multi section.lineup .lineup_cv_area__inner ul {
    width: calc(82% / 0.9);
  }
}
/* PC（1024px～） */
@media (min-width: 1024px) {
  #bodymilk .inner_content {
    -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
  }
}