.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

@media only screen and (max-width: 640px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}


.special-skimen-bg {
    background-repeat: no-repeat;
    /* background-position: center center; */
    background-position: center right;
    background-size: cover;   
    background-image: url(/content/dam/sites/kanebo/www-lissage-jp/special/skimen/250718_img01_bg2.png);
}

@media only screen and (max-width: 640px) {
.special-skimen-bg {
    background-position: top center;  
    background-size: 100% auto;
    background-image: url(/content/dam/sites/kanebo/www-lissage-jp/special/skimen/250718_img01_bg_sp.png);
  }
}


.special-skimen-bg2 {
    background-repeat: no-repeat;
    /* background-position: center center; */
    background-position: center;
    background-size: cover;   
    background-image: url(/content/dam/sites/kanebo/www-lissage-jp/special/skimen/250718_img02_bg5.jpg);
}

@media only screen and (max-width: 640px) {
.special-skimen-bg2 {
    background-position: top center;  
    background-size: cover;
    background-image: url(/content/dam/sites/kanebo/www-lissage-jp/special/skimen/250718_img02_bg5.jpg);
  }
}



.img-fade-area {
  width: 100%;
   aspect-ratio: 2657 / 1000;
  position: relative;
}

@media only screen and (max-width: 640px) {
.img-fade-area {
    aspect-ratio: 750 / 778;
  }
}

.img-fade-area .fade-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.img-fade-area .fade-img.visible {
  opacity: 1;
}


.narrow-div::before {
  content: '';
  position: fixed;
  top: 0; 
  /* left: -200%; */
  width: 100%;
  height: 100%;
  background: #0e075b;
  z-index: -1;
  pointer-events: none; /* 背景だけなのでクリックを通す */
}

@media (min-width: 641px) and (max-width: 1024px) {
.narrow-div::before {
    content: '';
    position: fixed;
    top: 0; 
    /* left: -201%; */
    width: 100%;
    height: 100%;
    background: #0e075b;
    z-index: -1;
    pointer-events: none; /* 背景だけなのでクリックを通す */
  }
} 

@media only screen and (max-width: 640px) {
.narrow-div::before {
    content: '';
    position: fixed;
    top: 0; 
    /* left: -100%; */
    width: 100%;
    height: 100%;
    background: #0e075b;
    z-index: -1;
    pointer-events: none; /* 背景だけなのでクリックを通す */
  }
} 

/*
.narrow .g-Column__inner .g-Column__cols {
  padding: 0;
}
*/


.narrow .l-Column__cols {
  padding: 0;
}

.narrow.l-Column.is-gutter--m .l-Column__cols {
  padding: 0;
}

@media only screen and (min-width: 641px) {
  .sample_coupon_banner{
    float: right;
  }
}