@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format('woff2'), url(https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff'), url(https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format('opentype');
  font-display: swap;
}

#ba_esteelauder2004 img,
#ba_esteelauder2004 video {
  display: block;
  max-width: 100%;
  height: auto;
}

#ba_esteelauder2004 .anchor {
  display: block;
  position: relative;
  height: 0;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .only--pc {
    display: none !important;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .only--sp {
    display: none !important;
  }
}

#ba_esteelauder2004 .mainWrap {
  position: relative;
  margin: 0 auto;
  background: #f2ece8;
  color: #ad6b68;
  overflow: hidden;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .mainWrap {
    width: 100%;
    max-width: 1800px;
    min-width: 1100px;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .mainWrap {
    width: 100%;
    z-index: 1;
  }
}

#ba_esteelauder2004 .modalWrap {
  position: fixed;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(0, 0, 0, .8);
  opacity: 0;
  z-index: 1010;
  pointer-events: none;
  -webkit-transition: opacity 350ms ease-out 0ms;
  transition: opacity 350ms ease-out 0ms;
}

#ba_esteelauder2004 .modalWrap.is-active {
  opacity: 1;
  pointer-events: auto;
}

#ba_esteelauder2004 .modalWrap__in {
  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: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#ba_esteelauder2004 .c-bwbtn > a {
  display: block;
  position: relative;
  height: 60px;
  background: #ad6b68;
}

#ba_esteelauder2004 .c-bwbtn > a::before {
  content: '';
  display: block;
  position: absolute;
  right: 20px;
  bottom: 50%;
  width: 26px;
  height: 9px;
  background: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/icon_arrow01.png') 50% 50% no-repeat;
  background-size: contain;
  -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
          transform: translateY(50%);
}

#ba_esteelauder2004 .c-bwbtn > a > span {
  display: block;
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
          transform: translateY(50%);
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .c-bwbtn > a > span {
    text-align: center;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .c-bwbtn > a {
    -webkit-transition: opacity 200ms ease-out 0ms;
    transition: opacity 200ms ease-out 0ms;
  }
  #ba_esteelauder2004 .c-bwbtn > a:hover {
    opacity: .8;
  }
}

#ba_esteelauder2004 .c-stt {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.52778;
  letter-spacing: .04em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .c-stt {
    font-size: 21px;
    line-height: 1.52381;
  }
  #ba_esteelauder2004 .c-stt .is-spib {
    display: inline-block;
  }
}

@media (max-width: 374.99px) {
  #ba_esteelauder2004 .c-stt {
    font-size: 5.6vw;
  }
}

#ba_esteelauder2004 .kvs {
  position: relative;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs {
    background: 50% 100% no-repeat;
    background-size: 100% auto;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_kvs01_sp.jpg');
  }
}

#ba_esteelauder2004 .kvs::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  height: 18px;
  margin: 0 auto;
  background: 100% 50% no-repeat;
  background-size: contain;
  z-index: 3;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .kvs::after {
    top: 0;
    left: 0;
    width: 1100px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/icon_pr01.png');
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs::after {
    top: 1px;
    width: 100%;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/icon_pr01_sp.png');
  }
}

#ba_esteelauder2004 .kvs__i {
  color: #fff;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .kvs__i {
    position: absolute;
    top: 41.25%;
    left: 50%;
    margin-left: -550px;
    z-index: 2;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs__i {
    padding: 8.53333vw 0 11.73333vw;
    text-align: center;
  }
}

@media (max-width: 899.99px) and (min-width: 600px) and (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs__i {
    padding: 51.2px 0 70.4px;
  }
}

@media (max-width: 899.99px) and (max-width: 374.99px) {
  #ba_esteelauder2004 .kvs__i {
    padding: 32px 0 44px;
  }
}

#ba_esteelauder2004 .kvs__i__tt {
  margin: 0 0 47px;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs__i__tt {
    margin: 0 0 9.06667vw;
  }
}

@media (min-width: 600px) and (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs__i__tt {
    margin: 0 0 54.4px;
  }
}

#ba_esteelauder2004 .kvs__i__tt > span {
  display: block;
}

#ba_esteelauder2004 .kvs__i__tt__as {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .8em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs__i__tt__as {
    margin: 0 0 2.13333vw;
    font-size: 3.2vw;
    letter-spacing: .42em;
  }
}

@media (min-width: 600px) and (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs__i__tt__as {
    margin: 0 0 12.8px;
    font-size: 19.2px;
  }
}

#ba_esteelauder2004 .kvs__i__tt__mn {
  font-size: 43px;
  font-weight: 500;
  line-height: 1.39535;
  letter-spacing: .12em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs__i__tt__mn {
    font-size: 8vw;
    line-height: 1.33333;
  }
}

@media (min-width: 600px) and (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs__i__tt__mn {
    font-size: 48px;
  }
}

#ba_esteelauder2004 .kvs__i__lg {
  width: 365px;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs__i__lg {
    max-width: 468.8px;
    width: 78.13333%;
    margin: 0 auto;
  }
}

#ba_esteelauder2004 .kvs__bg {
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .kvs__bg {
    min-height: 560px;
    max-height: 649.6px;
    background: 80% 40% no-repeat;
    background-size: cover;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_kvs01.jpg');
  }
}

#ba_esteelauder2004 .kvs__bg::before {
  content: '';
  display: block;
  padding-top: 40.99561%;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs__bg::before {
    padding-top: 80%;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .kvs.pcScr .kvs__i__tt__as,
  #ba_esteelauder2004 .kvs.pcScr .kvs__i__tt__mn,
  #ba_esteelauder2004 .kvs.pcScr .kvs__i__lg {
    opacity: 0;
    -webkit-transform: translateY(60px);
        -ms-transform: translateY(60px);
            transform: translateY(60px);
  }
  #ba_esteelauder2004 .kvs.pcScr .kvs__i__tt__as {
    -webkit-transition: opacity 800ms ease 240ms, margin 800ms ease 240ms, -webkit-transform 800ms ease 240ms;
    transition: opacity 800ms ease 240ms, margin 800ms ease 240ms, -webkit-transform 800ms ease 240ms;
    transition: opacity 800ms ease 240ms, transform 800ms ease 240ms, margin 800ms ease 240ms;
    transition: opacity 800ms ease 240ms, transform 800ms ease 240ms, margin 800ms ease 240ms, -webkit-transform 800ms ease 240ms;
  }
  #ba_esteelauder2004 .kvs.pcScr .kvs__i__tt__mn {
    -webkit-transition: opacity 800ms ease 560ms, margin 800ms ease 560ms, -webkit-transform 800ms ease 560ms;
    transition: opacity 800ms ease 560ms, margin 800ms ease 560ms, -webkit-transform 800ms ease 560ms;
    transition: opacity 800ms ease 560ms, transform 800ms ease 560ms, margin 800ms ease 560ms;
    transition: opacity 800ms ease 560ms, transform 800ms ease 560ms, margin 800ms ease 560ms, -webkit-transform 800ms ease 560ms;
  }
  #ba_esteelauder2004 .kvs.pcScr .kvs__i__lg {
    -webkit-transition: opacity 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, transform 800ms ease 880ms, margin 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, transform 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
  }
  #ba_esteelauder2004 .kvs.pcScr.pcScrOn .kvs__i__tt__as,
  #ba_esteelauder2004 .kvs.pcScr.pcScrOn .kvs__i__tt__mn,
  #ba_esteelauder2004 .kvs.pcScr.pcScrOn .kvs__i__lg {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kvs.spScr .kvs__i__tt__as,
  #ba_esteelauder2004 .kvs.spScr .kvs__i__tt__mn,
  #ba_esteelauder2004 .kvs.spScr .kvs__i__lg {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
  }
  #ba_esteelauder2004 .kvs.spScr .kvs__i__tt__as {
    -webkit-transition: opacity 800ms ease 240ms, margin 800ms ease 240ms, -webkit-transform 800ms ease 240ms;
    transition: opacity 800ms ease 240ms, margin 800ms ease 240ms, -webkit-transform 800ms ease 240ms;
    transition: opacity 800ms ease 240ms, transform 800ms ease 240ms, margin 800ms ease 240ms;
    transition: opacity 800ms ease 240ms, transform 800ms ease 240ms, margin 800ms ease 240ms, -webkit-transform 800ms ease 240ms;
  }
  #ba_esteelauder2004 .kvs.spScr .kvs__i__tt__mn {
    -webkit-transition: opacity 800ms ease 560ms, margin 800ms ease 560ms, -webkit-transform 800ms ease 560ms;
    transition: opacity 800ms ease 560ms, margin 800ms ease 560ms, -webkit-transform 800ms ease 560ms;
    transition: opacity 800ms ease 560ms, transform 800ms ease 560ms, margin 800ms ease 560ms;
    transition: opacity 800ms ease 560ms, transform 800ms ease 560ms, margin 800ms ease 560ms, -webkit-transform 800ms ease 560ms;
  }
  #ba_esteelauder2004 .kvs.spScr .kvs__i__lg {
    -webkit-transition: opacity 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, transform 800ms ease 880ms, margin 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, transform 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
  }
  #ba_esteelauder2004 .kvs.spScr.spScrOn .kvs__i__tt__as,
  #ba_esteelauder2004 .kvs.spScr.spScrOn .kvs__i__tt__mn,
  #ba_esteelauder2004 .kvs.spScr.spScrOn .kvs__i__lg {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
}

