@charset "UTF-8";
/* CSS Document */

/*共通*/
body {
  color: #000;
  font-family: "Noto Sans JP", serif;
  }
#bg {
  background-color: #fff;
  background: linear-gradient(40deg, #fff5fa, #fefcff, #f7f3ff, #f5f1ff);
  background-size: 200% 200%;
  animation: bggradient 20s ease infinite;
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
}
.wrapper {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
  background: #FFF;
  box-shadow: 0 0 8rem -3rem hsl(255deg 29% 55% / 40%);
}
p, dl dt, dl dd {
  font-size: 1.3rem;
  text-align: justify;
}
p.note {
  font-size: 1rem;
  text-align: center;
}
p.remarks {
  font-size: 1rem;
}
ul li {
  font-size: 1rem;
  text-align: justify;
  letter-spacing: -0.05rem;
  line-height: 1.2rem;
}
ul.remarks li,
p.remarks {
  padding-left: 1rem;
  text-indent: -1rem;
}
ul.remarks li:last-child {
  margin-top: 1rem;
}
.red {
  color: #e40069;
}

/*cta*/
.shine_inner {
  overflow: unset;
}

/*voice*/
#voiceArea {
    background: #505462;
    background: linear-gradient(130deg, rgba(80, 84, 98, 1) 0%, rgba(34, 34, 34, 1) 100%);
    padding: 9em 0 12em;
    position: relative;
  }
  .voiceSliderBox {
    margin-top: 3.5em;
  }
  #voiceArea p.notes {
    font-size: 1rem;
    margin: 1em 0px 0px 1.5em;
    color: #FFF;
  }
  #voiceArea .voiceSliderBox img {
    padding: 0px 5px;
  }
  #voiceArea .arrow {
    position: absolute;
    bottom: 3em;
    right: 0;
    left: 0;
    margin: auto;
    width: 50px;
  }
/*動画*/
   .movieBox video {
    width: 100%;
  }
/*5大特典*/
.benefits_area p {
  color: #FFF;
  font-size: 1.2rem;
  width: 33rem;
  margin: 0.8rem auto 0.5rem;
  padding-left: 1.2rem;
  text-indent: -1.2rem;
}
.benefits_area p a {
  display: inline;
  border-bottom: 0.1rem solid;
}

/*CP・適用条件*/
p.band {
  background: #e40069;
  color: #FFF;
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: -0.05em;
  position: relative;
  padding: 0.5rem 0 0.5rem 2rem;
  padding-left: 2.5em;
  text-align: center;
}
p.band:after {
  content: '';
  display: block;
  width: 2rem;
  height: 2rem;
  background: url(https://five-element-fit.jp/lp/cp/img/icon_fv_p.webp) 100% 0 / 100% no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 1.2rem;
}
@media screen and (min-width:500px) {
  p.band {
    font-size: 1.5rem;
  }
  p.band:after {
    width: 2.5rem;
    height: 2.5rem;
    left: 1.5rem;
  }
}
  #cp_detail {
    padding: 2rem 1.5rem 2rem;
  }
  #cp_detail h3 {
    font-size: 1.4rem;
  }
  #cp_detail ul li {
    font-size: 1.2rem;
    line-height: 1.4em;
  }
@media screen and (min-width:500px) {
  #cp_detail {
    background: #FFF;
    width: 100%;
    padding: 2rem 3.5rem 2rem;
  }
  #cp_detail h3 {
    font-size: 1.8rem;
  }
  #cp_detail ul li {
    font-size: 1.7rem;
    line-height: 2rem;
    text-indent: -1.6rem;
  }
}
  
