@charset "UTF-8";


.spc_tit {
  background: linear-gradient(0deg, #222 0px, #222 1px, transparent 1px, transparent 4px,#222 4px, #222 5px) left bottom / 100% 5px no-repeat;
  color: #222;
}

.spc_comment {
  color: #000;
  background: linear-gradient(to top, #f9b62b 83%, rgba(249,182,43,0) 100%);
  padding: 40px 0 24px;
}
  
.spc_comment_tit {
}

.spc_comment_txt {
  text-align: center;
  margin: 20px 12px 0;
}


/*
------------------------------------------------------------------------------------*/
@keyframes drop {
  0% { background-position: 400px 400px, -500px 500px, 0 400px; }
  100% { background-position: 0 0, 0 0, 0 0; }
}
@-moz-keyframes drop {
  0% { background-position: 400px 400px, -500px 500px, 0 400px; }
  100% { background-position: 0 0, 0 0, 0 0; }
}
@-webkit-keyframes drop {
  0% { background-position: 400px 400px, -500px 500px, 0 400px; }
  100% { background-position: 0 0, 0 0, 0 0; }
}
.spc_halloween_wrap {
  background-color: #f9b62b;
  background-image: url(/images/sp/content/free/spc_halloween/back01_sp.webp), url(/images/sp/content/free/spc_halloween/back02_sp.webp),url(/images/sp/content/free/spc_halloween/back03_sp.webp);
  -webkit-animation: drop 22s linear infinite;
  -moz-animation: drop 22s linear infinite;
  animation: drop 22s linear infinite;
  width: 100%;
}

.spc_halloween_top {
  background: url(/images/sp/content/free/spc_halloween/img00_b_sp.webp) no-repeat,linear-gradient(to bottom, #f9b62b 70%, rgba(249,182,43,0) 100%);
  background-size: 100%;
}

.spc_halloween_top_read {
  color: #000;
  font-size: 1.4rem;
  line-height: 2.2rem;
  text-align: center;
  padding: 20px 12px 0 12px;
}

.spc_halloween_top_img {
  margin: 10px 0 5px;
}

.spc_halloween_page_moveLink_wrap {
  width: 100%;
  max-width: 450px;
  display: flex;
  justify-content: center;
  align-items: self-end;
  margin: 0 auto;
  padding: 14px 0;
}

.spc_halloween_page_moveLink1 {
  width: calc(100/375 * 100%);
  text-align: center;
  margin-right: 6px;
}

.spc_halloween_page_moveLink2 {
  width: calc(136/375 * 100%);
  text-align: center;
  margin-left: 6px;
  padding-bottom: 4px;
}

.spc_halloween_detail {
  width: 88%;
  max-width: 400px;
  border-radius: 24px;
  position: relative;
  margin: 32px auto 60px;
  padding: 72px 0 12px;
}

.spc_halloween_detail_name_1day {
  position: absolute;
  width: 112%;
  height: 112%;
  top: -16px;
  left: -6%;
  background: url(/images/sp/content/free/spc_halloween/img04_sp.webp) no-repeat;
  background-size: contain;
}

.spc_halloween_detail_name_1month {
  position: absolute;
  width: 112%;
  height: 112%;
  top: -16px;
  left: -6%;
  background: url(/images/sp/content/free/spc_halloween/img13_sp.webp) no-repeat;
  background-size: contain;
}

.spc_halloween_detail_name {
  position: relative;
  top: 20px;
  color: #fff;
  font-family: serif;
  font-size: 3rem;
  font-weight: bold;
  line-height: 3.2rem;
  letter-spacing: 0.1rem;
  text-align: center;
}
@media (max-width: 350px) {
  .spc_halloween_detail_name {
    top: 16px;
  }
}
@media (min-width: 400px) {
  .spc_halloween_detail_name {
    top: 24px;
  }
}

.spc_halloween_detail_eyes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.spc_halloween_detail_eyes_img {
  width: 44%;
  margin: 0 1.5% 12px;
}

.spc_halloween_detail_spec {
  width: 93%;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.spc_halloween_detail_spec_period { flex-basis: 63%; }
.spc_halloween_detail_spec_dia { flex-basis: 37%; }
.spc_halloween_detail_spec_gdia { flex-basis: 63%; }
.spc_halloween_detail_spec_bc { flex-basis: 37%; }

.spc_halloween_detail_spec_txt {
  font-family: sans-serif;
  font-size: 1.4rem;
  line-height: 1.4rem;
  font-weight: bold;
  text-align: center;
  margin: 2px;
  padding: 6px 0;
}

.spc_halloween_detail_txt2 {
  font-family: serif;
  font-size: 1.4rem;
  line-height: 2.2rem;
  font-weight: bold;
  text-align: center;
  margin: 4px 12px 8px;
}
@media (max-width: 350px) {
  .spc_halloween_detail_txt2 {
    margin: 4px 12px 0;
  }
}
@media (min-width: 400px) {
  .spc_halloween_detail_txt2 {
    margin: 4px 12px 20px;
  }
}

.spc_halloween_detail_click {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -44px;
  transform: translateX(-50%);
  width: 66%;
  color: #fff !important;
  border-radius: 8px;
}

.spc_halloween_detailColor_1month {

}

.spc_halloween_detailColor_1month .spc_halloween_detail {
  background: #fff;
  border: #e03a14 solid 3px ;
}

.spc_halloween_detailColor_1month .spc_halloween_detail_spec_period,
.spc_halloween_detailColor_1month .spc_halloween_detail_spec_dia,
.spc_halloween_detailColor_1month .spc_halloween_detail_spec_gdia,
.spc_halloween_detailColor_1month .spc_halloween_detail_spec_bc {
  font-family: serif;
  color: #e03a14;
  border: #e03a14 solid 1px;
  border-radius: 4px;
}

.spc_halloween_detailColor_1day {
  
}

.spc_halloween_detailColor_1day .spc_halloween_detail {
  background: #fff;
  border: #3d0f58 solid 3px ;
}

.spc_halloween_detailColor_1day .spc_halloween_detail_spec_period,
.spc_halloween_detailColor_1day .spc_halloween_detail_spec_dia,
.spc_halloween_detailColor_1day .spc_halloween_detail_spec_gdia,
.spc_halloween_detailColor_1day .spc_halloween_detail_spec_bc {
  font-family: serif;
  color: #3d0f58;
  border: #3d0f58 solid 1px;
  border-radius: 4px;
}