#ba_esteelauder2004 .lda {
  position: relative;
  background: #e4bf90 50% 50% no-repeat;
  background-size: cover;
  z-index: 2;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .lda {
    height: 553px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_lda01.jpg');
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .lda {
    padding: 5.33333vw;
    background-position: 50% 50%;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_lda01_sp.jpg');
  }
}

@media (min-width: 600px) and (max-width: 899.99px) {
  #ba_esteelauder2004 .lda {
    padding: 32px;
  }
}

#ba_esteelauder2004 .lda__in {
  margin: 0 auto;
  background: #e4c8a8;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .lda__in {
    position: absolute;
    bottom: 50%;
    right: 50%;
    width: 1286px;
    height: calc(100% - 80px);
    -webkit-transform: translate(50%, 50%);
        -ms-transform: translate(50%, 50%);
            transform: translate(50%, 50%);
    z-index: 1;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .lda__in {
    padding: 66px 5.33333vw;
    box-sizing: border-box;
  }
}

@media (min-width: 600px) and (max-width: 899.99px) {
  #ba_esteelauder2004 .lda__in {
    padding: 66px 32px;
  }
}

@media (max-width: 374.99px) {
  #ba_esteelauder2004 .lda__in {
    padding: 17.6vw 20px;
  }
}

#ba_esteelauder2004 .lda__in2 {
  color: #fff;
  z-index: 10;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .lda__in2 {
    position: absolute;
    bottom: 50%;
    left: 90px;
    padding-bottom: 5px;
    -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
            transform: translateY(50%);
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .lda__in2 {
    position: relative;
    max-width: 560px;
  }
}

#ba_esteelauder2004 .lda__in2 .c-stt {
  letter-spacing: .1em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .lda__in2 .c-stt {
    font-size: 26px;
    line-height: 1.53846;
    letter-spacing: 0;
    white-space: nowrap;
  }
}

@media (max-width: 374.99px) {
  #ba_esteelauder2004 .lda__in2 .c-stt {
    font-size: 6.93333vw;
  }
}

#ba_esteelauder2004 .lda__t {
  margin: 34px 0 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.71429;
  letter-spacing: .06em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .lda__t {
    margin: 26px 0 0;
    font-size: 16px;
    line-height: 1.875;
  }
}

@media (max-width: 374.99px) {
  #ba_esteelauder2004 .lda__t {
    font-size: 4.26667vw;
  }
}

#ba_esteelauder2004 .lda__bgWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

#ba_esteelauder2004 .lda__bg {
  position: absolute;
  background: 50% 50% no-repeat;
  pointer-events: none;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .lda__bg {
    bottom: 50%;
    right: 50%;
    width: 1500px;
    height: 800px;
    margin: 0 -750px -400px 0;
    background-size: 1500px auto;
  }
  #ba_esteelauder2004 .lda__bg.is-01 {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_lda_bg01.png');
    z-index: 2;
  }
  #ba_esteelauder2004 .lda__bg.is-02 {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_lda_bg02.png');
    z-index: 3;
  }
  #ba_esteelauder2004 .lda__bg.is-03,
  #ba_esteelauder2004 .lda__bg.is-04,
  #ba_esteelauder2004 .lda__bg.is-05 {
    display: none;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .lda__bg {
    background-size: contain;
    z-index: 2;
  }
  #ba_esteelauder2004 .lda__bg::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
  #ba_esteelauder2004 .lda__bg.is-01 {
    top: 0;
    left: 0;
    width: 41.86667%;
    max-width: 157px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_lda_bg01_sp.png');
    -webkit-transform: translate(-35.35032%, -48.72611%);
        -ms-transform: translate(-35.35032%, -48.72611%);
            transform: translate(-35.35032%, -48.72611%);
  }
  #ba_esteelauder2004 .lda__bg.is-02 {
    top: 136px;
    right: 0;
    width: 21.06667%;
    max-width: 79px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_lda_bg02_sp.png');
    -webkit-transform: translate(41.13924%, -50%);
        -ms-transform: translate(41.13924%, -50%);
            transform: translate(41.13924%, -50%);
  }
  #ba_esteelauder2004 .lda__bg.is-03 {
    top: 235px;
    right: 19.2%;
    width: 12.8%;
    max-width: 48px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_lda_bg03_sp.png');
    -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
  }
  #ba_esteelauder2004 .lda__bg.is-04 {
    bottom: 0;
    right: 0;
    width: 30.4%;
    max-width: 114px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_lda_bg04_sp.png');
    -webkit-transform: translate(20.17544%, 15.35088%);
        -ms-transform: translate(20.17544%, 15.35088%);
            transform: translate(20.17544%, 15.35088%);
  }
  #ba_esteelauder2004 .lda__bg.is-05 {
    bottom: 0;
    left: 32.8%;
    width: 24%;
    max-width: 90px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_lda_bg05_sp.png');
    -webkit-transform: translate(-50%, 35%);
        -ms-transform: translate(-50%, 35%);
            transform: translate(-50%, 35%);
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .lda__in.pcScr .c-stt,
  #ba_esteelauder2004 .lda__in.pcScr .lda__t,
  #ba_esteelauder2004 .lda__in.pcScr .lda__bg.is-01,
  #ba_esteelauder2004 .lda__in.pcScr .lda__bg.is-02 {
    opacity: 0;
    -webkit-transform: translateY(60px);
        -ms-transform: translateY(60px);
            transform: translateY(60px);
  }
  #ba_esteelauder2004 .lda__in.pcScr .c-stt {
    -webkit-transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
  }
  #ba_esteelauder2004 .lda__in.pcScr .lda__t {
    -webkit-transition: opacity 800ms ease 640ms, margin 800ms ease 640ms, -webkit-transform 800ms ease 640ms;
    transition: opacity 800ms ease 640ms, margin 800ms ease 640ms, -webkit-transform 800ms ease 640ms;
    transition: opacity 800ms ease 640ms, transform 800ms ease 640ms, margin 800ms ease 640ms;
    transition: opacity 800ms ease 640ms, transform 800ms ease 640ms, margin 800ms ease 640ms, -webkit-transform 800ms ease 640ms;
  }
  #ba_esteelauder2004 .lda__in.pcScr .lda__bg.is-02 {
    -webkit-transition: opacity 1280ms ease 640ms, margin 1280ms ease 640ms, -webkit-transform 1280ms ease 640ms;
    transition: opacity 1280ms ease 640ms, margin 1280ms ease 640ms, -webkit-transform 1280ms ease 640ms;
    transition: opacity 1280ms ease 640ms, transform 1280ms ease 640ms, margin 1280ms ease 640ms;
    transition: opacity 1280ms ease 640ms, transform 1280ms ease 640ms, margin 1280ms ease 640ms, -webkit-transform 1280ms ease 640ms;
  }
  #ba_esteelauder2004 .lda__in.pcScr .lda__bg.is-01 {
    -webkit-transition: opacity 1280ms ease 880ms, margin 1280ms ease 880ms, -webkit-transform 1280ms ease 880ms;
    transition: opacity 1280ms ease 880ms, margin 1280ms ease 880ms, -webkit-transform 1280ms ease 880ms;
    transition: opacity 1280ms ease 880ms, transform 1280ms ease 880ms, margin 1280ms ease 880ms;
    transition: opacity 1280ms ease 880ms, transform 1280ms ease 880ms, margin 1280ms ease 880ms, -webkit-transform 1280ms ease 880ms;
  }
  #ba_esteelauder2004 .lda__in.pcScr.pcScrOn .c-stt,
  #ba_esteelauder2004 .lda__in.pcScr.pcScrOn .lda__t,
  #ba_esteelauder2004 .lda__in.pcScr.pcScrOn .lda__bg.is-01,
  #ba_esteelauder2004 .lda__in.pcScr.pcScrOn .lda__bg.is-02 {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .lda__in.spScr .c-stt,
  #ba_esteelauder2004 .lda__in.spScr .lda__t,
  #ba_esteelauder2004 .lda__in.spScr .lda__bgWrap.is-01,
  #ba_esteelauder2004 .lda__in.spScr .lda__bgWrap.is-02 {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
  }
  #ba_esteelauder2004 .lda__in.spScr .c-stt {
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .lda__in.spScr .lda__t {
    -webkit-transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
  }
  #ba_esteelauder2004 .lda__in.spScr .lda__bgWrap.is-02 {
    -webkit-transition: opacity 960ms ease 560ms, margin 960ms ease 560ms, -webkit-transform 960ms ease 560ms;
    transition: opacity 960ms ease 560ms, margin 960ms ease 560ms, -webkit-transform 960ms ease 560ms;
    transition: opacity 960ms ease 560ms, transform 960ms ease 560ms, margin 960ms ease 560ms;
    transition: opacity 960ms ease 560ms, transform 960ms ease 560ms, margin 960ms ease 560ms, -webkit-transform 960ms ease 560ms;
  }
  #ba_esteelauder2004 .lda__in.spScr .lda__bgWrap.is-01 {
    -webkit-transition: opacity 960ms ease 800ms, margin 960ms ease 800ms, -webkit-transform 960ms ease 800ms;
    transition: opacity 960ms ease 800ms, margin 960ms ease 800ms, -webkit-transform 960ms ease 800ms;
    transition: opacity 960ms ease 800ms, transform 960ms ease 800ms, margin 960ms ease 800ms;
    transition: opacity 960ms ease 800ms, transform 960ms ease 800ms, margin 960ms ease 800ms, -webkit-transform 960ms ease 800ms;
  }
}

