@charset "UTF-8";

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp, picture,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  background: #fff;
  box-sizing: border-box;
  overflow-x: hidden;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  display: block;
}
a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
ul, ol {
  list-style: none;
}
picture {
  display: block;
}


/************************************************
common
************************************************/
.wrapper {
  width: 100%;
  margin: 0;
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 500;
  overflow: clip;
}
.wrapper .inner {
  width: 100%;
  margin: 0 auto;
  max-width: 1000px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .wrapper .inner {
    padding: 0;
  }
}
.wrapper img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.onlyPC {
  display: none;
}
.pbg {
  display: none;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:140vh;
  transition: .8s ease;
}
.active .pbg {
  display: block;
}

/************************************************
header
************************************************/
#header ul {
  position: absolute;
  left: 0;
  bottom: calc( 600 / 750 * 100vw );
  font-size: 0;
}
#header p {
  position: absolute;
  left: 0;
  bottom: calc( 61 / 750 * 100vw );
  font-size: 0;
}


/************************************************
point
************************************************/
.point {
  position: relative;
}
.point .cnt {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_point_bg.jpg") left top / 100% auto no-repeat;
}
.point .cnt h2 {
  width: calc( 196 / 750 * 100vw );
  margin: 0 calc( 40 / 750 * 100vw ) calc( 56 / 750 * 100vw ) auto;
  padding: calc( 79 / 750 * 100vw ) 0 0;
}
.point .cnt .point03,
.point .cnt .point02,
.point .cnt .point01 {
  background: #f7e9ee;
}
.point .cnt .point01 p {
  margin: 0 auto;
}
.point .cnt p.cpt {
  margin: 0 auto calc( -31 / 750 * 100vw );
}
.point dl.ac02  {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-bottom: calc( 70 / 750 * 100vw );
}
.point dl.ac02 dt {
  position: relative;
  z-index: 100;
  width: calc( 256 /750 * 100vw );
  left: calc( 253 / 750 * 100vw );
  margin: 0 0 calc( -51 / 750 * 100vw );
  cursor: pointer;
}
.point dl.ac02 dt.active {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_point01_acc_close.png") left top / 100% auto no-repeat;
}
.point dl.ac02 dt.active img {
  visibility: hidden;
}
.point dl.ac02 dt + dd  {
  height: calc( 220 / 750 * 100vw );
  overflow: hidden;
  transition: .7s ease;
  position: relative;
  z-index: 90;
}
.point dl.ac02 dt + dd::after  {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: calc( 210 / 750 * 100vw );
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/pc_point01_acc_shadow.png") left top / auto 100% repeat-x;
  transition: .7s ease;
}
.point dl.ac02 dt.active + dd  {
  height: calc( 970 / 750 * 100vw );
}
.point dl.ac02 dt.active + dd::after  {
  opacity: 0;
}
.point dl.ac02 dd.atte {
  color: #49586b;
  font-size: calc( 20 / 750 * 100vw );
  line-height: calc( 28 / 750 * 100vw );
  letter-spacing: 0.1em;
  margin: calc( 25 / 750 * 100vw ) 0 0;
}
.point .cnt .point04 {
  position: relative;
  background: #f7e9ee;
}
.point .cnt .point04 p {
  width: calc( 221 / 750 * 100vw );
  position: absolute;
  left: calc( 475 / 750 * 100vw );
  top: calc( 49 / 750 * 100vw );
}
.point .cnt .point04 p + p {
  width: calc( 89 / 750 * 100vw );
  position: absolute;
  left: calc( 49 / 750 * 100vw );
  top: calc( 413 / 750 * 100vw );
}



