@charset "UTF-8";


.spc_tit {
  background: linear-gradient(0deg, #2B0039 0px, #2B0039 2px, transparent 2px, transparent 5px,#2B0039 5px, #2B0039 7px) left bottom / 100% 7px no-repeat;
  color: #2B0039;
}

.spc_comment {
  padding: 0 0 48px;
}

.spc_comment_txt {
  width: 90%;
  --fs: 1.8rem;
  --fh: 3rem;
  color: #fff;
  font-size: var(--fs);
  line-height: var(--fh);
  margin: calc(32px + ((var(--fs) - var(--fh)) / 2)) auto calc(0px + ((var(--fs) - var(--fh)) / 2));
}

.contactLens_tit {
  width: 87.75%;
  color: #2B0039;
  margin: 0 auto;
}


/* base
------------------------------------------------------------------------------------*/
.spc_halloween2025_wrap {
  position: relative;
  background: linear-gradient(to bottom, #2B0039 25%, #593B76 45%, #2B0039 60%, #593B76 75%, #2B0039 90%);
  overflow: hidden;
  z-index: 0;
}

.spc_halloween2025_wrap .star-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: repeat;
  background-size: contain;
  mix-blend-mode: lighten;
  opacity: 0.6;
  animation-name: sparkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  z-index: -1;
}

.star1 {
  background-image: url(/images/pc/content/free/spc_halloween2025/back_star1_pc.webp);
  animation-duration: 3s;
  animation-delay: 0s;
}

.star2 {
  background-image: url(/images/pc/content/free/spc_halloween2025/back_star2_pc.webp);
  animation-duration: 4s;
  animation-delay: 1s;
}

.star3 {
  background-image: url(/images/pc/content/free/spc_halloween2025/back_star3_pc.webp);
  animation-duration: 3.5s;
  animation-delay: 2s;
}

.star4 {
  background-image: url(/images/pc/content/free/spc_halloween2025/back_star4_pc.webp);
  animation-duration: 4.5s;
  animation-delay: 0.5s;
}

.star5 {
  background-image: url(/images/pc/content/free/spc_halloween2025/back_star5_pc.webp);
  animation-duration: 5s;
  animation-delay: 1.5s;
}

@keyframes sparkle {
  0% {
    opacity: 0.4;
    filter: brightness(0.8);
  }
  25% {
    opacity: 0.8;
    filter: brightness(1.1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.6);
  }
  75% {
    opacity: 0.7;
    filter: brightness(1.0);
  }
  100% {
    opacity: 0.5;
    filter: brightness(0.9);
  }
}

.star1 { opacity: 0.5; }
.star2 { opacity: 0.7; }
.star3 { opacity: 0.6; }
.star4 { opacity: 0.8; }
.star5 { opacity: 0.5; }

.spc_halloween2025_tit {
  position: relative;
  width: 100%;
  min-height: 70px;
  display: flex;
  margin: 88px auto 0;
  scroll-margin-top: 40px;
}

/* hero - リード
------------------------------------------------------------------------------------*/
.spc_halloween2025_read {
  width: 90%;
  --fs: 1.8rem;
  --fh: 3rem;
  color: #fff;
  font-size: var(--fs);
  line-height: var(--fh);
  margin: calc(32px + ((var(--fs) - var(--fh)) / 2)) auto calc(0px + ((var(--fs) - var(--fh)) / 2));
}

.cmn_brSP {
  font-size: 0;
  display: none;
}

.spc_halloween2025_border {
  margin-top: 60px;
}

.spc_halloween2025_page_moveLink_wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 28px auto 12px;
  padding: 0 20%;
}

.spc_halloween2025_page_moveLink {
  width: 50%;
  padding: 3%;
}

/* レンズ紹介
------------------------------------------------------------------------------------*/
.spc_halloween2025_subTit {
  position: relative;
  width: 840px;
  min-height: 122px;
  display: flex;
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
  margin: 100px auto 0;
  scroll-margin-top: 72px;
}
.spc_halloween2025_subTit::before,
.spc_halloween2025_subTit::after {
  content: "";
  width: 22px;
  height: auto;
  min-height: 122px;
  background: url(/images/pc/content/free/spc_halloween2025/cate1_tit_edge_pc.svg) center / cover no-repeat;
  display: block;
}
.spc_halloween2025_subTit::after {
  transform: scale(-1, 1);
}
#halloween2025_cate2.spc_halloween2025_subTit::before,
#halloween2025_cate2.spc_halloween2025_subTit::after {
  background: url(/images/pc/content/free/spc_halloween2025/cate2_tit_edge_pc.svg) center / cover no-repeat;
}
#halloween2025_cate3.spc_halloween2025_subTit::before,
#halloween2025_cate3.spc_halloween2025_subTit::after {
  background: url(/images/pc/content/free/spc_halloween2025/cate3_tit_edge_pc.svg) center / cover no-repeat;
}
#halloween2025_cate4.spc_halloween2025_subTit::before,
#halloween2025_cate4.spc_halloween2025_subTit::after {
  background: url(/images/pc/content/free/spc_halloween2025/cate4_tit_edge_pc.svg) center / cover no-repeat;
}