#ba_esteelauder2004 .lda__in.spScr.spScr.spScrOn .c-stt,
#ba_esteelauder2004 .lda__in.spScr.spScr.spScrOn .lda__t,
#ba_esteelauder2004 .lda__in.spScr.spScr.spScrOn .lda__bgWrap.is-01,
#ba_esteelauder2004 .lda__in.spScr.spScr.spScrOn .lda__bgWrap.is-02 {
  opacity: 1 !important;
  -webkit-transform: translateY(0) !important;
      -ms-transform: translateY(0) !important;
          transform: translateY(0) !important;
}

#ba_esteelauder2004 .mov {
  position: relative;
  background: 50% 50% no-repeat;
  background-size: auto 100%;
  overflow: hidden;
}

#ba_esteelauder2004 .mov > a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .mov > a {
    -webkit-transition: background-color 200ms ease-out 0ms;
    transition: background-color 200ms ease-out 0ms;
  }
  #ba_esteelauder2004 .mov > a:hover {
    background-color: rgba(255, 255, 255, .15);
  }
}

#ba_esteelauder2004 .mov > a > span {
  display: block;
  position: absolute;
  bottom: 50%;
  right: 50%;
  width: 9.15081%;
  max-width: 140px;
  border: 1px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  -webkit-transform: translate(50%, 50%);
      -ms-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
}

#ba_esteelauder2004 .mov > a > span::before {
  content: '';
  display: block;
  padding-top: 100%;
}

#ba_esteelauder2004 .mov > a > span > span {
  display: block;
  position: absolute;
  bottom: 49%;
  right: 50%;
  padding-left: .16em;
  -webkit-transform: translate(50%, 50%);
      -ms-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: .16em;
  color: #fff;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .mov > a > span {
    width: 16%;
    min-width: 60px;
    max-width: 100px;
  }
}

@media (max-width: 374.99px) {
  #ba_esteelauder2004 .mov > a > span > span {
    font-size: 10px;
  }
}

#ba_esteelauder2004 .mov__mv {
  position: relative;
  z-index: 1;
}

#ba_esteelauder2004 .mov__mv video {
  width: 100%;
  height: auto;
}

#ba_esteelauder2004 .ftr {
  position: relative;
  margin: 0 auto;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr {
    max-width: 1366px;
    height: 690px;
  }
  #ba_esteelauder2004 .ftr::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 50%;
    width: 1005px;
    height: 790px;
    background: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr01.jpg') 50% 50% no-repeat;
    background-size: cover;
    -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
            transform: translateY(50%);
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr__in {
    position: absolute;
    top: 0;
    right: 50%;
    width: 1282px;
    height: 100%;
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);
    z-index: 2;
  }
}

#ba_esteelauder2004 .ftr__bg {
  background: 50% 50% no-repeat;
  background-size: cover;
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr__bg {
    position: relative;
  }
  #ba_esteelauder2004 .ftr__bg::before {
    content: '';
    display: block;
    padding-top: 59.73333%;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr__i {
    position: absolute;
    width: 465px;
    color: #fff;
    z-index: 2;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr__i {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 38px 20px 0;
  }
}

#ba_esteelauder2004 .ftr__i .c-stt {
  white-space: nowrap;
}

#ba_esteelauder2004 .ftr__i__t {
  margin: 32px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.78571;
  letter-spacing: .04em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr__i__t {
    margin: 27px 0 0;
    font-size: 12px;
    line-height: 1.75;
  }
}

#ba_esteelauder2004 .ftr__i__nt {
  margin: 20px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .04em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr__i__nt {
    font-size: 10px;
    line-height: 1.6;
  }
}

#ba_esteelauder2004 .ftr__i__b {
  width: 300px;
  margin: 48px 0 0;
  color: #fff;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr__i__b {
    width: auto;
    max-width: 600px;
    margin: 30px auto;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr__i__in {
    position: relative;
    z-index: 2;
  }
  #ba_esteelauder2004 .ftr__i__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
  }
  #ba_esteelauder2004 .ftr__i__bg > div {
    position: absolute;
    background: 50% 0 no-repeat;
    background-size: 100% auto;
    pointer-events: none;
  }
  #ba_esteelauder2004 .ftr__i__bg > div::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
}

#ba_esteelauder2004 .ftr.is-01 {
  margin-top: 140px;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr.is-01 {
    margin-top: 77px;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr.is-01::before {
    right: 50%;
    margin-right: -372px;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr.is-01 .ftr__in {
    margin-right: 42px;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr.is-01 .ftr__bg {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_a01.jpg');
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr.is-01 .ftr__bg {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_a01_sp.jpg');
  }
}

#ba_esteelauder2004 .ftr.is-01 .ftr__bg__in {
  position: absolute;
  bottom: 50%;
  right: 50%;
  background: 50% 50% no-repeat;
  background-size: contain;
  -webkit-transform: translate(50%, 50%);
      -ms-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr.is-01 .ftr__bg__in {
    width: 1360px;
    height: 830px;
  }
  #ba_esteelauder2004 .ftr.is-01 .ftr__bg__in.is-01 {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_a02.png');
  }
  #ba_esteelauder2004 .ftr.is-01 .ftr__bg__in.is-02 {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_a03.png');
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr.is-01 .ftr__bg__in {
    width: 120%;
  }
  #ba_esteelauder2004 .ftr.is-01 .ftr__bg__in::before {
    content: '';
    display: block;
    padding-top: 66.66667%;
  }
  #ba_esteelauder2004 .ftr.is-01 .ftr__bg__in.is-01 {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_a02_sp.png');
  }
  #ba_esteelauder2004 .ftr.is-01 .ftr__bg__in.is-02 {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_a03_sp.png');
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr.is-01 .ftr__i {
    bottom: 50%;
    right: 50px;
    padding-bottom: 8px;
    -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
            transform: translateY(50%);
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr.is-01 .ftr__i__bg > div.is-01 {
    top: 152px;
    right: 100%;
    max-width: 199.32px;
    width: 40.26667%;
    margin-right: -59px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_bg01_sp.png');
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
  #ba_esteelauder2004 .ftr.is-01 .ftr__i__bg > div.is-02 {
    top: 69px;
    left: 100%;
    max-width: 92.4px;
    width: 18.66667%;
    margin-left: -40px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_bg02_sp.png');
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
  #ba_esteelauder2004 .ftr.is-01 .ftr__i__bg > div.is-03 {
    top: 120px;
    right: 10.66667%;
    max-width: 30.36px;
    width: 6.13333%;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_bg03_sp.png');
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
  #ba_esteelauder2004 .ftr.is-01 .ftr__i__bg > div.is-04 {
    top: 531px;
    left: 100%;
    max-width: 118.8px;
    width: 24%;
    margin-left: -61px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_bg04_sp.png');
    -webkit-transform: translate(0, -200%);
        -ms-transform: translate(0, -200%);
            transform: translate(0, -200%);
  }
}

