@charset "UTF-8";
/*
body {
  @include inpc(){
    background: url(top_pc.jpg)no-repeat top center;
  }
  @include intb(){
    background: url(top_tb.jpg)no-repeat top center;
  }
  @include insp(){
    background: url(top_sp.jpg)no-repeat top center;
    background-size: 375px;
  }
}
*/
.main {
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 3; }
  @media (min-width: 769px) {
    .main {
      min-width: 1056px; } }

.base-container {
  overflow: visible;
  position: relative; }
  @media (min-width: 769px) {
    .base-container {
      margin: 0 auto;
      width: 1056px; } }

.shindan {
  display: none;
  position: fixed;
  z-index: 3;
}
@media (min-width: 769px) {
  .shindan {
    width: 278px;
    right: -20px;
    bottom: -10px;
    z-index: 4;
  }
  .shindan img {
    width: 100%;
  }
}
@media (min-width: 642px) and (max-width: 768px) {
  .shindan {
    width: 258px;
    right: -10px;
    bottom: -10px;
  }
  .shindan img {
    width: 100%;
  }
}
@media (max-width: 641px) {
  .shindan {
    width: 30.4%;
    right: -10px;
    bottom: 7vh;
  }
  .shindan img {
    width: 100%;
  }
}

.footer {
  position: relative; }

/***************************
グローバルメニュー処理
****************************/
.series-logo {
  transition-delay: 0.4s;
  transition-duration: 0.4s; }

body[data-enablemenu=false] .cl-nav {
  opacity: 0; }

body[data-enablemenu=false] .series-logo {
  opacity: 0; }