.spc_halloween2025_subTit_inner {
  height: auto;
  background: url(/images/pc/content/free/spc_halloween2025/cate1_tit_back_pc.svg);
  min-height: 122px;
  color: #fff;
  font-family: var(--ja_mincho);
  font-size: 1.7rem;
  display: grid;
  flex: 1;
  place-items: center;
}
#halloween2025_cate2 .spc_halloween2025_subTit_inner { background: url(/images/pc/content/free/spc_halloween2025/cate2_tit_back_pc.svg); }
#halloween2025_cate3 .spc_halloween2025_subTit_inner { background: url(/images/pc/content/free/spc_halloween2025/cate3_tit_back_pc.svg); }
#halloween2025_cate4 .spc_halloween2025_subTit_inner { background: url(/images/pc/content/free/spc_halloween2025/cate4_tit_back_pc.svg); }

.spc_halloween2025_subTit_img1 {
  width: 600px;
}

.spc_halloween2025_subTit_img2 {
  position: absolute;
  width: 120px;
  top: -40px;
  left: 24px;
}

#halloween2025_cate1 .spc_halloween2025_subTit_img2 {
  animation: catWalk 5s linear infinite;
  transform-origin: center;
}
@keyframes catWalk {
  0% {
    transform: translateX(10px) scaleX(1);
  }
  49% {
    transform: translateX(-10px) scaleX(1);
  }
  50% {
    transform: translateX(-10px) scaleX(-1);
  }
  99% {
    transform: translateX(10px) scaleX(-1);
  }
  100% {
    transform: translateX(10px) scaleX(1);
  }
}

#halloween2025_cate2 .spc_halloween2025_subTit_img2 {
  width: 80px;
  left: 40px;
  animation: witchFloat 4s ease-in-out infinite;
}

@keyframes witchFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

#halloween2025_cate3 .spc_halloween2025_subTit_img2 {
  width: 80px;
  left: 40px;
  animation: zombieShake 0.8s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes zombieShake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

#halloween2025_cate4 .spc_halloween2025_subTit_img2 {
  width: 80px;
  left: 40px;
  animation: pumpkinShake 1s infinite;
  transform-origin: center;
}

@keyframes pumpkinShake {
  0% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-2px, 2px) rotate(-1deg); }
  20% { transform: translate(2px, -1px) rotate(1deg); }
  30% { transform: translate(-1px, -3px) rotate(0deg); }
  40% { transform: translate(3px, 1px) rotate(1deg); }
  50% { transform: translate(-2px, 2px) rotate(-2deg); }
  60% { transform: translate(1px, -1px) rotate(2deg); }
  70% { transform: translate(-3px, 1px) rotate(-1deg); }
  80% { transform: translate(2px, -2px) rotate(1deg); }
  90% { transform: translate(-1px, 3px) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.spc_halloween2025_subTit_img3 {
  position: absolute;
  width: 112px;
  top: 0;
  right: 0;
  z-index: 1;
}

.spc_halloween2025_subTit_txt {
  width: 760px;
  --fs: 1.8rem;
  --fh: 3rem;
  color: #fff;
  font-size: var(--fs);
  line-height: var(--fh);
  margin: calc(32px + ((var(--fs) - var(--fh)) / 2)) auto calc(0px + ((var(--fs) - var(--fh)) / 2));
}

.spc_halloween2025_lineUp_wrap {
  width: 760px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 60px auto 0;
}

.spc_halloween2025_lineUp {
  position: relative;
  width: 48%;
}

.spc_halloween2025_lineUp_wrap .spc_halloween2025_lineUp:nth-of-type(3),
.spc_halloween2025_lineUp_wrap .spc_halloween2025_lineUp:nth-of-type(4) {
  margin-top: 80px;
}

.spc_halloween2025_lineUp {
  position: relative;
  width: 48%;
}

.spc_halloween2025_lineUp_back {
  background: #fff;
  padding: 8px;
}

.spc_halloween2025_lineUp_name_img {
  padding-top: 8px;
}

.spc_halloween2025_lineUp_name_period {
  position: absolute;
  width: auto;
  height: 48px;
  top: -24px;
  left: 0;
}

.spc_halloween2025_lineUp_eye_wrap {
  position: relative;
}

.spc_halloween2025_lineUp_lens {
  position: absolute;
  width: 100px;
  bottom: 0;
  right: -24px;
}

.spc_halloween2025_lineUp_bur_wrap {
  width: 90.7%;
  max-width: 375px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 28px auto 12px;
}

.spc_halloween2025_lineUp_txt {
  --fs: 1.8rem;
  --fh: 3rem;
  color: #000;
  font-size: var(--fs);
  line-height: var(--fh);
  margin: 16px 4px 8px;
}

.spc_halloween2025_lineUp_buy {
  position: relative;
  display: flex;
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
  margin: 16px auto 0;
}

.spc_halloween2025_lineUp_buy_matome {
  position: relative;
}

.spc_halloween2025_lineUp_buy_imgOtoku {
  position: absolute;
  top: -22px;
  left: 30px;
  width: 90px;
  height: 52px;
  animation: appear 6s ease-in-out infinite;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
}

.spc_halloween2025_review_img {
  width: 90.7%;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.15));
  margin: 0 auto;
}