#ba_esteelauder2004 .ftr.is-02 {
  margin-top: 216px;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr.is-02 {
    margin-top: 100px;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr.is-02::before {
    left: 50%;
    margin-left: -372px;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr.is-02 .ftr__in {
    margin-right: -42px;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr.is-02 .ftr__bg {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_b01.jpg');
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr.is-02 .ftr__bg {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_ftr_b01_sp.jpg');
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr.is-02 .ftr__i {
    top: 40px;
    left: 50px;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .ftr.pcScr .c-stt,
  #ba_esteelauder2004 .ftr.pcScr .ftr__i__t,
  #ba_esteelauder2004 .ftr.pcScr .ftr__i__nt,
  #ba_esteelauder2004 .ftr.pcScr .ftr__i__b {
    opacity: 0;
    -webkit-transform: translateY(60px);
        -ms-transform: translateY(60px);
            transform: translateY(60px);
  }
  #ba_esteelauder2004 .ftr.pcScr .ftr__bg__in.is-01,
  #ba_esteelauder2004 .ftr.pcScr .ftr__bg__in.is-02 {
    margin-bottom: -60px;
    opacity: 0;
  }
  #ba_esteelauder2004 .ftr.pcScr .c-stt {
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .ftr.pcScr .ftr__i__t {
    -webkit-transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
  }
  #ba_esteelauder2004 .ftr.pcScr .ftr__i__nt {
    -webkit-transition: opacity 800ms ease 640ms, margin 800ms ease 640ms, -webkit-transform 800ms ease 640ms;
    transition: opacity 800ms ease 640ms, margin 800ms ease 640ms, -webkit-transform 800ms ease 640ms;
    transition: opacity 800ms ease 640ms, transform 800ms ease 640ms, margin 800ms ease 640ms;
    transition: opacity 800ms ease 640ms, transform 800ms ease 640ms, margin 800ms ease 640ms, -webkit-transform 800ms ease 640ms;
  }
  #ba_esteelauder2004 .ftr.pcScr .ftr__i__b {
    -webkit-transition: opacity 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, transform 800ms ease 880ms, margin 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, transform 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
  }
  #ba_esteelauder2004 .ftr.pcScr .ftr__bg__in.is-02 {
    -webkit-transition: opacity 1280ms ease 640ms, margin 1280ms ease 640ms, -webkit-transform 1280ms ease 640ms;
    transition: opacity 1280ms ease 640ms, margin 1280ms ease 640ms, -webkit-transform 1280ms ease 640ms;
    transition: opacity 1280ms ease 640ms, transform 1280ms ease 640ms, margin 1280ms ease 640ms;
    transition: opacity 1280ms ease 640ms, transform 1280ms ease 640ms, margin 1280ms ease 640ms, -webkit-transform 1280ms ease 640ms;
  }
  #ba_esteelauder2004 .ftr.pcScr .ftr__bg__in.is-01 {
    -webkit-transition: opacity 1280ms ease 880ms, margin 1280ms ease 880ms, -webkit-transform 1280ms ease 880ms;
    transition: opacity 1280ms ease 880ms, margin 1280ms ease 880ms, -webkit-transform 1280ms ease 880ms;
    transition: opacity 1280ms ease 880ms, transform 1280ms ease 880ms, margin 1280ms ease 880ms;
    transition: opacity 1280ms ease 880ms, transform 1280ms ease 880ms, margin 1280ms ease 880ms, -webkit-transform 1280ms ease 880ms;
  }
  #ba_esteelauder2004 .ftr.pcScr.pcScrOn .c-stt,
  #ba_esteelauder2004 .ftr.pcScr.pcScrOn .ftr__i__t,
  #ba_esteelauder2004 .ftr.pcScr.pcScrOn .ftr__i__nt,
  #ba_esteelauder2004 .ftr.pcScr.pcScrOn .ftr__i__b {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #ba_esteelauder2004 .ftr.pcScr.pcScrOn .ftr__bg__in.is-01,
  #ba_esteelauder2004 .ftr.pcScr.pcScrOn .ftr__bg__in.is-02 {
    opacity: 1 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .ftr__in.spScr .ftr__bg__in.is-01,
  #ba_esteelauder2004 .ftr__in.spScr .ftr__bg__in.is-02 {
    margin-bottom: -50px;
    opacity: 0;
  }
  #ba_esteelauder2004 .ftr__in.spScr .ftr__i__bg.is-01,
  #ba_esteelauder2004 .ftr__in.spScr .ftr__i__bg.is-02 {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
  }
  #ba_esteelauder2004 .ftr__in.spScr .ftr__bg__in.is-01,
  #ba_esteelauder2004 .ftr__in.spScr .ftr__i__bg.is-01 {
    -webkit-transition: opacity 1280ms ease 160ms, margin 1280ms ease 160ms, -webkit-transform 1280ms ease 160ms;
    transition: opacity 1280ms ease 160ms, margin 1280ms ease 160ms, -webkit-transform 1280ms ease 160ms;
    transition: opacity 1280ms ease 160ms, transform 1280ms ease 160ms, margin 1280ms ease 160ms;
    transition: opacity 1280ms ease 160ms, transform 1280ms ease 160ms, margin 1280ms ease 160ms, -webkit-transform 1280ms ease 160ms;
  }
  #ba_esteelauder2004 .ftr__in.spScr .ftr__bg__in.is-02,
  #ba_esteelauder2004 .ftr__in.spScr .ftr__i__bg.is-02 {
    -webkit-transition: opacity 1280ms ease 400ms, margin 1280ms ease 400ms, -webkit-transform 1280ms ease 400ms;
    transition: opacity 1280ms ease 400ms, margin 1280ms ease 400ms, -webkit-transform 1280ms ease 400ms;
    transition: opacity 1280ms ease 400ms, transform 1280ms ease 400ms, margin 1280ms ease 400ms;
    transition: opacity 1280ms ease 400ms, transform 1280ms ease 400ms, margin 1280ms ease 400ms, -webkit-transform 1280ms ease 400ms;
  }
  #ba_esteelauder2004 .ftr__in.spScr.spScrOn .ftr__bg__in.is-02,
  #ba_esteelauder2004 .ftr__in.spScr.spScrOn .ftr__bg__in.is-01 {
    opacity: 1 !important;
    margin-bottom: 0 !important;
  }
  #ba_esteelauder2004 .ftr__in.spScr.spScrOn .ftr__i__bg.is-02,
  #ba_esteelauder2004 .ftr__in.spScr.spScrOn .ftr__i__bg.is-01 {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #ba_esteelauder2004 .ftr__i.spScr .c-stt,
  #ba_esteelauder2004 .ftr__i.spScr .ftr__i__t,
  #ba_esteelauder2004 .ftr__i.spScr .ftr__i__nt,
  #ba_esteelauder2004 .ftr__i.spScr .ftr__i__b {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
  }
  #ba_esteelauder2004 .ftr__i.spScr .c-stt {
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .ftr__i.spScr .ftr__i__t {
    -webkit-transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
  }
  #ba_esteelauder2004 .ftr__i.spScr .ftr__i__nt {
    -webkit-transition: opacity 800ms ease 640ms, margin 800ms ease 640ms, -webkit-transform 800ms ease 640ms;
    transition: opacity 800ms ease 640ms, margin 800ms ease 640ms, -webkit-transform 800ms ease 640ms;
    transition: opacity 800ms ease 640ms, transform 800ms ease 640ms, margin 800ms ease 640ms;
    transition: opacity 800ms ease 640ms, transform 800ms ease 640ms, margin 800ms ease 640ms, -webkit-transform 800ms ease 640ms;
  }
  #ba_esteelauder2004 .ftr__i.spScr .ftr__i__b {
    -webkit-transition: opacity 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, transform 800ms ease 880ms, margin 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, transform 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
  }
  #ba_esteelauder2004 .ftr__i.spScr.spScrOn .c-stt,
  #ba_esteelauder2004 .ftr__i.spScr.spScrOn .ftr__i__t,
  #ba_esteelauder2004 .ftr__i.spScr.spScrOn .ftr__i__nt,
  #ba_esteelauder2004 .ftr__i.spScr.spScrOn .ftr__i__b {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
}

#ba_esteelauder2004 .kep {
  position: relative;
  margin: 227px 0 0;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kep {
    margin: 96px 0 0;
  }
}

#ba_esteelauder2004 .kep__hd {
  position: relative;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .kep__hd {
    padding-bottom: 740px;
    z-index: 1;
  }
  #ba_esteelauder2004 .kep__hd::before,
  #ba_esteelauder2004 .kep__hd::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 740px;
    z-index: 1;
  }
  #ba_esteelauder2004 .kep__hd::before {
    left: 0;
    background: #f3c9a2;
  }
  #ba_esteelauder2004 .kep__hd::after {
    right: 0;
    background: #e8b78d;
  }
}

#ba_esteelauder2004 .kep__hd__p {
  background: 50% 50% no-repeat;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .kep__hd__p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 740px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_kep01.jpg');
    background-size: auto 100%;
    z-index: 2;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kep__hd__p {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_kep01_sp.jpg');
    background-size: cover;
  }
  #ba_esteelauder2004 .kep__hd__p::before {
    content: '';
    display: block;
    padding-top: 59.73333%;
  }
}

#ba_esteelauder2004 .kep__hd__tt {
  padding: 0 0 36px;
  text-align: center;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kep__hd__tt {
    max-width: 600px;
    margin: 0 auto;
    padding: 38px 20px 0;
    text-align: left;
  }
  #ba_esteelauder2004 .kep__hd__tt .c-stt {
    letter-spacing: .02em;
  }
}

#ba_esteelauder2004 .kep__bd {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 35px 0 0;
  z-index: 2;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kep__bd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    max-width: 600px;
    padding: 24px 20px 0;
    box-sizing: border-box;
  }
}