/***************************
ファーストビュー
****************************/
.firstview {
  background-color: #fa98bc;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  width: 100%; }
  .firstview__text1 {
    display: block;
    position: absolute;
    z-index: 2; }
    @media (min-width: 769px) {
      .firstview__text1 {
        left: 32px;
        max-width: 1078px;
        top: 28px;
        width: calc( 100% - 64px); } }
    @media (min-width: 642px) and (max-width: 768px) {
      .firstview__text1 {
        left: 47px;
        max-width: 628px;
        top: 47px;
        width: calc( 100% - 94px); } }
    @media (max-width: 641px) {
      .firstview__text1 {
        left: 23px;
        top: 24px;
        width: 290px; } }
  .firstview__text2 {
    display: block;
    position: absolute;
    z-index: 2; }
    @media (min-width: 769px) {
      .firstview__text2 {
        bottom: 29px;
        right: 29px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .firstview__text2 {
        bottom: 46px;
        right: 42px; } }
    @media (max-width: 641px) {
      .firstview__text2 {
        bottom: 23px;
        right: 19px;
        width: 255px; } }
  .firstview__shindan {
    display: block;
    position: absolute;
    z-index: 4; }
    @media (min-width: 769px) {
      .firstview__shindan {
        width: 288px;
        bottom: -10px;
        left: -10px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .firstview__shindan {
        width: 268px;
        bottom: -20px;
        left: -10px;
      }
      .firstview__shindan img {
        width: 100%;
      }
    }
    @media (max-width: 641px) {
      .firstview__shindan {
        width: 30.4%;
        bottom: 90px;
        left: 10px;
      }
      .firstview__shindan img {
        width: 100%;
      }
    }
  .firstview__mainimg {
    position: absolute;
    z-index: 1; }
    @media (min-width: 769px) {
      .firstview__mainimg {
        background: url(/images/cleansing3/top/pc/fv_pc.jpg) no-repeat center;
        background-size: cover;
        bottom: 50%;
        height: calc( 100% - 160px);
        right: 50%;
        transform: translate(50%, 50%);
        width: calc( 100% - 160px); } }
    @media (min-width: 642px) and (max-width: 768px) {
      .firstview__mainimg {
        background: url(/images/cleansing3/top/tbsp/fv_tb.jpg) no-repeat center;
        background-size: cover;
        height: calc( 100% - 235px);
        left: 48px;
        top: 145px;
        width: calc( 100% - 96px); } }
    @media (max-width: 641px) {
      .firstview__mainimg {
        background: url(/images/cleansing3/top/tbsp/fv_sp.jpg) no-repeat center;
        background-size: cover;
        height: calc( 100% - 205px);
        left: 24px;
        top: 153px;
        width: calc( 100% - 48px); } }
  .firstview__img {
    display: block;
    max-width: 100%; }

/***************************
セクション1
****************************/
@media (min-width: 769px) {
  .sec01 {
    padding-top: 160px;
    height: 902px; } }

@media (min-width: 642px) and (max-width: 768px) {
  .sec01 {
    padding-top: 184px;
    height: 1292px; } }

@media (max-width: 641px) {
  .sec01 {
    height: 938px;
    padding-top: 130px; } }

.sec01__bg {
  background-color: #fa98bc; }

.sec01__head {
  position: relative;
  z-index: 4; }
  @media (min-width: 769px) {
    .sec01__head {
      margin-bottom: 72px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .sec01__head {
      margin-bottom: 440px; } }
  @media (max-width: 641px) {
    .sec01__head {
      margin-bottom: 250px; } }

.sec01__title {
  display: block; }
  @media (min-width: 769px) {
    .sec01__title {
      width: 562px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .sec01__title {
      margin: 0 auto;
      width: 562px; } }
  @media (max-width: 641px) {
    .sec01__title {
      margin: 0 auto;
      width: 241px; } }

.sec01__p {
  font-family: 'A1 Gothic M';
  position: relative;
  z-index: 3; }
  @media (min-width: 769px) {
    .sec01__p {
      font-size: 20px;
      font-weight: bold;
      line-height: 40px;
      margin-bottom: 32px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .sec01__p {
      font-size: 20px;
      font-weight: bold;
      line-height: 40px;
      margin-bottom: 31px;
      text-align: center; } }
  @media (max-width: 641px) {
    .sec01__p {
      font-size: 16px;
      line-height: 25px;
      margin-bottom: 18px;
      text-align: center; } }

.sec01__img01 {
  position: absolute;
  z-index: 2; }
  @media (min-width: 769px) {
    .sec01__img01 {
      right: -102px;
      top: 256px;
      width: 614px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .sec01__img01 {
      right: 50%;
      transform: translateX(50%);
      top: 219px;
      width: 614px; } }
  @media (max-width: 641px) {
    .sec01__img01 {
      right: 50%;
      transform: translateX(50%);
      top: 194px;
      width: 384px; } }

.sec01__img02 {
  position: absolute;
  z-index: 3; }
  @media (min-width: 769px) {
    .sec01__img02 {
      top: 365px;
      right: 0;
      width: 431px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .sec01__img02 {
      right: 50%;
      transform: translateX(50%);
      top: 328px;
      width: 429px; } }
  @media (max-width: 641px) {
    .sec01__img02 {
      right: 50%;
      transform: translateX(50%);
      top: 282px;
      width: 235px; } }

/***************************
中帯
****************************/
.page-subhead {
  background-color: #34cfbd;
  overflow: hidden;
  position: relative; }
  @media (min-width: 642px) {
    .page-subhead {
      height: 190px; } }
  @media (max-width: 641px) {
    .page-subhead {
      height: 118px; } }
  .page-subhead__img {
    display: block;
    position: absolute;
    right: 50%;
    transform: translateX(50%); }
    @media (min-width: 642px) {
      .page-subhead__img {
        height: 100%; } }
    @media (max-width: 641px) {
      .page-subhead__img {
        height: 131px;
        top: -6px; } }

/***************************
商品
****************************/
.product-item {
  overflow: hidden;
  position: relative; }
  @media (min-width: 769px) {
    .product-item {
      height: 100vh;
      max-height: 1000px;
      min-height: 780px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .product-item {
      height: 1259px;
      padding-top: 855px; } }
  @media (max-width: 641px) {
    .product-item {
      height: 920px;
      padding-top: 561px; } }
  .product-item__bg {
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%); }
    @media (min-width: 769px) {
      .product-item__bg {
        height: 1000px;
        width: 2000px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__bg {
        height: 102%;
        width: 1000px; } }
    @media (max-width: 641px) {
      .product-item__bg {
        height: 100%;
        width: 640px; } }
    @media (min-width: 769px) {
      .product-item__bg_gel {
        background: url(/images/cleansing3/top/pc/bg_gel.jpg) no-repeat center; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__bg_gel {
        background: url(/images/cleansing3/top/tbsp/bgtb01.jpg) no-repeat center; } }
    @media (max-width: 641px) {
      .product-item__bg_gel {
        background: url(/images/cleansing3/top/tbsp/bgsp01.jpg) no-repeat center;
        background-size: 680px auto; } }
    @media (min-width: 769px) {
      .product-item__bg_sheet {
        background: url(/images/cleansing3/top/pc/bg_sheet.jpg) no-repeat center; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__bg_sheet {
        background: url(/images/cleansing3/top/tbsp/bgtb02.jpg) no-repeat center; } }
    @media (max-width: 641px) {
      .product-item__bg_sheet {
        background: url(/images/cleansing3/top/tbsp/bgsp02.jpg) repeat-x center;
        background-size: 694px auto; } }
    @media (min-width: 769px) {
      .product-item__bg_water {
        background: url(/images/cleansing3/top/pc/bg_water.jpg) no-repeat center; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__bg_water {
        background: url(/images/cleansing3/top/tbsp/bgtb03.jpg) no-repeat center; } }
    @media (max-width: 641px) {
      .product-item__bg_water {
        background: url(/images/cleansing3/top/tbsp/bgsp03.jpg) repeat-x center;
        background-size: 694px auto; } }
  .product-item__imgbox {
    height: 100%;
    width: 100%;
    z-index: 2; }
    @media (min-width: 769px) {
      .product-item__imgbox {
        position: relative; } }
    @media (max-width: 769px) {
      .product-item__imgbox {
        left: 0;
        position: absolute;
        top: 0; } }
    @media (min-width: 769px) {
      .product-item__imgbox_gel .product-item__main {
        transform: translate(93px, -231px);
        width: 272px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__imgbox_gel .product-item__main {
        transform: translate(92px, -284px);
        width: 273px; } }
    @media (max-width: 641px) {
      .product-item__imgbox_gel .product-item__main {
        transform: translate(57px, -219px);
        width: 175px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__imgbox_sheet .product-item__copy {
        transform: translate(158px, -511px);
        width: 324px; } }
    @media (max-width: 641px) {
      .product-item__imgbox_sheet .product-item__copy {
        transform: translate(117px, -391px); } }
    @media (min-width: 769px) {
      .product-item__imgbox_sheet .product-item__main {
        transform: translate(111px, -200px);
        width: 325px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__imgbox_sheet .product-item__main {
        transform: translate(111px, -269px);
        width: 325px; } }
    @media (max-width: 641px) {
      .product-item__imgbox_sheet .product-item__main {
        transform: translate(68px, -214px);
        width: 208px; } }
    @media (min-width: 769px) {
      .product-item__imgbox_water .product-item__copy {
        transform: translate(-43px, -298px);
        width: 342px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__imgbox_water .product-item__copy {
        transform: translate(209px, -506px);
        width: 425px; } }
    @media (max-width: 641px) {
      .product-item__imgbox_water .product-item__copy {
        transform: translate(156px, -397px);
        width: 316px; } }
    @media (min-width: 769px) {
      .product-item__imgbox_water .product-item__main {
        transform: translate(91px, -207px);
        width: 277px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__imgbox_water .product-item__main {
        transform: translate(91px, -263px);
        width: 277px; } }
    @media (max-width: 641px) {
      .product-item__imgbox_water .product-item__main {
        transform: translate(57px, -223px);
        width: 178px; } }
  .product-item__copy {
    position: absolute;
    right: 50%;
    top: 50%; }
    @media (min-width: 769px) {
      .product-item__copy {
        transform: translate(-60px, -300px);
        width: 324px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__copy {
        transform: translate(158px, -530px);
        width: 324px; } }
    @media (max-width: 641px) {
      .product-item__copy {
        transform: translate(117px, -396px);
        width: 241px; } }
  .product-item__main {
    position: absolute;
    right: 50%;
    top: 50%; }
  .product-item__container {
    font-family: 'A1 Gothic M';
    z-index: 2; }
    @media (min-width: 769px) {
      .product-item__container {
        left: calc( 50% + 175px);
        position: absolute;
        top: 231px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__container {
        position: relative;
        text-align: center; } }
    @media (max-width: 641px) {
      .product-item__container {
        position: relative;
        text-align: center; } }
  .product-item__head {
    color: #fff;
    font-family: 'A1 Gothic B'; }
    @media (min-width: 769px) {
      .product-item__head {
        font-size: 32px;
        margin-bottom: 16px;
        line-height: 46px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__head {
        font-size: 32px;
        margin-bottom: 16px;
        line-height: 46px; } }
    @media (max-width: 641px) {
      .product-item__head {
        font-size: 24px;
        margin-bottom: 4px;
        line-height: 46px; } }
  @media (min-width: 769px) {
    .product-item__p {
      font-size: 20px;
      margin-bottom: 8px;
      line-height: 34px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .product-item__p {
      font-size: 20px;
      margin-bottom: 8px;
      line-height: 34px; } }
  @media (max-width: 641px) {
    .product-item__p {
      font-size: 16px;
      line-height: 27px;
      margin-bottom: 14px;
      padding: 0 5%; } }
  .product-item__small {
    font-size: 0.5em;
    line-height: 1em;
    margin-bottom: 19px; }
  @media (min-width: 769px) {
    .product-item__name {
      font-size: 16px;
      margin-bottom: 3px;
      line-height: 1.6em; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .product-item__name {
      font-size: 16px;
      margin-bottom: 3px;
      line-height: 1.6em; } }
  @media (max-width: 641px) {
    .product-item__name {
      font-size: 14px;
      margin-bottom: 1px;
      line-height: 1.6em; } }
  @media (min-width: 769px) {
    .product-item__info {
      font-size: 16px;
      margin-bottom: 33px;
      line-height: 1.6em; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .product-item__info {
      font-size: 16px;
      margin-bottom: 33px;
      line-height: 1.6em; } }
  @media (max-width: 641px) {
    .product-item__info {
      font-size: 14px;
      margin-bottom: 18px;
      line-height: 1.6em; } }
  .product-item__anc {
    display: block; }
  .product-item__anc:last-child {
    margin-top: 15px; }
  .product-item__btnimg {
    width: 286px; }
    @media (min-width: 642px) and (max-width: 768px) {
      .product-item__btnimg {
        transform: translateX(3px); } }
    @media (max-width: 641px) {
      .product-item__anc:last-child {
        margin-top: 15px; } }
  .product-item sup {
    font-size: 0.5em; }

@media (min-width: 642px) and (max-width: 768px) {
  .product-item_2 {
    height: 1222px;
    padding-top: 791px; } }

@media (max-width: 641px) {
  .product-item_2 {
    height: 934px;
    padding-top: 529px; } }

@media (min-width: 769px) {
  .product-item_2 .product-item__container {
    top: 217px; } }

@media (max-width: 641px) {
  .product-item_2 .product-item__p {
    margin-bottom: 8px; } }

@media (min-width: 642px) and (max-width: 768px) {
  .product-item_3 {
    height: 1204px;
    padding-top: 801px; } }

@media (max-width: 641px) {
  .product-item_3 {
    height: 944px;
    padding-top: 551px; } }

/***************************
クレンジングの勉強部屋
****************************/
.sec02 {
  background-color: #ffeb57; }
  @media (min-width: 769px) {
    .sec02 {
      height: 758px;
      padding-top: 69px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .sec02 {
      height: 1269px;
      padding-top: 66px; } }
  @media (max-width: 641px) {
    .sec02 {
      height: 1122px;
      padding-top: 41px; } }
  @media (min-width: 769px) {
    .sec02__head {
      margin-bottom: 46px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .sec02__head {
      margin-bottom: 63px; } }
  @media (max-width: 641px) {
    .sec02__head {
      margin-bottom: 48px; } }
  .sec02__title {
    display: block;
    margin: 0 auto; }
    @media (min-width: 642px) {
      .sec02__title {
        width: 371px; } }
    @media (max-width: 641px) {
      .sec02__title {
        width: 308px; } }
  .sec02__content {
    margin: 0 auto; }
    @media (min-width: 769px) {
      .sec02__content {
        display: flex;
        justify-content: space-between;
        width: 1056px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .sec02__content {
        max-width: 676px;
        width: 88%; } }
    @media (max-width: 641px) {
      .sec02__content {
        max-width: 327px;
        width: 87%; } }

.lesson {
  position: relative; }
  @media (min-width: 769px) {
    .lesson {
      padding-top: 50px;
      width: 316px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .lesson {
      padding-top: 34px;
      margin-bottom: 52px; } }
  @media (max-width: 641px) {
    .lesson {
      padding-top: 30px;
      margin-bottom: 34px; } }
  .lesson__head {
    position: absolute; }
    @media (min-width: 769px) {
      .lesson__head {
        left: -38px;
        top: 0; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .lesson__head {
        left: 232px;
        top: 0; } }
    @media (max-width: 641px) {
      .lesson__head {
        left: 79px;
        top: 0; } }
  @media (min-width: 642px) {
    .lesson__num {
      width: 171px; } }
  @media (max-width: 641px) {
    .lesson__num {
      width: 129px; } }
  @media (min-width: 769px) {
    .lesson__img {
      margin-bottom: 31px;
      width: 100%; } }
  @media (max-width: 641px) {
    .lesson__img {
      width: 164px; } }
  .lesson__title {
    font-family: 'A1 Gothic M';
    font-size: 24px;
    line-height: 1em;
    margin-bottom: 14px; }
    @media (min-width: 642px) and (max-width: 768px) {
      .lesson__title {
        position: absolute;
        right: 0;
        text-align: center;
        top: 63px;
        width: 47%; } }
    @media (max-width: 641px) {
      .lesson__title {
        position: absolute;
        right: 0;
        text-align: center;
        top: 64px;
        width: 140px; } }
  .lesson__p {
    font-family: 'A1 Gothic R';
    font-size: 16px;
    line-height: 26px; }
    @media (min-width: 642px) and (max-width: 768px) {
      .lesson__p {
        position: absolute;
        right: 0;
        text-align: center;
        top: 100px;
        width: 47%; } }
    @media (max-width: 641px) {
      .lesson__p {
        position: absolute;
        right: 0;
        text-align: center;
        top: 100px;
        width: 140px; } }
  .lesson__anc {
    height: 87px;
    position: absolute;
    width: 87px; }
    @media (min-width: 769px) {
      .lesson__anc {
        bottom: 6px;
        right: 0; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .lesson__anc {
        bottom: 32px;
        right: 113px; } }
    @media (max-width: 641px) {
      .lesson__anc {
        bottom: 39px;
        height: 52px;
        right: 42px;
        width: 52px; } }
  .lesson__btnimg {
    display: block;
    width: 100%; }

@media (max-width: 769px) {
  .lesson_2 {
    text-align: right; } }

@media (min-width: 642px) and (max-width: 768px) {
  .lesson_2 .lesson__head {
    left: auto;
    right: 232px; } }

.lesson_2 .lesson__title {
  left: 0;
  right: auto;
  top: 50px; }

@media (max-width: 769px) {
  .lesson_2 .lesson__p {
    left: 0;
    right: auto;
    top: 87px; } }

@media (min-width: 642px) and (max-width: 768px) {
  .lesson_2 .lesson__anc {
    bottom: 18px;
    left: 113px;
    right: auto; } }

@media (max-width: 641px) {
  .lesson_2 .lesson__anc {
    bottom: 26px;
    left: 43px;
    right: auto; } }

@media (min-width: 642px) and (max-width: 768px) {
  .lesson_3 .lesson__title {
    top: 54px; } }

@media (max-width: 641px) {
  .lesson_3 .lesson__title {
    top: 50px; } }

@media (min-width: 642px) and (max-width: 768px) {
  .lesson_3 .lesson__p {
    top: 92px; } }

@media (max-width: 641px) {
  .lesson_3 .lesson__p {
    top: 88px; } }

@media (min-width: 642px) and (max-width: 768px) {
  .lesson_3 .lesson__anc {
    bottom: 50px; } }

@media (max-width: 641px) {
  .lesson_3 .lesson__anc {
    bottom: 28px; } }

/***************************
ふきとり画像
****************************/
.swipeimg {
  opacity: 0;
  display: block;
  position: absolute;
  z-index: 1; }
  .swipeimg_lt {
    left: -350px;
    position: fixed;
    top: -150px; }
  .swipeimg_lb {
    bottom: -323px;
    left: -333px;
    position: fixed; }
  @media (min-width: 642px) and (max-width: 768px) {
    .swipeimg_l1 {
      right: calc( 50% + 259px);
      top: 1262px; } }
  @media (max-width: 641px) {
    .swipeimg_l1 {
      right: calc( 50% + 123px);
      top: 943px;
      width: 264px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .swipeimg_l2 {
      right: calc( 50% + 235px);
      top: 2517px; } }
  @media (max-width: 641px) {
    .swipeimg_l2 {
      right: calc( 50% + 115px);
      top: 1810px;
      width: 339px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .swipeimg_l3 {
      right: calc( 50% + 228px);
      top: 3635px; } }
  @media (max-width: 641px) {
    .swipeimg_l3 {
      right: calc( 50% + 118px);
      top: 2639px;
      width: 305px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .swipeimg_l4 {
      right: calc( 50% + 247px);
      top: 5040px; } }
  @media (max-width: 641px) {
    .swipeimg_l4 {
      right: calc( 50% + 122px);
      top: 3621px;
      width: 485px; } }

.swipebox {
  background-color: #f00;
  opacity: 0;
  display: block;
  position: absolute;
  z-index: 1; }
  .swipebox_logo {
    background: url(/images/cleansing3/top/pc/swipe_logoback.png) no-repeat right bottom;
    position: absolute;
    top: 0;
    z-index: 9998; }
    @media (min-width: 769px) {
      .swipebox_logo {
        background-size: 512px 469px;
        height: 176px;
        width: 400px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .swipebox_logo {
        background-size: 512px 311px;
        height: 151px;
        width: 390px; } }
    @media (max-width: 641px) {
      .swipebox_logo {
        background-size: 302px auto;
        height: 109px;
        width: 254px; } }
  .swipebox_menu {
    background: url(/images/cleansing3/top/pc/swipe_menuback.png) no-repeat left bottom;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9998; }
    @media (min-width: 769px) {
      .swipebox_menu {
        background-size: 297px auto;
        height: 128px;
        width: 161px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .swipebox_menu {
        background-size: 238px auto;
        height: 128px;
        width: 163px; } }
    @media (max-width: 641px) {
      .swipebox_menu {
        background-size: 147px auto;
        height: 81px;
        width: 90px; } }
  .swipebox_r1 {
    background: url(/images/cleansing3/top/tbsp/swipe_r1.png) no-repeat bottom left;
    left: calc( 100% - ( 50% - 224px ));
    width: calc( 50% - 104px); }
    @media (min-width: 642px) and (max-width: 768px) {
      .swipebox_r1 {
        background-size: 712px;
        height: 426px;
        left: calc( 100% - ( 50% - 224px ));
        top: 1174px;
        width: calc( 50% - 224px); } }
    @media (max-width: 641px) {
      .swipebox_r1 {
        background-size: 356px;
        height: 213px;
        left: calc( 100% - ( 50% - 104px ));
        top: 880px;
        width: calc( 50% - 104px); } }
  .swipebox_r2 {
    background: url(/images/cleansing3/top/tbsp/swipe_r2.png) no-repeat bottom left; }
    @media (min-width: 642px) and (max-width: 768px) {
      .swipebox_r2 {
        background-size: 734px;
        height: 669px;
        top: 2354px;
        left: calc( 100% - ( 50% - 246px ));
        width: calc( 50% - 246px); } }
    @media (max-width: 641px) {
      .swipebox_r2 {
        background-size: 367px;
        height: 335px;
        top: 1724px;
        left: calc( 100% - ( 50% - 123px ));
        width: calc( 50% - 123px); } }
  .swipebox_r3 {
    background: url(/images/cleansing3/top/tbsp/swipe_r3.png) no-repeat bottom left; }
    @media (min-width: 642px) and (max-width: 768px) {
      .swipebox_r3 {
        background-size: 758px;
        height: 397px;
        left: calc( 100% - ( 50% - 217px ));
        top: 3808px;
        width: calc( 50% - 217px); } }
    @media (max-width: 641px) {
      .swipebox_r3 {
        background-size: 379px;
        height: 198px;
        left: calc( 100% - ( 50% - 109px ));
        top: 2725px;
        width: calc( 50% - 109px); } }
  .swipebox_r4 {
    background: url(/images/cleansing3/top/tbsp/swipe_r4.png) no-repeat bottom left; }
    @media (min-width: 642px) and (max-width: 768px) {
      .swipebox_r4 {
        background-size: 530px;
        height: 513px;
        left: calc( 100% - ( 50% - 244px ));
        top: 4800px;
        width: calc( 50% - 244px); } }
    @media (max-width: 641px) {
      .swipebox_r4 {
        background-size: 265px;
        height: 256px;
        left: calc( 100% - ( 50% - 127px ));
        top: 3512px;
        width: calc( 50% - 127px); } }
  .swipebox_r5 {
    z-index: 3; }
    @media (min-width: 769px) {
      .swipebox_r5 {
        background: url(/images/cleansing3/top/pc/swipe02.png) no-repeat bottom left;
        height: 614px;
        left: calc( 100% - ( 50% - 515px ));
        top: -300px;
        width: calc( 50% - 515px); } }
    @media (min-width: 642px) and (max-width: 768px) {
      .swipebox_r5 {
        background: url(/images/cleansing3/top/tbsp/swipe_r5.png) no-repeat bottom left;
        background-size: 793px;
        height: 629px;
        left: calc( 100% - ( 50% - 241px ));
        top: -360px;
        width: calc( 50% - 241px); } }
    @media (max-width: 641px) {
      .swipebox_r5 {
        background: url(/images/cleansing3/top/tbsp/swipe_r5.png) no-repeat bottom left;
        background-size: 397px;
        height: 315px;
        left: calc( 100% - ( 50% - 106px ));
        top: -180px;
        width: calc( 50% - 106px); } }
  @media (min-width: 769px) {
    .swipebox_r6 {
      background: url(/images/cleansing3/top/pc/swipe01.png) no-repeat bottom left;
      height: 501px;
      left: calc( 100% - ( 50% - 542px ));
      top: 628px;
      width: calc( 50% - 542px); } }
  @media (min-width: 769px) {
    .swipebox_rb {
      background: url(/images/cleansing3/top/pc/swipe_rightbottom.png) no-repeat bottom left;
      height: 485px;
      left: calc( 100% - ( 50% - 367px ));
      position: fixed;
      bottom: -209px;
      width: calc( 50% - 367px); } }

.main[data-swipe-stickey=off] .swipeimg_lt,
.main[data-swipe-stickey=off] .swipeimg_lb,
.main[data-swipe-stickey=off] .swipebox_rb {
  position: absolute; }

/*# sourceMappingURL=top.css.map */