/*必要なものリスト*/
.need_box {
  width: 33rem;
  margin: 5rem auto 0;
}
.need_box {
  width: 33rem;
  margin: 5rem auto 0;
  
}
.need_box h3 {
  font-size: 1.8rem;
  text-align: center;
  color: #FFF;
  font-style: italic;
  background: #000;
  padding: 0.8rem 0;
}
.need_box table {
  border: 0.1rem solid;
  width: 100%;
  background: #FFF;
}
.need_box table tr {
  border-bottom: 0.1rem solid;
}
.need_box table tr td:first-child {
  background: #d9d9d9;
  vertical-align: middle;
  padding: 1rem;
  font-size: 1.2rem;
}
.need_box table tr td:first-child span {
  position: relative;
  margin-left: 1.5rem;
}
.need_box table tr td:first-child span:before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background: #000;
  border-radius: 1rem;
  position: absolute;
  top: 0.4rem;
  left: -1.3rem;
}
.need_box table tr td:last-child {
  padding: 1rem;
  text-align: center;
  font-size: 1.2rem;
}
.need_box table tr td:last-child .num {
  position: relative;
  font-weight: 500;
}
.need_box table tr td:last-child .small {
  font-size: 1rem;
  font-weight: bold;
}
.need_box table tr td:last-child .mid {
  font-size: 1.8rem;
}
.flow_area .need_box table tr td:last-child .big {
  font-size: 2.8rem;
  line-height: 0;
}
.need_box table tr td:last-child .color {
  background: linear-gradient(135deg, #eb418f 0%, #e40069 24%, #7a69ad 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}
.need_box table tr td:last-child .color.big {
  font-weight: 600;
}
.need_box .admission_fee td:last-child .line:after {
  content: '';
  display: block;
  width: 4.8rem;
  height: 0.1rem;
  background: #e40069;
  position: absolute;
  top: 1.2rem;
  left: -0.3rem;
  transform: rotate(343deg);
}
.need_box .admission_fee td:last-child,
.need_box .usage_fee td:last-child {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}
.need_box .admission_fee td:last-child p {
  background: background: rgb(235,65,143);
  background: linear-gradient(135deg, rgba(235, 65, 143, 1) 0%, rgba(122, 105, 173, 1) 100%, rgba(228, 0, 105, 1) 100%);
  color: #FFF;
  font-size: 1rem;
  border-radius: 0.3rem;
  text-align: center;
  line-height: 1.2rem;
  padding: 0.3rem;
}
.need_box .annotation p {
  font-size: 1.1rem;
  margin-top: 1rem;
}
.need_box .annotation ul {
  margin-top: 0.5rem;
}
@media screen and (min-width:500px) {
  .need_box {
    width: 44rem;
  }
  .need_box h3 {
    font-size: 2.3rem;
    padding: 1rem 0;
  }
  .need_box table tr td:first-child {
    font-size: 1.8rem;
  }
  .need_box table tr td:first-child span {
    margin-left: 2.5rem;
  }
  .need_box table tr td:first-child span:before {
    width: 1.4rem;
    height: 1.4rem;
    top: 0.8rem;
    left: -2rem;
  }
  .need_box .admission_fee td:last-child, .need_box .usage_fee td:last-child {
    font-size: 1.5rem;
    padding: 0.8rem 1rem;
  }
  .need_box table tr td:last-child .mid {
    font-size: 2.3rem;
  }
  .need_box .admission_fee td:last-child .line:after {
    width: 5.7rem;
    height: 0.2rem;
    top: 1.5rem;
    left: -0.3rem;
    transform: rotate(345deg);
  }
  .need_box table tr td:last-child .small {
    font-size: 1.3rem;
  }
  .flow_area .need_box table tr td:last-child .big {
    font-size: 3.5rem;
  }
  .need_box .admission_fee td:last-child p {
    font-size: 1.4rem;
    line-height: 1.5rem;
    padding: 0.6rem 0;
  }
  .need_box table tr td:last-child {
    font-size: 1.4rem;
    padding: 1.4rem;
  }
  .need_box .annotation p {
    font-size: 1.5rem;
    margin-top: 1.2rem;
  }
}
/*店舗情報*/
.shop_area .map {
  position: relative;
  width: 100%;
  height: 0;
  margin-top: 2rem;
}
.map > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*料金プラン*/
.price_area {
  padding-top: 5rem;
}
.price_box {
  margin-top: 2rem;
}
.price_box .box:first-child {
  position: relative;
}
.price_box .box:first-child:before {
  content: '';
  display: block;
  width: 7rem;
  height: 7rem;
  background: url(https://five-element-fit.jp/lp/cp/type_B/img/price_icon.webp) 100% 0 / 100% no-repeat;
  position: absolute;
  top: -2rem;
  left: -1.5rem;
}
.price_box .box {
  border: 0.2rem solid #000;
}
.price_box .box .price_inner {
  padding: 0;
}
.price_box .box .price_inner img {
  width: 100%;
  padding-bottom: 0;
}
.price_box .note {
  margin-top: 0;
  padding: 0 3rem 2rem;
}
.price_box .note li {
  font-size: 1.2rem;
  line-height: 1.5rem;
}
.price_box .box:last-child {
  margin-top: 1.5rem;
}

/*予約システムの使い方*/
.reserve_area .reserve_slider {
  margin-top: 2rem;
}
.reserve_area .reserve_slider .slick-slide {
  padding: 0 1rem;
}
.reserve_area .slick-arrow {
    background: #EB418F;
    background: linear-gradient(90deg, rgba(235, 65, 143, 1) 0%, rgba(228, 0, 105, 1) 51%, rgba(122, 105, 173, 1) 100%);
  }

/*よくあるご質問*/
.faq_box dt {
  background: #d9d9d9;
  padding: 1rem 5rem 1rem 4.5rem;
}
.faq_box dt span {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 2rem;
}
.faq_box dt span:before,
.faq_box dt span:after {
  content: '';
  display: block;
  background: #000;
  transition: all 0.3s ease;
}
.faq_box dt span:before {
  width: 1.5rem;
  height: 0.1rem;
  opacity: 1;
}
.faq_box dt span:after {
  width: 0.1rem;
  height: 1.5rem;
  position: absolute;
}
.faq_box dt.slide span:before {
  opacity: 0;
}
.faq_box dt.slide span:after {
  transform: rotate(90deg);
}
.faq_box dd a {
  color: #e40069;
}
.faq {
  padding-bottom: 3rem;
}

/*追従*/
.topBtn a {
  width: 35rem;
  left: 0;
  margin: auto;
}
.updown {
  animation-name: updown1;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@media screen and (min-width:500px) {
  p, dl dt, dl dd {
    font-size: 1.8rem;
  }
  p.note,
  p.remarks {
    font-size: 1.4rem;
  }
  ul li {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ul.remarks li,
  p.remarks {
    text-indent: -1.3rem;
  }
  
  /*5大特典*/
  .benefits_area p {
    font-size: 1.5rem;
    width: 44rem;
  }
  
  /*料金プラン*/
  .price_area {
    padding-top: 7rem;
  }
  
  /*予約システムの使い方*/
  .reserve_area {
    margin-top: 3rem;
  }
  .reserve_area .reserve_slider {
    margin-top: 3rem;
  }
  
  /*よくあるご質問*/
  .faq_box dt {
    padding: 1rem 5.5rem 1rem 5rem;
    height: 8rem;
  }
  
  /*追従*/
  .topBtn a {
    width: 44rem;
    left: 0;
    right: 0;
  }
}

/*カウントダウンタイマー*/
.countdown {
  background: #000;
  padding: 0.5em 0;
  box-shadow: 0px -5px 15px 0px rgba(255, 255, 255, 0.5);
}
.countdown .countdown_box {
  color: #FFF;
  margin-top: 0.2em;
}
.countdown .countdown_box span {
  color: #000;
}
.countdown p {
  text-align: center;
  font-size: 1.25rem;
}
.countdown p:before {
  background: url(https://five-element-fit.jp/lp/cp/sakaihigashi/img/countdown_icon.webp) 100% 0 / 100% no-repeat;
  width: 9.4rem;
  top: -1rem;
}
.countdown p span {
  color: #e0eb00;
}
@media screen and (min-width:500px) {
  .countdown p:before {
    width: 13.5rem;
    top: -1.8rem;
    left: -15.7rem;
  }
}