#ba_esteelauder2004 .kep__bd__t {
  width: 756px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.78571;
  letter-spacing: .04em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kep__bd__t {
    width: 50.14925%;
    font-size: 12px;
    line-height: 1.75;
  }
}

#ba_esteelauder2004 .kep__bd__mv {
  background: #fff;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .kep__bd__mv {
    position: absolute;
    top: -157px;
    right: 0;
    width: 270px;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kep__bd__mv {
    position: relative;
    width: 43.8806%;
    margin: 0 0 0 20px;
  }
}

#ba_esteelauder2004 .kep__bd__mv::before {
  content: '';
  display: block;
  padding-top: 177.77778%;
}

#ba_esteelauder2004 .kep__bd__mv video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .kep__hd__tt.pcScr .c-stt {
    opacity: 0;
    -webkit-transition: opacity 800ms ease-out 0ms;
    transition: opacity 800ms ease-out 0ms;
  }
  #ba_esteelauder2004 .kep__hd__tt.pcScr.pcScrOn .c-stt {
    opacity: 1;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .kep__bd.pcScr .kep__bd__t {
    opacity: 0;
    -webkit-transition: opacity 800ms ease-out 0ms;
    transition: opacity 800ms ease-out 0ms;
  }
  #ba_esteelauder2004 .kep__bd.pcScr.pcScrOn .kep__bd__t {
    opacity: 1;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kep__hd__tt.spScr .c-stt {
    opacity: 0;
    -webkit-transition: opacity 800ms ease-out 0ms;
    transition: opacity 800ms ease-out 0ms;
  }
  #ba_esteelauder2004 .kep__hd__tt.spScr.spScrOn .c-stt {
    opacity: 1;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .kep__bd.spScr .kep__bd__t {
    opacity: 0;
    -webkit-transition: opacity 800ms ease-out 0ms;
    transition: opacity 800ms ease-out 0ms;
  }
  #ba_esteelauder2004 .kep__bd.spScr.spScrOn .kep__bd__t {
    opacity: 1;
  }
}

#ba_esteelauder2004 .whc {
  max-width: 1100px;
  margin: 0 auto;
}

#ba_esteelauder2004 .whc__in {
  position: relative;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc__in {
    padding: 0 5.33333vw;
  }
}

#ba_esteelauder2004 .whc__tt {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.33333;
  letter-spacing: .1em;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .whc__tt {
    position: absolute;
    top: 51px;
    left: 50%;
    margin-left: 64px;
    z-index: 2;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc__tt {
    margin: 0 0 25px;
    font-size: 8vw;
    line-height: 1.5;
    letter-spacing: .06em;
  }
  #ba_esteelauder2004 .whc__tt::after {
    content: '';
    display: block;
    padding-top: 20.14925%;
  }
}

@media (min-width: 600px) and (max-width: 899.99px) {
  #ba_esteelauder2004 .whc__tt {
    font-size: 48px;
  }
}

@media (max-width: 374.99px) {
  #ba_esteelauder2004 .whc__tt {
    font-size: 8vw;
  }
}

#ba_esteelauder2004 .whc__m {
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .whc__m::after {
    content: '';
    display: block;
    clear: both;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc__m {
    background: 50% 50% no-repeat;
    background-size: contain;
  }
  #ba_esteelauder2004 .whc__m::before {
    content: '';
    display: block;
    padding-top: 177.31343%;
  }
}

#ba_esteelauder2004 .whc__m__p {
  position: relative;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .whc__m__p {
    width: 50%;
    height: 900px;
  }
  #ba_esteelauder2004 .whc__m__p.is-01 {
    float: left;
  }
  #ba_esteelauder2004 .whc__m__p.is-02 {
    float: right;
    margin: 372px 0 0;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc__m__p {
    position: absolute;
    left: 0;
    width: 100%;
  }
  #ba_esteelauder2004 .whc__m__p.is-01 {
    top: 0;
  }
  #ba_esteelauder2004 .whc__m__p.is-02 {
    bottom: 0;
  }
}

#ba_esteelauder2004 .whc__m__p::before,
#ba_esteelauder2004 .whc__m__p > div {
  content: '';
  display: block;
  position: absolute;
  background: 50% 50% no-repeat;
  background-size: contain;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .whc__m__p::before {
    left: 0;
    width: 100%;
    height: 100%;
  }
  #ba_esteelauder2004 .whc__m__p.is-01::before {
    top: 0;
  }
  #ba_esteelauder2004 .whc__m__p.is-02::before {
    bottom: 0;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .whc__i {
    position: absolute;
    width: 485px;
    z-index: 2;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc__i {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

#ba_esteelauder2004 .whc__i .c-stt {
  margin: 0 0 32px;
  white-space: nowrap;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc__i .c-stt {
    margin: 115px 0 22px;
  }
}

#ba_esteelauder2004 .whc__i__t {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.78571;
  letter-spacing: .04em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc__i__t {
    font-size: 12px;
    line-height: 1.75;
  }
}

#ba_esteelauder2004 .whc.is-01 {
  margin-top: 262px;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc.is-01 {
    margin-top: 110px;
  }
}

