@charset "UTF-8";
/* CSS Document */
:root {
  --main-blue: #2b5caa;
  --light-blue: #7595cd;
  --main-red: #e63463;
  --text-color: #585757;
  --light-grey: #efefef;
  --point-light-blue: #eef2f8;
}
body {
  color: var(--text-color);
  font-family: 'Noto Sans JP', sans-serif;
}
.red {
  color: var(--main-red);
}
/*CTA*/
#fvArea .mvCtaBox .shine_inner .shine_mask {
  mask-image: url(https://five-element-fit.jp/lp/cp/takashimadaira/img/fv_mv_btn.webp);
}
/*cpエリア*/
.cpArea {
  background: #edf0f6;
}
.cpArea .cpInfoBox {
  background-color: #5f90cc;
  background-image: repeating-linear-gradient(-60deg, transparent, transparent 5px, rgba(83, 129, 194, 0.64) 5px, rgba(83, 129, 194, 0.64) 14px);
  padding: 4em 2em 4em;
}
@media (min-width:500px) {
  .cpArea .cpInfoBox {
    padding: 4em 5em 4em;
  }
}
.cpArea nav ul {
  display: flex;
  padding-bottom: 2em;
}
.cpArea nav ul li {
  margin-right: 2em;
}
.cpArea nav ul li:last-child {
  margin-right: 0;
}
.cpArea .cpInfoBox .cpInfoTrialBox {
  background: #FFF;
  margin-top: 7em;
  position: relative;
  padding: 4em 2em 2em;
}
@media (min-width:500px) {
  .cpArea .cpInfoBox .cpInfoTrialBox {
    padding-top: 7em;
  }
}
.cpArea .cpInfoBox .cpInfoTrialBox h2 {
  position: absolute;
  top: -6em;
  width: 90%;
  left: 0;
  right: 0;
  margin: auto;
}
.cpArea .cpInfoBox .cpInfoTrialBox .movieBox {
  margin-top: 2em;
}
@media (min-width:500px) {
  .cpArea .cpInfoBox .cpInfoTrialBox .movieBox {
    width: 85%;
    margin: 2em auto 0;
  }
}
.cpArea .ctaBox {
  margin-top: 2em;
}
.cpArea .benefitsBox {
  margin-top: 5em;
}
.cpArea .benefitsBox .box {
  background: #FFF;
  margin-top: 1em;
  padding: 3em 2em;
}
/*voiceエリア*/
#voiceArea {
  background: var(--light-grey);
}
#voiceArea h2 {
  width: 80%;
  padding-top: 8em;
  margin: 0 auto;
}
#voiceArea .voiceSliderBox {
  margin-top: 3em;
}
@media (min-width:500px) {
  #voiceArea .voiceSliderBox {
    margin-top: 6em;
  }
}
/*pointエリア*/
#pointArea {
  font-family: 'M PLUS 1p', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
