@charset "utf-8";

/* SP */
.lpBannerToast {
  position: fixed;
  display: none;
  width: calc(94em / 14);
  bottom: calc(84em / 14);
  right: 0;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 .4rem .6rem rgba(0,0,0,.32);
  z-index: 13;
  transition: opacity 2s ease-in-out;
  opacity: 1;
}

.lpBannerToast >a {
  display: inline-block;
  transition: all 0.4s;
}

.lpBannerToast img {
	max-width: 100%;
	width: 100%;
	height: auto;
}

.lpBannerToast__close {
  position: absolute;
  width: calc(22em / 14);
  height: calc(22em / 14);
  top: 0;
  right: 0;
  transform: translateY(-64%);
  background-color: #fff;
  border: 1px solid #999;
  cursor: pointer;
}

.lpBannerToast__close:before,
.lpBannerToast__close:after {
  content: "";
  position: absolute;
  width: calc(15em / 16);
  height: 1px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #999;
}

.lpBannerToast__close:before {
  transform: rotate(-45deg);
}

.lpBannerToast__close:after {
  transform: rotate(45deg);
}

.lpBannerToast__btn{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: calc(100% - 1.2rem);
  margin: .6rem .6rem 1.2rem;
  padding: 0;
  background-color: #fff;
  border: 0;
  border-radius: .2rem;
}

.lpBannerToast__btn span{
  display: inline-block;
  color: #009BE5;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 2.2rem;
}