#ba_esteelauder2004 .whc.is-01 .whc__i {
  bottom: 0;
  left: 0;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc.is-01 .whc__m {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc01_sp.jpg');
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01::before {
    height: 950px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc01.jpg');
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01 > div {
    top: -108px;
    left: -77px;
    width: 392px;
    height: 163px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/txt_whc01.png');
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02::before {
    height: 1020px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc02.jpg');
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02 > div {
    bottom: -98px;
    right: -83px;
    width: 437px;
    height: 147px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/txt_whc02.png');
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc.is-01 .whc__m__p > div {
    position: absolute;
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p > div::before {
    content: '';
    display: block;
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01::before {
    top: -13.33333vw;
    right: -5.33333vw;
    width: 36vw;
    height: 50.66667vw;
    margin-top: -50px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc_p01_sp.png');
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01 > div {
    top: 0;
    left: 0;
    width: 65.67164%;
    max-width: 440px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/txt_whc01_sp.png');
    -webkit-transform: translateY(-60.67416%);
        -ms-transform: translateY(-60.67416%);
            transform: translateY(-60.67416%);
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01 > div::before {
    padding-top: 40.45455%;
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02::before {
    bottom: -18.13333vw;
    left: -5.33333vw;
    width: 97.33333vw;
    height: 77.33333vw;
    margin-bottom: -60px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc_p02_sp.png');
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02 > div {
    bottom: -60px;
    right: 0;
    width: 72.53731%;
    max-width: 486px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/txt_whc02_sp.png');
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02 > div::before {
    padding-top: 29.21811%;
  }
}

#ba_esteelauder2004 .whc.is-02 {
  margin-top: 155px;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc.is-02 {
    margin-top: 80px;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .whc.is-02 .whc__i {
    position: absolute;
    top: 71px;
    right: 0;
    width: 495px;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc.is-02 .whc__i {
    margin: 33px auto 0;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .whc.is-02 .whc__m::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 332px;
    height: 242px;
    background: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/txt_whc03.png') 50% 50% no-repeat;
    background-size: contain;
    z-index: 3;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc.is-02 .whc__m {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc02_sp.jpg');
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-01::before {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc03.jpg');
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-01 > div {
    bottom: -264px;
    right: 45px;
    width: 900px;
    height: 1061px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc05.png');
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-02::before {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc04.jpg');
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-02 > div {
    top: -92px;
    left: 358px;
    width: 600px;
    height: 300px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc06.png');
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-01 > div {
    top: -2.13333vw;
    right: -5.33333vw;
    width: 48.53333vw;
    height: 67.73333vw;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc_p03_sp.png');
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-02 {
    bottom: 50%;
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-02 > div {
    top: 17.33333vw;
    left: -5.33333vw;
    width: 49.86667vw;
    height: 51.73333vw;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_whc_p04_sp.png');
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .whc.is-01.pcScr .whc__tt {
    opacity: 0;
    -webkit-transition: opacity 1200ms ease-out 0ms;
    transition: opacity 1200ms ease-out 0ms;
  }
  #ba_esteelauder2004 .whc.is-01.pcScr.pcScrOn .whc__tt {
    opacity: 1;
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01.pcScr > div,
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02.pcScr > div {
    opacity: 0;
    -webkit-transform: translateY(60px);
        -ms-transform: translateY(60px);
            transform: translateY(60px);
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01.pcScr > div {
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02.pcScr > div {
    -webkit-transition: opacity 800ms ease 1200ms, margin 800ms ease 1200ms, -webkit-transform 800ms ease 1200ms;
    transition: opacity 800ms ease 1200ms, margin 800ms ease 1200ms, -webkit-transform 800ms ease 1200ms;
    transition: opacity 800ms ease 1200ms, transform 800ms ease 1200ms, margin 800ms ease 1200ms;
    transition: opacity 800ms ease 1200ms, transform 800ms ease 1200ms, margin 800ms ease 1200ms, -webkit-transform 800ms ease 1200ms;
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01.pcScr.pcScrOn > div,
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02.pcScr.pcScrOn > div {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #ba_esteelauder2004 .whc.is-02.pcScr .whc__m::before {
    opacity: 0;
    -webkit-transition: opacity 800ms ease 1760ms, margin 800ms ease 1760ms, -webkit-transform 800ms ease 1760ms;
    transition: opacity 800ms ease 1760ms, margin 800ms ease 1760ms, -webkit-transform 800ms ease 1760ms;
    transition: opacity 800ms ease 1760ms, transform 800ms ease 1760ms, margin 800ms ease 1760ms;
    transition: opacity 800ms ease 1760ms, transform 800ms ease 1760ms, margin 800ms ease 1760ms, -webkit-transform 800ms ease 1760ms;
  }
  #ba_esteelauder2004 .whc.is-02.pcScr.pcScrOn .whc__m::before {
    opacity: 1;
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-01.pcScr > div,
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-02.pcScr > div {
    opacity: 0;
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-01.pcScr > div {
    -webkit-transition: opacity 480ms ease 1600ms, margin 480ms ease 1600ms, -webkit-transform 480ms ease 1600ms;
    transition: opacity 480ms ease 1600ms, margin 480ms ease 1600ms, -webkit-transform 480ms ease 1600ms;
    transition: opacity 480ms ease 1600ms, transform 480ms ease 1600ms, margin 480ms ease 1600ms;
    transition: opacity 480ms ease 1600ms, transform 480ms ease 1600ms, margin 480ms ease 1600ms, -webkit-transform 480ms ease 1600ms;
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-02.pcScr > div {
    -webkit-transition: opacity 480ms ease 800ms, margin 480ms ease 800ms, -webkit-transform 480ms ease 800ms;
    transition: opacity 480ms ease 800ms, margin 480ms ease 800ms, -webkit-transform 480ms ease 800ms;
    transition: opacity 480ms ease 800ms, transform 480ms ease 800ms, margin 480ms ease 800ms;
    transition: opacity 480ms ease 800ms, transform 480ms ease 800ms, margin 480ms ease 800ms, -webkit-transform 480ms ease 800ms;
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-01.pcScr.pcScrOn > div,
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-02.pcScr.pcScrOn > div {
    opacity: 1 !important;
  }
  #ba_esteelauder2004 .whc .whc__i.pcScr .c-stt,
  #ba_esteelauder2004 .whc .whc__i.pcScr .whc__i__t {
    opacity: 0;
  }
  #ba_esteelauder2004 .whc .whc__i.pcScr .c-stt {
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .whc .whc__i.pcScr .whc__i__t {
    -webkit-transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
  }
  #ba_esteelauder2004 .whc .whc__i.pcScr.pcScrOn .c-stt,
  #ba_esteelauder2004 .whc .whc__i.pcScr.pcScrOn .whc__i__t {
    opacity: 1;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .whc.is-01.spScr.is-01 .whc__tt {
    opacity: 0;
    -webkit-transition: opacity 1200ms ease-out 0ms;
    transition: opacity 1200ms ease-out 0ms;
  }
  #ba_esteelauder2004 .whc.is-01.spScr.spScrOn.is-01 .whc__tt {
    opacity: 1;
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01.spScr,
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02.spScr {
    opacity: 0;
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01.spScr,
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02.spScr {
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01.spScr::before,
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02.spScr::before {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01.spScr.spScrOn,
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02.spScr.spScrOn {
    opacity: 1 !important;
  }
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-01.spScr.spScrOn::before,
  #ba_esteelauder2004 .whc.is-01 .whc__m__p.is-02.spScr.spScrOn::before {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-01.spScr,
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-02.spScr {
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-01.spScr,
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-02.spScr {
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-01.spScr.spScrOn,
  #ba_esteelauder2004 .whc.is-02 .whc__m__p.is-02.spScr.spScrOn {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #ba_esteelauder2004 .whc .whc__i.spScr {
    opacity: 0;
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .whc .whc__i.spScr.spScrOn {
    opacity: 1;
  }
}

#ba_esteelauder2004 .prd {
  position: relative;
  max-width: 1100px;
  margin: 192px auto 0;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd {
    margin: 76px auto 0;
  }
}

#ba_esteelauder2004 .prd__bg {
  display: block;
  position: absolute;
  bottom: 146px;
  left: 100%;
  width: 196px;
  margin: 0 0 0 56px;
  background: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_prd_bg01.jpg') 50% 50% no-repeat;
  background-size: contain;
}

#ba_esteelauder2004 .prd__bg::before {
  content: '';
  display: block;
  padding-top: 100%;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .prd__ls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls {
    padding: 0 20px;
  }
}

#ba_esteelauder2004 .prd__ls > li {
  position: relative;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .prd__ls > li {
    width: 530px;
    padding: 0 0 110px;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls > li {
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .prd__ls > li::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 264px);
    border-radius: 20px;
    background: #fff;
    z-index: 1;
  }
}

#ba_esteelauder2004 .prd__ls__p {
  position: relative;
  background: 50% 0 no-repeat;
  background-size: 100% auto;
  z-index: 3;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .prd__ls__p {
    height: 264px;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls__p {
    max-width: 440px;
    margin: 0 auto;
    background-size: auto 100%;
  }
}

#ba_esteelauder2004 .prd__ls__p::before {
  content: '';
  display: block;
  position: absolute;
  bottom: -22px;
  right: 50%;
  background: 50% 100% no-repeat;
  background-size: contain;
  -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
          transform: translateX(50%);
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls__p::after {
    content: '';
    display: block;
    padding-top: 52.23881%;
  }
}

#ba_esteelauder2004 .prd__ls__i {
  padding: 70px 40px 35px;
  z-index: 2;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls__i {
    padding: 38px 5.33333vw 30px;
    border-radius: 20px;
    background: #fff;
  }
}

#ba_esteelauder2004 .prd__ls__i__tt,
#ba_esteelauder2004 .prd__ls__i__as,
#ba_esteelauder2004 .prd__ls__i__nt {
  position: relative;
  z-index: 2;
}

#ba_esteelauder2004 .prd__ls__i__tt {
  margin: 0 0 26px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: .04em;
  text-align: center;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls__i__tt {
    margin: 0 0 18px;
    font-size: 19px;
    line-height: 1.55263;
    letter-spacing: .06em;
  }
}

#ba_esteelauder2004 .prd__ls__i__as {
  margin: 0 0 15px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.78571;
  letter-spacing: .04em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls__i__as {
    margin: 0 0 18px;
    font-size: 12px;
    line-height: 1.75;
  }
}

#ba_esteelauder2004 .prd__ls__i__nt {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .04em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls__i__nt {
    font-size: 10px;
    line-height: 1.6;
  }
}

#ba_esteelauder2004 .prd__ls__i__b {
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  z-index: 3;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .prd__ls__i__b {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 40px 50px;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls__i__b {
    margin: 20px 0 0;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .prd__ls > li.is-01 .prd__ls__p {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_prd01.png');
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls > li.is-01 .prd__ls__p {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_prd01_sp.png');
  }
}

#ba_esteelauder2004 .prd__ls > li.is-01 .prd__ls__p::before {
  width: 210px;
  height: 220px;
  background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_prd-bf01.png');
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls > li.is-01 .prd__ls__p::before {
    bottom: -24px;
    width: 42.38806%;
    height: 100%;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls > li.is-02 {
    margin: 75px auto 0;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .prd__ls > li.is-02 .prd__ls__p {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_prd02.png');
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls > li.is-02 .prd__ls__p {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_prd02_sp.png');
  }
}

#ba_esteelauder2004 .prd__ls > li.is-02 .prd__ls__p::before {
  width: 100px;
  height: 211px;
  background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_prd-bf02.png');
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls > li.is-02 .prd__ls__p::before {
    bottom: -15px;
    width: 20.59701%;
    height: 100%;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .prd__bg.pcScr {
    opacity: 0;
    -webkit-transform: translateY(60px);
        -ms-transform: translateY(60px);
            transform: translateY(60px);
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .prd__bg.pcScr.pcScrOn {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .prd__ls > li.spScr .prd__ls__p::before {
    opacity: 0;
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .prd__ls > li.spScr.spScrOn .prd__ls__p::before {
    opacity: 1 !important;
  }
}

#ba_esteelauder2004 .cld {
  position: relative;
  margin: 175px 0 0;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .cld {
    margin: 80px 0 0;
  }
}

#ba_esteelauder2004 .cld__hd {
  position: relative;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .cld__hd {
    padding-bottom: 740px;
    z-index: 1;
  }
  #ba_esteelauder2004 .cld__hd::before,
  #ba_esteelauder2004 .cld__hd::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 740px;
    z-index: 1;
  }
  #ba_esteelauder2004 .cld__hd::before {
    left: 0;
    background: #f2c59a;
  }
  #ba_esteelauder2004 .cld__hd::after {
    right: 0;
    background: #e9b688;
  }
}

#ba_esteelauder2004 .cld__hd__p {
  background: 50% 50% no-repeat;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .cld__hd__p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 740px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_cld01.jpg');
    background-size: auto 100%;
    z-index: 2;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .cld__hd__p {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_cld01_sp.jpg');
    background-size: cover;
  }
  #ba_esteelauder2004 .cld__hd__p::before {
    content: '';
    display: block;
    padding-top: 59.73333%;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .cld__hd__p::before,
  #ba_esteelauder2004 .cld__hd__p::after {
    content: '';
    display: block;
    position: absolute;
    background: 50% 50% no-repeat;
    background-size: contain;
    z-index: 3;
  }
  #ba_esteelauder2004 .cld__hd__p::before {
    bottom: 100%;
    right: 50%;
    width: 67px;
    height: 67px;
    margin: 0 485px 75px 0;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_cld_pt01.png');
  }
  #ba_esteelauder2004 .cld__hd__p::after {
    bottom: -66px;
    left: 50%;
    width: 310px;
    height: 310px;
    margin: 0 0 0 397px;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_cld_pt02.png');
  }
}

#ba_esteelauder2004 .cld__hd__tt {
  padding: 0 0 36px;
  text-align: center;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .cld__hd__tt {
    max-width: 600px;
    margin: 0 auto;
    padding: 22px 20px 0;
    text-align: left;
  }
  #ba_esteelauder2004 .cld__hd__tt .c-stt {
    letter-spacing: .02em;
  }
}

#ba_esteelauder2004 .cld__bd {
  height: 800px;
  background: 50% 50% no-repeat;
  background-size: cover;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .cld__bd {
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_cld02.jpg');
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .cld__bd {
    height: auto;
    margin: 73px auto 0;
    padding: 11.46667vw 0 12.8vw;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_cld02_sp.jpg');
  }
}

@media (min-width: 600px) and (max-width: 899.99px) {
  #ba_esteelauder2004 .cld__bd {
    padding: 68.8px 0 76.8px;
  }
}

#ba_esteelauder2004 .cld__bd__in {
  position: relative;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .cld__bd__in {
    width: 1100px;
    height: 800px;
    margin: 0 auto;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .cld__bd__i {
    position: absolute;
    bottom: 50%;
    left: 485px;
    padding-bottom: 20px;
    -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
            transform: translateY(50%);
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .cld__bd__i__p {
    width: 380px;
    height: 159px;
    margin: 0 0 66px;
    background: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/txt_cld01.png') 50% 50% no-repeat;
    background-size: contain;
  }
}

#ba_esteelauder2004 .cld__bd__i__t {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .04em;
  white-space: nowrap;
  color: #fff;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .cld__bd__i__t {
    padding: 0 0 30px;
    font-size: 5.06667vw;
    font-weight: 500;
    line-height: 1.42105;
    text-align: center;
  }
}

@media (min-width: 600px) and (max-width: 899.99px) {
  #ba_esteelauder2004 .cld__bd__i__t {
    font-size: 30.4px;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .cld__bd__mv {
    position: absolute;
    left: 0;
    bottom: 50%;
    background: #f2ece8;
    -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
            transform: translateY(50%);
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .cld__bd__mv {
    position: relative;
    max-width: 750px;
    margin: 9.33333vw auto 0;
  }
  #ba_esteelauder2004 .cld__bd__mv__t {
    display: block;
    position: absolute;
    background: 50% 50% no-repeat;
    background-size: contain;
  }
  #ba_esteelauder2004 .cld__bd__mv__t::before {
    content: '';
    display: block;
  }
  #ba_esteelauder2004 .cld__bd__mv__t.is-01 {
    top: 0;
    left: 0;
    width: 70.4%;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/txt_cld_t01.png');
    -webkit-transform: translateY(-53.84615%);
        -ms-transform: translateY(-53.84615%);
            transform: translateY(-53.84615%);
  }
  #ba_esteelauder2004 .cld__bd__mv__t.is-01::before {
    padding-top: 24.62121%;
  }
  #ba_esteelauder2004 .cld__bd__mv__t.is-02 {
    bottom: 0;
    right: 0;
    width: 56.26667%;
    background-image: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/txt_cld_t02.png');
    -webkit-transform: translateY(32.69231%);
        -ms-transform: translateY(32.69231%);
            transform: translateY(32.69231%);
  }
  #ba_esteelauder2004 .cld__bd__mv__t.is-02::before {
    padding-top: 24.64455%;
  }
}

#ba_esteelauder2004 .cld__bd__mv > a {
  display: block;
  background: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/pic_cld_mv01.jpg') 50% 50% no-repeat;
  background-size: contain;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .cld__bd__mv > a {
    width: 405px;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .cld__bd__mv > a {
    width: 73.33333%;
    max-width: 550px;
    margin: 0 auto;
  }
}

#ba_esteelauder2004 .cld__bd__mv > a::before {
  content: '';
  display: block;
  padding-top: 177.77778%;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .cld__bd__mv > a {
    -webkit-transition: opacity 200ms ease-out 0ms;
    transition: opacity 200ms ease-out 0ms;
  }
  #ba_esteelauder2004 .cld__bd__mv > a:hover {
    opacity: .8;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .cld__hd__tt.pcScr .c-stt {
    opacity: 0;
    -webkit-transition: opacity 800ms ease-out 0ms;
    transition: opacity 800ms ease-out 0ms;
  }
  #ba_esteelauder2004 .cld__hd__tt.pcScr.pcScrOn .c-stt {
    opacity: 1;
  }
  #ba_esteelauder2004 .cld__bd__i.pcScr .cld__bd__i__p,
  #ba_esteelauder2004 .cld__bd__i.pcScr .cld__bd__i__t {
    opacity: 0;
    -webkit-transform: translateY(60px);
        -ms-transform: translateY(60px);
            transform: translateY(60px);
  }
  #ba_esteelauder2004 .cld__bd__i.pcScr .cld__bd__i__p {
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .cld__bd__i.pcScr .cld__bd__i__t {
    -webkit-transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
  }
  #ba_esteelauder2004 .cld__bd__i.pcScr.pcScrOn .cld__bd__i__p,
  #ba_esteelauder2004 .cld__bd__i.pcScr.pcScrOn .cld__bd__i__t {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .cld__hd__tt.spScr .c-stt {
    opacity: 0;
    -webkit-transition: opacity 800ms ease-out 0ms;
    transition: opacity 800ms ease-out 0ms;
  }
  #ba_esteelauder2004 .cld__hd__tt.spScr.spScrOn .c-stt {
    opacity: 1;
  }
  #ba_esteelauder2004 .cld__bd__in.spScr .cld__bd__i__t {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
  }
  #ba_esteelauder2004 .cld__bd__in.spScr .cld__bd__mv__t.is-01 {
    margin-top: 50px;
    opacity: 0;
  }
  #ba_esteelauder2004 .cld__bd__in.spScr .cld__bd__mv__t.is-02 {
    margin-bottom: -50px;
    opacity: 0;
  }
  #ba_esteelauder2004 .cld__bd__in.spScr .cld__bd__i__t {
    -webkit-transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms;
    transition: opacity 800ms ease 160ms, transform 800ms ease 160ms, margin 800ms ease 160ms, -webkit-transform 800ms ease 160ms;
  }
  #ba_esteelauder2004 .cld__bd__in.spScr .cld__bd__mv__t.is-01 {
    -webkit-transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms;
    transition: opacity 800ms ease 400ms, transform 800ms ease 400ms, margin 800ms ease 400ms, -webkit-transform 800ms ease 400ms;
  }
  #ba_esteelauder2004 .cld__bd__in.spScr .cld__bd__mv__t.is-02 {
    -webkit-transition: opacity 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, transform 800ms ease 880ms, margin 800ms ease 880ms;
    transition: opacity 800ms ease 880ms, transform 800ms ease 880ms, margin 800ms ease 880ms, -webkit-transform 800ms ease 880ms;
  }
  #ba_esteelauder2004 .cld__bd__in.spScr.spScrOn .cld__bd__i__t {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #ba_esteelauder2004 .cld__bd__in.spScr.spScrOn .cld__bd__mv__t {
    margin: 0 !important;
    opacity: 1 !important;
  }
}