/************************************************
voice
************************************************/
.voice {
  background: #f9f0f3;
  position: relative;
  z-index: 8500;
}
.voice h2 {
}
.voice .slide {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.voice .swiper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}
.voice .slide .swipe-prev,
.voice .slide .swipe-next {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_voice_arrow.png") left top / auto 100% no-repeat;
  width: calc( 46 / 750 * 100vw );
  height: calc( 99/ 750 * 100vw );
  position: absolute;
  right: calc( 0 / 750 * 100vw );
  top: 50%;
  margin-top: calc( -50 / 750 * 100vw );
  z-index: 20;
}
.voice .slide .swipe-prev {
  right: auto;
  left: calc( 0 / 750 * 100vw );
  transform: rotate(180deg);
}
.voice .slide .swiper-button-disabled {
  display: none;
}
.voice .swiper .swiper-slide {
  position: relative;
  width: calc( 370 /  750 * 100vw );
  padding: 0 calc( 15 /  750 * 100vw );
  box-sizing: border-box;
}
.voice p.atte {
  color: #615b5b;
  font-size: calc( 20 / 750 * 100vw );
  line-height: 1;
  letter-spacing: 0.1em;
  margin: calc( 30 / 750 * 100vw ) calc( 20 / 750 * 100vw ); 
}
.voice .swiper-pagination {
  position: relative;
  width: 100%;
  height: calc( 14 / 750 * 100vw );
  top: 0;
  line-height: 0.1;
  margin: 0 auto calc( 60 / 750 * 100vw );
}
.voice .swiper-pagination .swiper-pagination-bullet {
  width: calc( 16 / 750 * 100vw );
  height: calc( 16 / 750 * 100vw );
  background: #fff;
  opacity: 1;
  margin: 0 calc( 9 / 750 * 100vw );
  border-radius: 0;
  transform: rotate(45deg);
}
.voice .swiper-pagination .swiper-pagination-bullet-active {
  background: #eeb0c7;
}
.voice .evaluation {
  position: relative;
}
.voice .evaluation ul {
  position: absolute;
  left: calc( 357 / 750 * 100vw );
  top: calc( 290 / 750 * 100vw );
}
.voice .evaluation ul li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.voice .evaluation ul li.point01 {
  width: calc( 283 / 750 * 100vw );
}
.voice .evaluation ul li.point02 {
  width: calc( 354 / 750 * 100vw );
  padding-top: calc( 94 / 750 * 100vw );
}
.voice .evaluation ul li.point03 {
  width: calc( 353 / 750 * 100vw );
  padding-top: calc( 194 / 750 * 100vw );
}


/************************************************
nayami
************************************************/
.nayami .cnt {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_nayami_bg.jpg") center top / auto 100% no-repeat;
  aspect-ratio: 750 / 1957;
  padding-top: 1px;
  box-sizing: border-box;
}
.nayami h2 {
  width: calc( 740 / 750 * 100vw );
  margin: calc( 106 / 750 * 100vw ) auto calc( 85 / 750 * 100vw );
}
.nayami ul {
  height: calc( 611 / 750 * 100vw );
  margin: 0 auto 0 calc( 100 / 750 * 100vw );
  position: relative;
}
.nayami ul li {
  width: calc( 552 / 750 * 100vw );
  position: absolute;
  left: 0;
  top: 0;
}
.nayami ul li:nth-child(2) {
  width: calc( 489 / 750 * 100vw );
  padding-top: calc( 175 / 750 * 100vw );
}
.nayami ul li:nth-child(3) {
  width: calc( 498 / 750 * 100vw );
  padding-top: calc( 346  / 750 * 100vw );
}
.nayami h3 {
  width: calc( 668 / 750 * 100vw );
  margin: 0 auto;
}


/************************************************
dev
************************************************/
.dev .inner {
  z-index: 9500;
}
.dev ul li {
  position: absolute;
  left: calc( 286 / 750 * 100vw );
  bottom: calc( 399 / 750 * 100vw );
  width: calc( 179 / 750 * 100vw );
}
.dev ul li:nth-child(2) {
  left: calc( 133 / 750 * 100vw );
  bottom: calc( 240 / 750 * 100vw );
  width: calc( 211 / 750 * 100vw );
  padding-top: calc( 241 / 750 * 100vw );
}
.dev ul li:nth-child(3) {
  left: calc( 415 / 750 * 100vw );
  bottom: calc( 202 / 750 * 100vw );
  width: calc( 184 / 750 * 100vw );
  padding-top: calc( 212 / 750 * 100vw );
}