.lpBannerToast__btn::after{
  content: "";
  display: block;
  position: absolute;
  width: .3rem;
  height: .6rem;
  top: 50%;
  right: .32rem;
  transform: translate(-50%,-50%);
  -webkit-mask-image: url('/img/private/common/popup/ver1.0.0/icon_arrow.svg');
  mask-image: url('/img/private/common/popup/ver1.0.0/icon_arrow.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #009BE5;
}

.lpBannerToast__subInfo{
  width: calc(100% - 1.2rem);
  margin: .6rem .6rem .4rem;
  padding: .2rem .4rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .06rem;
  border: 1px solid #fff;
}

.lpBannerToast__date{
  color: #fff;
  font-size: 1.3rem;
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04rem;
  margin: 0;
}

img + .lpBannerToastCountdown .lpBannerToast__date{
  margin-top: .4rem;
}

.lpBannerToast__date small{
  font-size: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}

.lpBannerToast__date + .lpBannerToast__btn{
  margin: .4rem .6rem 1rem;
}

.lpBannerToast__date--mt-sm {
    margin-top: .4rem;
}

/* for sunglasses page */
@media screen and (max-width: 767px){
  .sg-top{
    & ~ .lpBannerToast {
      bottom: 16.8rem;
    }
  }
}

/* for 2wayLens ¥1,100 OFF */
.lpBannerToast.lpBannerToast-2way1100off{
  background-image: -moz-linear-gradient( 135deg, rgb(0,170,247) 0%, rgb(0,121,196) 51%, rgb(0,72,145) 88%);
  background-image: -webkit-linear-gradient( 135deg, rgb(0,170,247) 0%, rgb(0,121,196) 51%, rgb(0,72,145) 88%);
  background-image: -ms-linear-gradient( 135deg, rgb(0,170,247) 0%, rgb(0,121,196) 51%, rgb(0,72,145) 88%);
  border: .4rem solid #fff;

  > a{
    padding-top: .4rem;
  }

  .lpBannerToast__date{
    font-size: 1.2rem;
    letter-spacing: -0.01rem;
    margin-top: .2rem;
  }

  @media screen and (min-width: 768px){
    .lpBannerToast__date{
      font-size: 1.4rem;

      small{
        font-size: 1.2rem;
      }
    }
  }

  .lpBannerToast__date + .lpBannerToast__btn{
    margin-bottom: .6rem;
  }
}


/* PC */
@media screen and (min-width: 768px){
  .lpBannerToast {
    width: calc(128em / 16);
    bottom: calc(90em / 16);
  }

  .lpBannerToast >a:hover {
    opacity: .6;
  }

  .lpBannerToast__btn{
    width: calc(100% - 1.6rem);
    margin: .6rem .8rem 1.4rem;
    border-radius: .4rem;
  }

  .lpBannerToast__btn span{
    font-size: 1.4rem;
    line-height: 3rem;
  }

  .lpBannerToast__btn::after{
    width: .4rem;
    height: .8rem;
    right: .4rem;
  }

  .lpBannerToast__subInfo{
    width: calc(100% - 1.6rem);
    font-size: 1.3rem;
    line-height: 1.1;
    margin: .6rem .8rem .2rem;
    padding: .4rem;
  }

  .lpBannerToast__date{
    margin: .4rem 0 .6rem;
    font-size: 1.6rem;
  }

  .lpBannerToast__date small{
    font-size: 1.3rem;
  }

  .lpBannerToast__date + .lpBannerToast__btn{
    margin: .6rem .8rem 1.4rem;
  }
}

/* bg blue */
.lpBannerToast.lpBannerToast-bgBlue{
  background-color: #009BE5;
}

/* bg red */
.lpBannerToast.lpBannerToast-bgRed,
.lpBannerToast-bgRed .lpBannerToast__btn::after{
  background-color: #E60012;
}
.lpBannerToast-bgRed .lpBannerToast__btn span{
  color: #E60012;
}

.lpBannerToast.lpBannerToast-bgRed02,
.lpBannerToast-bgRed02 .lpBannerToast__btn::after{
  background-color: #d61718;
}
.lpBannerToast-bgRed02 .lpBannerToast__btn span{
  color: #d61718;
}

/* border white */
.lpBannerToast.is--border__wh{
  border: .4rem solid #fff;
}

/* bg white - border red */
.lpBannerToast-bgWhiteBdRed{
  background-color: #fff;
  border: .1rem solid #E60012;
}
.lpBannerToast-bgWhiteBdRed .lpBannerToast__date{
  color: #1a1a1a;
}
.lpBannerToast-bgWhiteBdRed .lpBannerToast__btn{
  background-color: #E60012;
}
.lpBannerToast-bgWhiteBdRed .lpBannerToast__subInfo{
  color: #E60012;
  border-color:#E60012;
}
.lpBannerToast-bgWhiteBdRed .lpBannerToast__btn::after{
  background-color: #fff;
}
.lpBannerToast-bgWhiteBdRed .lpBannerToast__btn span{
  color: #fff;
}


/* ------------------------------------------------
  for count down 
--------------------------------------------------*/
.lpBannerToast__date.is__countdown{
  color: #FFF200;
  font-size: 1.46rem;
  margin: .4rem 0 .2rem;
}

.lpBannerToast__date.is__countdown::before{
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1.2rem;
  mask-image: url('/img/private/common/popup/ver1.0.0/icon_clock.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: 0;
  background-color: #FFF200;
  margin-right: .2rem;
  transform: translateY(10%);
}

.lpBannerToast__date.is__countdown small{
  font-size: 1.1rem;
  font-feature-settings: "palt";
  letter-spacing: -.08rem;
  padding: 0 .16rem 0 0;
}

/* PC */
@media screen and (min-width: 768px){
  .lpBannerToast__date.is__countdown{
    font-size: 1.6rem;
  }

  .lpBannerToast__date.is__countdown small{
    font-size: 1.3rem;
  }

  .lpBannerToast__date.is__countdown::before{
    width: 1.5rem;
    height: 1.5rem;
    padding-right: .2rem;
  }
}

/* bg white - border red */
.lpBannerToast-bgWhiteBdRed .lpBannerToast__date.is__countdown{
  color: #E60012;
}
.lpBannerToast-bgWhiteBdRed .lpBannerToast__date.is__countdown::before{
  background-color: #E60012;
}

/* common */
.lpBannerToastCountdown__item,
.lpBannerToastCountdown__item-defalut {
  display: none;
}

/* gogo 25aw */
.lpBannerToast-gogocp25aw{
  background-color: #fde1ca;
}

.lpBannerToast-gogocp25aw .lpBannerToast__date{
  color: #231815;
}

.lpBannerToast-gogocp25aw .lpBannerToast__date.is__countdown::before{
  background-color: #e16111;
}

.lpBannerToast-gogocp25aw .lpBannerToast__btn{
  background-color: #e16111;
}

.lpBannerToast-gogocp25aw .lpBannerToast__btn span{
  color: #fff;
}

.lpBannerToast-gogocp25aw .lpBannerToast__btn::after{
  background-color: #fff;
}