#ba_esteelauder2004 .fta {
  padding: 100px 0;
  background: #fff;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta {
    padding: 80px 5.33333vw 60px;
  }
}

#ba_esteelauder2004 .fta__in {
  max-width: 1100px;
  margin: 0 auto;
}

#ba_esteelauder2004 .fta__ls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 0 40px;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__ls {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0 0 22px;
  }
}

#ba_esteelauder2004 .fta__ls > li {
  margin: 0 10px;
  font-size: 15px;
  font-weight: 500;
}

#ba_esteelauder2004 .fta__ls > li > a {
  display: block;
  position: relative;
  height: 60px;
  background: #ad6b68;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .fta__ls > li > a {
    width: 210px;
  }
}

#ba_esteelauder2004 .fta__ls > li > a > span {
  display: block;
  position: absolute;
  bottom: 50%;
  right: 50%;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 23px;
  white-space: nowrap;
  color: #fff;
  -webkit-transform: translate(50%, 50%);
      -ms-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__ls > li > a > span {
    font-size: 15px;
    font-weight: 500;
  }
}

@media (max-width: 374.99px) {
  #ba_esteelauder2004 .fta__ls > li > a > span {
    font-size: 4vw;
  }
}

#ba_esteelauder2004 .fta__ls > li > a > span img {
  display: inline-block;
  vertical-align: top;
}

