@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 {
  background: linear-gradient(90deg, rgb(86 173 225 / 9%) 0% 0%, rgb(71 125 216 / 7%) 33%, rgb(86 173 225 / 8%) 68%, rgb(99 140 244 / 6%) 100%);
}
.wrapper {
  background: #FFF;
}
/*PFF*/
.pffBox {
  background: #56ADE1;
  background: linear-gradient(45deg, rgba(86, 173, 225, 1) 31%, rgba(67, 168, 219, 1) 55%, rgba(71, 125, 216, 1) 80%, rgba(88, 152, 215, 1) 100%);
}
/*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 .pointBox.variationsBox h3 span.title {
    line-height: 1.2em;
    letter-spacing: 0;
  }
  @media screen and (min-width: 500px) {
    #pointArea .pointBox.variationsBox h3 span.title {
      bottom: 3rem;
    }
  }
#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;
  }
}
/*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;
  }
}
/*特典*/
.cpArea .benefitsBox .box {
  background: #FFF;
  margin-top: 1em;
  padding: 3em 2em;
}
/*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 {
    width: 95%;
  }
.ctaBox.middle .cta_attention p.note {
    color: #FFF;
  }
.ctaBox.middle a {
  padding-top: 2em;
}
/*特徴エリア*/
#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%);
}
/*店舗情報*/
#shopArea .shopBox dl dt:before {
  border: solid 3px #7595cd;
}
/*料金エリア*/
.price_area h2,
.reserve_area h2 {
  width: 80%;
  margin: 2em auto 0;
}
footer {
  background-color: #898179;
}
/*カウントダウン*/
.countdown p:before {
  width: 5.5rem;
  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%);
}