/************************************************
component
************************************************/
.component {
  background: #fff;
}
.component .inner {
  z-index: 8500;
}


/************************************************
commitment
************************************************/
.commitment {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_commitment_bg.jpg") 50% 100% / cover no-repeat;
}
.commitment .inner {
  z-index: 7500;
}
.commitment .pbg {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_commitment_bg.jpg") 50% 50% / 100% auto no-repeat;
  z-index: 7400;
}


/************************************************
lineup
************************************************/
.lineup {
  background: #f9f0f3;
}
.lineup .inner {
  z-index: 9500;
}
.lineup .base {
  position: relative;
}
.lineup .cnt .base div {
  position: absolute;
  left: 0;
}
.lineup div.wash {
  top: calc( 312 / 750 * 100vw );
}
.lineup div.lotion {
  top: calc( 1372 / 750 * 100vw );
}
.lineup div.day {
  top: calc( 2910 / 750 * 100vw );
}
.lineup div.night {
  top: calc( 4015 / 750 * 100vw );
}
.lineup dl.ac {
  width: calc( 700 / 750 * 100vw );
  margin: 0 auto calc( 60 / 750  * 100vw ) calc( 40 / 750 * 100vw );
}
.lineup dl.ac dt {
  cursor: pointer;
}
.lineup dl.ac dt.active {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_lineup_acc_close.png") left top / 100% auto no-repeat;
}
.lineup dl.ac dt.active img {
  visibility: hidden;
}
.lineup dl.ac dd {
  display: none;
}
.lineup dl.last {
  position: relative;
}
.lineup dl.last dd {
  position: absolute;
  left: calc( 61 / 750 * 100vw );
  top: calc( 84 / 750 * 100vw );
  width: calc( 271 / 750 * 100vw );
}


/************************************************
qa
************************************************/
.qa {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_qa_bg.jpg") center top / 100% auto no-repeat #f9f0f3;
}
.qa .cnt {
  padding: 0 0 calc( 130 / 1000 * 100% );
}
.qa h2 {
}
.qa dl {
  max-width: calc( 710 / 750 * 100vw );
  margin: 0 auto calc( 10 / 750 * 100vw );
}
.qa dl dt {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_qa_icn01.png") calc( 26 / 750 * 100vw ) center / calc( 60 / 750 * 100vw ) auto no-repeat #fff;
  color: #342323;
  font-size: calc( 26 / 750 * 100vw );
  line-height: calc( 36 / 750 * 100vw );
  letter-spacing: 0.1em;
  font-weight: bold;
  padding: calc( 48 / 750 * 100vw ) calc( 124 / 750 * 100vw );
  position: relative;
}
.qa dl dt::after {
  content: "";
  display: block;
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_qa_icn04.png") center center / 100% auto no-repeat;
  width: calc( 26 / 750 * 100vw );
  height: calc( 26 / 750 * 100vw );
  position: absolute;
  right: calc( 44 / 750 * 100vw );
  top: 50%;
  margin-top: calc( -13 / 750 * 100vw );
}
.qa dl dt.active::after {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_qa_icn03.png") center center / 100% auto no-repeat;
}
.qa dl dd {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_qa_icn02.png") calc( 26 / 750 * 100vw ) calc( 32 / 750 * 100vw ) / calc( 60 / 750 * 100vw ) auto no-repeat;
  color: #342323;
  font-size: calc( 26 / 750 * 100vw );
  line-height: calc( 44 / 750 * 100vw );
  letter-spacing: 0.1em;
  padding: calc( 40 / 750 * 100vw ) calc( 30 / 750 * 100vw ) calc( 35 / 750 * 100vw ) calc( 110 / 750 * 100vw );
  display: none;
}
.qa dl dd span.atte {
  display: block;
  font-size: calc( 18 / 750 * 100vw );
  line-height: calc( 30 / 750 * 100vw );
  letter-spacing: 0.1em;
  margin-top: calc( 30 / 750 * 100vw );
}