#ba_esteelauder2004 .fta__ls > li > a > span::after {
  content: '';
  display: inline-block;
  width: 13px;
  height: 10px;
  margin-left: 9px;
  background: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/icon_ext01.png') 50% 50% no-repeat;
  background-size: contain;
  vertical-align: 0;
}

#ba_esteelauder2004 .fta__ls > li:nth-child(1) {
  margin: 0 200px 40px;
}

#ba_esteelauder2004 .fta__ls > li:nth-child(1) > a {
  width: 610px;
  height: 90px;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__ls > li:nth-child(1) > a {
    width: auto;
    height: 96px;
  }
}

#ba_esteelauder2004 .fta__ls > li:nth-child(1) > a > span {
  font-size: 19px;
}

@media (max-width: 374.99px) {
  #ba_esteelauder2004 .fta__ls > li:nth-child(1) > a > span {
    font-size: 5.06667vw;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__ls > li {
    width: 50%;
    margin: 0 0 10px;
    box-sizing: border-box;
  }
  #ba_esteelauder2004 .fta__ls > li:nth-child(1) {
    width: 100%;
    margin: 0 0 20px;
  }
  #ba_esteelauder2004 .fta__ls > li:nth-child(2),
  #ba_esteelauder2004 .fta__ls > li:nth-child(4) {
    padding-right: 5px;
  }
  #ba_esteelauder2004 .fta__ls > li:nth-child(3),
  #ba_esteelauder2004 .fta__ls > li:nth-child(5) {
    padding-left: 5px;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__tl,
  #ba_esteelauder2004 .fta__cr,
  #ba_esteelauder2004 .fta__pd {
    opacity: .8;
  }
}

#ba_esteelauder2004 .fta__tl {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.91667;
  letter-spacing: .04em;
  text-align: center;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__tl {
    margin: 0 0 10px;
  }
}

#ba_esteelauder2004 .fta__cr,
#ba_esteelauder2004 .fta__pd {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .04em;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__cr,
  #ba_esteelauder2004 .fta__pd {
    font-size: 10px;
    line-height: 1.6;
  }
}

#ba_esteelauder2004 .fta__cr {
  overflow: hidden;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .fta__cr {
    margin: 10px 0 0 -12px;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .fta__cr > li {
    float: left;
    overflow: hidden;
    margin-left: 12px;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__cr > li {
    display: inline;
  }
  #ba_esteelauder2004 .fta__cr > li + li::before {
    content: '\3000';
  }
}

#ba_esteelauder2004 .fta__pd > li {
  overflow: hidden;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .fta__pd > li > div {
    display: block;
  }
  #ba_esteelauder2004 .fta__pd > li > div:nth-child(1) {
    float: left;
  }
  #ba_esteelauder2004 .fta__pd > li > div:nth-child(2) {
    overflow: hidden;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__pd > li > div {
    display: inline;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .fta__pd > li > div > span {
    display: block;
    float: left;
    margin-right: 12px;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__pd > li > div > span {
    display: inline;
  }
  #ba_esteelauder2004 .fta__pd > li > div > span + span::before {
    content: '\3000';
  }
}

#ba_esteelauder2004 .fta__mq {
  width: 610px;
  margin: 32px auto 40px;
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__mq {
    width: auto;
    margin: 56px auto 30px;
  }
}

#ba_esteelauder2004 .fta__mq a {
  display: block;
  position: relative;
  height: 90px;
  border: 1px solid #f36586;
  box-sizing: border-box;
  background: #fff;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .fta__mq a {
    -webkit-transition: background-color 350ms ease-out 0ms;
    transition: background-color 350ms ease-out 0ms;
  }
  #ba_esteelauder2004 .fta__mq a:hover {
    background-color: rgba(243, 101, 134, .1);
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__mq a {
    height: 103px;
  }
}

#ba_esteelauder2004 .fta__mq a > span {
  display: block;
  position: absolute;
  bottom: 50%;
  right: 0;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
          transform: translateY(50%);
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .fta__mq a > span {
    right: 50%;
    width: auto;
    padding: 0 22px 0 0;
    -webkit-transform: translate(50%, 50%);
        -ms-transform: translate(50%, 50%);
            transform: translate(50%, 50%);
  }
  #ba_esteelauder2004 .fta__mq a > span::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 47%;
    right: 0;
    width: 13px;
    height: 10px;
    background: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/icon_ext02.png') 50% 50% no-repeat;
    background-size: contain;
    -webkit-transform: translate(0, 50%);
        -ms-transform: translate(0, 50%);
            transform: translate(0, 50%);
  }
}

#ba_esteelauder2004 .fta__mq a > span img {
  display: inline-block;
  width: 160px;
  vertical-align: middle;
}

#ba_esteelauder2004 .fta__mq a > span span {
  display: inline-block;
  position: relative;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .06em;
  color: #f36586;
  vertical-align: middle;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .fta__mq a > span span {
    padding: 0 22px 0 0;
    margin: 0 0 0 10px;
  }
  #ba_esteelauder2004 .fta__mq a > span span::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 47%;
    right: 0;
    width: 13px;
    height: 10px;
    background: url('https://cf.hpplus.jp/saturn/ba_esteelauder2004/img/icon_ext02.png') 50% 50% no-repeat;
    background-size: contain;
    -webkit-transform: translate(0, 50%);
        -ms-transform: translate(0, 50%);
            transform: translate(0, 50%);
  }
}

#ba_esteelauder2004 .fta__sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#ba_esteelauder2004 .fta__sns > li {
  width: 50px;
}

#ba_esteelauder2004 .fta__sns > li + li {
  margin-left: 10px;
}

#ba_esteelauder2004 .fta__sns > li a {
  display: block;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .fta__sns > li a {
    -webkit-transition: opacity 250ms ease-out 0ms;
    transition: opacity 250ms ease-out 0ms;
  }
  #ba_esteelauder2004 .fta__sns > li a:hover {
    opacity: .7;
  }
}

#ba_esteelauder2004 .mdl {
  display: none;
  position: relative;
  box-sizing: border-box;
}

#ba_esteelauder2004 .mdl::before {
  content: '';
  display: block;
  padding-top: 177.77778%;
}

#ba_esteelauder2004 .mdl.is-shown {
  display: block;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .mdl#movie01 {
    width: 56.25vh;
    max-width: 540px;
    max-height: 100vh;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .mdl#movie01 {
    width: 56.25vh;
    max-width: 540px;
    max-height: calc(100vh - 140px);
  }
}

#ba_esteelauder2004 .mdl__fr {
  position: absolute;
  top: 0;
  width: 100%;
}

#ba_esteelauder2004 .mdl__fr__cls {
  display: block;
  position: absolute;
  border-radius: 50%;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .mdl__fr__cls {
    top: 0;
    left: 100%;
    width: 60px;
    height: 60px;
    margin: 0 0 32px 16px;
  }
}

@media (max-width: 899.99px) {
  #ba_esteelauder2004 .mdl__fr__cls {
    top: -45px;
    left: auto;
    right: 0;
    width: 50px;
    height: 50px;
    margin: 0 0 0 0;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}

#ba_esteelauder2004 .mdl__fr__cls::before,
#ba_esteelauder2004 .mdl__fr__cls::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 50%;
  right: 50%;
  -webkit-transform: translate(50%, 50%);
      -ms-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
  background: #fff;
}

#ba_esteelauder2004 .mdl__fr__cls::before {
  width: 36px;
  height: 2px;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .mdl__fr__cls::before {
    -webkit-transition: width 160ms ease-out 0ms;
    transition: width 160ms ease-out 0ms;
  }
}

#ba_esteelauder2004 .mdl__fr__cls::after {
  width: 2px;
  height: 36px;
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .mdl__fr__cls::after {
    -webkit-transition: height 160ms ease-out 0ms;
    transition: height 160ms ease-out 0ms;
  }
}

@media (min-width: 900px) {
  #ba_esteelauder2004 .mdl__fr__cls {
    cursor: pointer;
  }
  #ba_esteelauder2004 .mdl__fr__cls:hover::before {
    width: 50px;
  }
  #ba_esteelauder2004 .mdl__fr__cls:hover::after {
    height: 50px;
  }
}

#ba_esteelauder2004 .mdl video {
  position: absolute;
  bottom: 50%;
  right: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -webkit-transform: translate(50%, 50%);
      -ms-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
  background: #000;
}