#pointArea .pointBox {
  position: relative;
}
#pointArea .pointBox h3 {
  position: relative;
}
#pointArea {
  --text-color: #272727;
  color: var(--text-color);
}
#pointArea .pointBox h3 span.title {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  font-size: 2rem;
  font-weight: 500;
}
@media (min-width:500px) {
  #pointArea .pointBox h3 span.title {
    font-size: 2.6rem;
    bottom: 2.5rem;
  }
}
#pointArea .pointBox h3 span.title .big {
  font-size: 2.3rem;
}
@media (min-width:500px) {
  #pointArea .pointBox h3 span.title .big {
    font-size: 3rem;
  }
}
#pointArea .pointBox .box {
  position: relative;
}
#pointArea .pointBox .textBox {
  width: 85%;
  margin: 0 auto;
}
#pointArea .pointBox .textBox p {
  font-size: 1.5rem;
  text-align: justify;
  font-weight: 500;
  letter-spacing: normal;
}
@media (min-width:500px) {
  #pointArea .pointBox .textBox p {
    font-size: 2rem;
  }
}
#pointArea .pointBox .textBox p span {
  color: var(--main-blue);
  font-weight: 600;
  border-bottom: 4px solid #FFFF48;
}
#pointArea .pointBox .textBox ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1em;
}
#pointArea .pointBox .textBox ul li {
  width: 6rem;
  height: 6rem;
  background: #d7d7d7;
  border-radius: 6rem;
  font-size: 1.3rem;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width:500px) {
  #pointArea .pointBox .textBox ul li {
    width: 8rem;
    height: 8rem;
    font-size: 1.6rem;
  }
}
#pointArea .variationsSlideBox {
  margin-top: 3em;
  padding-bottom: 2rem;
}
#pointArea .variationsSlideBox .slick-list {
  z-index: 0;
}
#pointArea .variationsSlideBox .slick-next {
  right: 7rem;
}
#pointArea .variationsSlideBox .slick-prev {
  left: 7rem;
  z-index: 1;
}
#pointArea .variationsSlideBox .slick-next:before,
#pointArea .variationsSlideBox .slick-prev:before{
  font-size: 30px;
  color: #202020;
  position: absolute;
  top: 0;
}
#pointArea .variationsSlideBox .box {
  background: #FFF;
  height: 21rem;
}
@media (min-width:500px) {
  #pointArea .variationsSlideBox .box  {
    height: 23rem;
  }
}
#pointArea .variationsSlideBox .box p {
  font-size: 1.25rem;
  padding: 1rem 1.5rem;
  text-align: justify;
  font-weight: 500;
}
@media (min-width:500px) {
  #pointArea .variationsSlideBox .box p {
    font-size: 1.4rem;
    letter-spacing: 0.01em;
  }
}
#pointArea .variationsSlideBox .slick-slide {
  margin-right: 1vw !important;
  margin-left: 1vw !important;
  transform: scale(0.9);
  transition: all .5s;
  opacity: 0.5;
}
#pointArea .variationsSlideBox .slick-slide.slick-center {
  transform: scale(1);
  opacity: 1;
}
#pointArea .variationsBox,
#pointArea .environmentBox {
  background: var(--light-grey);
}
#pointArea .programBox .textBox,
#pointArea .semiBox .textBox,
#pointArea .usefulBox .textBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#pointArea .usefulBox .textBox {
  top: 7rem;
}
@media (min-width:500px) {
  #pointArea .usefulBox .textBox {
    top: 9.5rem;
  }
}
#pointArea .environmentSlideBox img {
  padding: 0 5px;
}
#pointArea .environmentBox {
  padding-bottom: 2rem;
}
#pointArea .environmentBox p.notes {
  font-size: 1rem;
  margin: 1em 0 0 1.5em;
}
@media (min-width:500px) {
  #pointArea .environmentBox p.notes {
    font-size: 1.2rem;
  }
}
/*cta中間*/
.ctaBox.middle {
  background: var(--light-blue);
  padding: 3em 2em;
}
.ctaBox.middle .ctaText {
  color: #FFF;
}
.ctaBox.middle .ctaText:before,
.ctaBox.middle .ctaText:after {
  background: #FFF;
}
.ctaBox.middle .ctaText span:before {
  border: 2px solid #FFF;
}
.ctaBox.middle p.notes {
  color: #FFF;
}
.ctaBox.middle .cta_attention p.note {
    color: #FFF;
  }
/*特徴エリア*/
#featureArea {
  background: var(--light-grey);
}
#featureArea .featureBox {
  width: 90%;
  margin: 0 auto 4rem;
}
#featureArea .featureBox .box {
  position: relative;
  background: #FFF;
  padding-top: 6rem;
  margin-top: 6rem;
}
@media (min-width:500px) {
  #featureArea .featureBox .box {
    padding-top: 9rem;
  }
}
#featureArea .featureBox h3 {
  width: 70%;
  position: absolute;
  top: -4rem;
  left: 0;
  right: 0;
  margin: auto;
}
/*flowエリア*/
#flowArea .worryBox {
  background: #E5E5E5;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 36%);
}
/*needエリア*/
#needArea h2 {
  background: var(--light-blue);
}
#needArea table tr td:first-child:before {
  background: var(--light-blue);
}
#needArea .annotation h3 {
  color: var(--light-blue);
}
/*よくあるご質問*/
.faq_box,
#cp_comment,
#shopArea {
  --text-color: #272727;
  color: var(--text-color);
}
.faq_box dt {
  background: #efefef;
}
.faq_box dt:before {
  background: url(https://five-element-fit.jp/lp/cp/takashimadaira/img/question.webp) 100% 0 / 100% no-repeat;
}
.faq_box dt span.open:before,
.faq_box dt span.open:after {
    background: #7595cd;
}
.faq_box dd ul li:before {
  background: var(--light-blue);
}
/*店舗情報*/
#shopArea .shopBox dl dt:before {
  border: solid 3px #7595cd;
}
/*料金エリア*/
.price_area h2,
.reserve_area h2 {
  width: 80%;
  margin: 2em auto 0;
}
/*予約システム*/
.reserve_area .slick-arrow {
  background: var(--light-blue);
}
/*footerエリア*/
footer {
  background-color: #898179;
}
/*カウントダウン*/
.countdown {
  background: rgb(95 144 204 / 90%);
}
.countdown p:before {
  background: url(https://rintosull.jp/tmpl/newstore/img/common/cd/cdt_icon.png) 100% 0 / 100% no-repeat;
}
.countdown a {
  background: rgb(255, 104, 135);
  background: linear-gradient(138deg, rgba(254, 66, 108, 1) 0%, rgba(235, 66, 127, 1) 100%);
}
/*追従ボタン*/
.topBtn .shine_inner .shine_mask {
  mask-image: url(https://five-element-fit.jp/lp/cp/takashimadaira/img/float_btn.webp);
}