/************************************************
CV
************************************************/
.cv {
  background: #f9f0f3;
  padding: 0 0 calc( 90 / 750 * 100vw );
}
.cv .cnt {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_cv_bg.jpg") center calc( -161 / 750 * 100vw ) / 100% auto no-repeat;
  padding: 1px 0 0;
  z-index: 100;
}
#cv02.cv .cnt {
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_cv_bg.jpg") center calc( 390 / 750 * 100vw ) / 100% auto no-repeat;
  padding-top: calc( 551 / 750 * 100vw );
}
#cv02.cv .cnt::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 750 / 487;
  background: url("../../../../shopping/images/pub/dl_2w/b_net03/sp_cv_cpt01.png") left top / 100% auto no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 110;
}
.cv h2 {
  height: calc( 798 / 750 * 100vw );
  box-sizing: border-box;
  position: relative;
}
.cv h2 dt {
  width: calc( 129 / 750 * 100vw );
  position: absolute;
  right: calc( 42 / 750 * 100vw );
  top: 0;
}
.cv h2 dd {
  width: calc( 166 / 750 * 100vw );
  position: absolute;
  left: 0;
  top: calc( 125 / 750 * 100vw );
}
.cv h2 dd.animated img {
  animation-name: float;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}
@keyframes float {
  50% {
      transform: translateY( calc( 10 / 750 * 100vw ) ); 
  } 
  100% {
      transform: translateY(0px); 
  } 
}
.cv .panel {
  position: relative;
}
.cv .cv-btn-new {
  width: calc( 607 / 750 * 100vw );
  position: absolute;
  left: calc( 80 / 750 * 100vw );
  top: calc( 1422 / 750 * 100vw );
  animation: btnslide 3s ease 0s infinite;
}
.cv .cv-btn-member {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: calc( 92 / 750 * 100vw );
  text-align: center;
  display: none;
}
.cv .cv-btn-member a {
  color: #bd4f7f;
  font-size: calc( 30 / 750 * 100vw );
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: bold;
  text-decoration: none;
}
.cv .cv-btn-member a::after {
  content: "▲";
  transform: rotate(90deg);
  display: inline-block;
}
#b_net01 .cv .cv-btn-member {
  display: block;
}
.cv .cv-service {
  width: calc( 710 / 750 * 100vw );
  margin: calc( 100 / 750 * 100vw ) auto 0;
}
.cv p.atte {
  color: #615b5b;
  font-size: calc( 18 / 750 * 100vw );
  line-height: calc( 30 / 750 * 100vw );
  letter-spacing: 0.05em;
  width: calc( 710 / 750 * 100vw );
  margin: 0 auto;
}
.cv p.atte strong {
  display: none;
}
#b_net01 .cv p.atte strong {
  display: inline;
  color: #be5787;
}
.cv .cv-service + p.atte {
  margin-top: calc( 25 / 750 * 100vw );
}
@keyframes btnslide {
  0% {
    transform: translateX(0);
  }
  5% {
    transform: translateX( calc( 10 / 750 * 100vw ) );
  }
  10% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

/************************************************
footer
************************************************/
#footer {
  background-color: #be5787;
  padding: calc( 50 / 750 * 100vw ) 0 0;;
}
#footer ul {
  list-style: none;
  text-align: center;
  font-size: 0;
  padding-bottom: calc( 50 / 750 * 100vw );
}
#footer ul li {
  display: inline-block;
  padding: 0 calc( 16 / 750 * 100vw );
  position: relative;
  line-height: 1.1;
}
#footer ul li + li {
  border-left: 1px solid #fff;
}
#footer ul li:nth-child(4n) {
  border: 0;
}
#footer ul li a {
  font-size: calc( 20 / 750 * 100vw );
  line-height: calc( 36 / 750 * 100vw );
  text-decoration: none;
  color: #fff;
}
#footer p {
  display: block;
  background: #342323;
  color: #fff;
  text-align: center;
  font-size: calc( 18 / 750 * 100vw );
  line-height: 1;
  padding: calc( 22 / 750 * 100vw ) 0 calc( 21 / 750 * 100vw );
}