@charset "UTF-8";


.spc_tit { 
  background: linear-gradient(0deg, #069bd1 0px, #069bd1 2px, transparent 2px, transparent 5px,#069bd1 5px, #069bd1 7px) left bottom / 100% 7px no-repeat;
  color: #069bd1;
}

.spc_comment {  }

.spc_comment_tit { width: 88%; }

.spc_comment_txt {
  width: 85%;
  color: #222;
  
}


/*
------------------------------------------------------------------------------------*/
.spc8_back {
  background-image:
    url(/images/pc/content/free/spc8/img_back_pc.webp),
    url(/images/pc/content/free/spc8/img_back_pc.webp),
    url(/images/pc/content/free/spc8/img_back_pc.webp),
    url(/images/pc/content/free/spc8/img_back_pc.webp),
    linear-gradient(-15deg,
    #f7f9fd 2%, #d9e4f6 9%, #d9e4f6 11%, #f7f9fd 18%,
    #f7f9fd 22%, #e6e5f9 29%, #e6e5f9 31%, #f7f9fd 38%,
    #f7f9fd 42%, #d9e4f6 49%, #d9e4f6 51%, #f7f9fd 58%,
    #f7f9fd 62%, #e6e5f9 69%, #e6e5f9 71%, #f7f9fd 78%,
    #f7f9fd 82%, #d9e4f6 86%, #d9e4f6 88%, #f7f9fd 92%);
  background-size: 700px, 700px, 700px, 700px, contain;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: right 10%, right 28%, right 57%, right 78%;
  padding-bottom: 4px;
}

.spc8_read {
  width: 90%;
  color: #222;
  font-size: 18px;
  line-height: 30px;
  margin: 20px auto 50px;
}

.spc8_sakura {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.spc8_sakura li {
  opacity: 0;
  width: 16px;
  position: absolute;
  list-style: none;
  top: 16px;
  animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate;
}
@keyframes fall {
  to {
    top: 2400px;
  }
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rotate1 {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(200px) rotate(-80deg) rotateX(180deg);
  }
}
@keyframes rotate2 {
  from {
    transform: translateX(200px) rotate(-45deg);
  }
  to {
    transform: translateX(0px) rotate(0deg);
  }
}
.spc8_sakura li:nth-child(1) {
  left: 0;
  animation: fall 40s linear infinite, rotate1 3s ease-in-out infinite alternate;
}
.spc8_sakura li:nth-child(2) {
  left: 10%;
  animation: fall 60s linear infinite, rotate1 2s ease-in-out infinite alternate;
  animation-delay: 2s;
}
.spc8_sakura li:nth-child(3) {
  left: 20%;
  animation: fall 36s linear infinite, rotate1 3.5s ease-in-out infinite alternate;
  animation-delay: 3s;
}
.spc8_sakura li:nth-child(4) {
  left: 30%;
  animation: fall 32s linear infinite, rotate2 4s ease-in-out infinite alternate;
  animation-delay: 5s;
}
.spc8_sakura li:nth-child(5) {
  left: 40%;
  animation: fall 40s linear infinite, rotate1 4s ease-in-out infinite alternate;
  animation-delay: 10s;
}
.spc8_sakura li:nth-child(6) {
  left: 60%;
  animation: fall 44s linear infinite, rotate2 3s ease-in-out infinite alternate;
  animation-delay: 12s;
}
.spc8_sakura li:nth-child(7) {
  left: 70%;
  animation: fall 28s linear infinite, rotate2 3.5s ease-in-out infinite alternate;
  animation-delay: 13s;
}
.spc8_sakura li:nth-child(8) {
  left: 50%;
  animation: fall 28s linear infinite, rotate1 3s ease-in-out infinite alternate;
  animation-delay: 16s;
}
.spc8_sakura li:nth-child(9) {
  left: 15%;
  animation: fall 40s linear infinite, rotate2 3s ease-in-out infinite alternate;
  animation-delay: 18s;
}
.spc8_sakura li:nth-child(10) {
  left: 35%;
  animation: fall 60s linear infinite, rotate1 2s ease-in-out infinite alternate;
  animation-delay: 20s;
}
.spc8_sakura li:nth-child(11) {
  left: 65%;
  animation: fall 36s linear infinite, rotate1 3.5s ease-in-out infinite alternate;
  animation-delay: 21s;
}
.spc8_sakura li:nth-child(12) {
  left: 75%;
  animation: fall 32s linear infinite, rotate2 4s ease-in-out infinite alternate;
  animation-delay: 24s;
}
.spc8_lens_wrap {
  margin-top: 40px;
}

.spc8_lens_detail_top {
  width: 70%;
  margin: 0 auto;
}

.spc8_lens_detail {
  width: calc(90% - 36px);
  background: rgb(255 255 255 / 70%);
  border-radius: 52px;
  position: relative;
  margin: 0 auto;
  padding-bottom: 24px;
  box-shadow: 3px 3px 6px rgb(0 0 0 / 20%);
}

.spc8_lens_detail_order {
  width: 132px;
  position: absolute;
  top: 16px;
  left: 16px;
}

.spc8_lens_detail_period {
  font-size: 24px;
  line-height: 1;
  margin: 12px 0 0 156px;
}

.spc8_lens_detail_name {
  font-size: 60px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 1.4px;
  margin: 40px 0 0 164px;
}
.spc8_lens_detail_nameS {
  display: block;
  transform: scaleX(0.9);
  transform-origin:left;
}

.spc8_lens_detail_name_kana {
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 0;
  display: block;
  margin-top: 4px;
}

.spc8_lens_detail_eyes_img_wrap {
  display: flex;
  justify-content: space-between;
  margin: 40px 40px calc((18px - 30px) / 2);
}

.spc8_lens_detail_eyes_img {
  width: 48%;
  display: block;
}

.spc8_lens_detail_spec {
  width: 84%;
  display: flex;
  justify-content: space-between;
  margin: 32px auto 0;
}
.spc8_lens_detail_spec_dia { flex-basis: 32%; }
.spc8_lens_detail_spec_bc { flex-basis: 25%; }
.spc8_lens_detail_spec_gdia { flex-basis: 39%; }

.spc8_lens_detail_spec p {
  font-size: 20px;
  text-align: center;
  line-height: 1;
  padding: 9px 8px 7px 8px;
}

.spc8_lens_detail_txt {
  font-size: 18px;
  line-height: 30px;
  margin: 14px 28px 28px;
}

.spc8_lens_detail_reco {
  font-size: 22px;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
  margin: 0 14px 8px;
}

.spc8_lens_detail_txt2 {
  list-style: none;
  margin: 0 28px 30px;
}

.spc8_lens_detail_txt2 li {
  font-size: 18px;
  line-height: 26px;
}

.spc8_lens_detail_click {
  display: flex;
  justify-content: space-between;
  width: 50%;
  margin: 0 auto 14px;
}

.spc8_lens_detail_flower1_img {
  position: absolute;
  top: -28px;
  right: -28px;
  width: 140px;
}

.spc8_lens_detail_flower2_img {
  position: absolute;
  bottom: -28px;
  left: -28px;
  width: 140px;
}

.spc8_lens_detailColor_1month .spc8_lens_title {
  color: #ed8c8c;
}

.spc8_lens_detailColor_1month .spc8_lens_detail {
  border:#ed8c8c solid 5px;
}

.spc8_lens_detailColor_1month .spc8_lens_detail_period,
.spc8_lens_detailColor_1month .spc8_lens_detail_name,
.spc8_lens_detailColor_1month .spc8_lens_detail_spec_dia,
.spc8_lens_detailColor_1month .spc8_lens_detail_spec_bc,
.spc8_lens_detailColor_1month .spc8_lens_detail_spec_gdia {
  color: #ed8c8c;
}

.spc8_lens_detailColor_1month .spc8_lens_detail_spec_dia,
.spc8_lens_detailColor_1month .spc8_lens_detail_spec_bc,
.spc8_lens_detailColor_1month .spc8_lens_detail_spec_gdia {
  border: #ed8c8c solid 1px;
  border-radius: 10px;
}

.spc8_lens_detailColor_1month .spc8_lens_detail_txt,
.spc8_lens_detailColor_1month .spc8_lens_detail_reco,
.spc8_lens_detailColor_1month .spc8_lens_detail_txt2 {
  color: #222;
}

.spc8_lens_detailColor_1day .spc8_lens_title {
  color: #ef8bb4;
}

.spc8_lens_detailColor_1day .spc8_lens_detail {
  border:#ef8bb4 solid 5px;
  margin: 72px auto 108px;
}

.spc8_lens_detailColor_1day .spc8_lens_detail_period,
.spc8_lens_detailColor_1day .spc8_lens_detail_name,
.spc8_lens_detailColor_1day .spc8_lens_detail_spec_dia,
.spc8_lens_detailColor_1day .spc8_lens_detail_spec_bc,
.spc8_lens_detailColor_1day .spc8_lens_detail_spec_gdia {
  color: #ef8bb4;
}

.spc8_lens_detailColor_1day .spc8_lens_detail_spec_dia,
.spc8_lens_detailColor_1day .spc8_lens_detail_spec_bc,
.spc8_lens_detailColor_1day .spc8_lens_detail_spec_gdia {
  border: #ef8bb4 solid 1px;
  border-radius: 10px;
}

.spc8_lens_detailColor_1day .spc8_lens_detail_txt,
.spc8_lens_detailColor_1day .spc8_lens_detail_reco,
.spc8_lens_detailColor_1day .spc8_lens_detail_txt2 {
  color: #222;
}

.spc8_price_img {
  width: 92%;
  margin: 0 auto;
}