@charset "UTF-8";
/* CSS Document */
/*----------------------------------------
変数
----------------------------------------*/
/*----------------------------------------
サイト共通 スタイルシート
----------------------------------------*/
.absImg {
  position: absolute;
}

/* slick読み込み時の縦並びを防ぐ */
.mainImage, .loopSlider {
  display: none;
}

.mainImage.slick-initialized,
.loopSlider.slick-initialized {
  display: block;
}

/* トップページ限定ヘッダー
---------------------------------------------- */
#header {
  position: absolute;
}
@media screen and (min-width: 900px) {
  #header {
    margin: 0 auto;
    background-color: transparent;
  }
}
#header.scrolltop {
  position: fixed;
  top: 0;
  left: 0;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
  margin: 0 auto;
  border-radius: 0 0 30px 30px;
}
@media screen and (min-width: 590px) {
  #header.scrolltop {
    background-color: var(--colorBackGround);
  }
}
#header.scrolltop #headerInner {
  background-color: var(--colorBackGround);
  border-radius: 0 0 30px 30px;
}
#header.shift {
  -webkit-transform: translateY(-80px);
          transform: translateY(-80px);
}
#header #headerInner {
  position: relative;
  background-color: var(--colorBackGround);
}
@media screen and (min-width: 590px) {
  #header #headerInner {
    background-color: transparent;
  }
}

/* メインイメージ
---------------------------------------------- */
.mainImage01 {
  background: url("images/mainImage01_sp.jpg") no-repeat center/100% auto;
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  .mainImage01 {
    background: url("images/mainImage01.jpg") no-repeat 30% center/auto 100%;
  }
}
@media screen and (min-width: 900px) {
  .mainImage01 {
    background: url("images/mainImage01.jpg") no-repeat center bottom/cover;
  }
}

.mainImage02 {
  background: url("images/mainImage02_sp.jpg") no-repeat center/100% auto;
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  .mainImage02 {
    background: url("images/mainImage02.jpg") no-repeat 30% center/auto 100%;
  }
}
@media screen and (min-width: 900px) {
  .mainImage02 {
    background: url("images/mainImage02.jpg") no-repeat center bottom/cover;
  }
}

.mainImage03 {
  background: url("images/mainImage03_sp.jpg") no-repeat center/100% auto;
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  .mainImage03 {
    background: url("images/mainImage03.jpg") no-repeat 30% center/auto 100%;
  }
}
@media screen and (min-width: 900px) {
  .mainImage03 {
    background: url("images/mainImage03.jpg") no-repeat center bottom/cover;
  }
}

.mainImage04 {
  background: url("images/mainImage04_sp.jpg") no-repeat center/100% auto;
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  .mainImage04 {
    background: url("images/mainImage04.jpg") no-repeat 30% center/auto 100%;
  }
}
@media screen and (min-width: 900px) {
  .mainImage04 {
    background: url("images/mainImage04.jpg") no-repeat center bottom/cover;
  }
}

#mainImageWrap {
  height: 100vh;
  height: 100svh;
  width: 100%;
  position: relative;
}
@media screen and (min-width: 590px) {
  #mainImageWrap {
    margin: 0 auto;
  }
}
#mainImageWrap .mainImageWrapInner .mainImage {
  display: none;
}
#mainImageWrap .mainImageWrapInner .mainImage.slick-initialized {
  display: block;
}
#mainImageWrap .mainImageWrapInner h1 {
  position: absolute;
  top: calc(32.5% + var(--headerHightSP));
  right: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  font-size: clamp(1.625rem, 1.375rem + 1.02vw, 2.25rem);
  color: var(--colorText);
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #mainImageWrap .mainImageWrapInner h1 {
    top: calc(33% + var(--headerHightSP));
    right: 4.95%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}
@media screen and (min-width: 900px) {
  #mainImageWrap .mainImageWrapInner h1 {
    top: 50%;
    right: 10.24%;
    -webkit-transform: translate(0, -62%);
            transform: translate(0, -62%);
  }
}
@media screen and (min-width: 1536px) {
  #mainImageWrap .mainImageWrapInner h1 {
    font-size: clamp(2.25rem, -0.37rem + 3.07vw, 3.313rem);
  }
}
#mainImageWrap .mainImageWrapInner h1 .sepWrap {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.7;
}
#mainImageWrap .mainImageWrapInner h1 .sepWrap span {
  color: var(--colorMain);
}
#mainImageWrap .mainImageWrapInner h1 .sepWrap::before {
  display: block;
  content: "";
  height: 3px;
  width: 10.5em;
  background-image: radial-gradient(circle farthest-side, #B2DBC4, #B2DBC4 2px, transparent 2px, transparent);
  background-size: 9px;
  background-repeat: repeat-x;
  position: absolute;
  top: 5.25em;
  left: -2em;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#mainImageWrap .mainImageWrapInner h1 .sepWrap:nth-child(2)::before {
  left: -3.6em;
}
#mainImageWrap .scrollBtn {
  position: absolute;
  bottom: -1px;
  left: 0;
}
#mainImageWrap .scrollBtn a:hover {
  opacity: 1;
}
#mainImageWrap .absImg01 {
  top: 130px;
  left: 30px;
  width: 64px;
}
@media screen and (min-width: 900px) {
  #mainImageWrap .absImg01 {
    top: clamp(11.875rem, -37.331rem + 63.49vw, 16.875rem);
    left: 120px;
    width: 72px;
  }
}

/* message
---------------------------------------------- */
#messageWrap {
  overflow: hidden;
  padding: 55px 0;
}
@media screen and (min-width: 900px) {
  #messageWrap {
    padding: 80px 0;
  }
}
#messageWrap .inner {
  max-width: 1140px;
  margin: 145px auto 0;
}
@media screen and (min-width: 900px) {
  #messageWrap .inner {
    margin: 110px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
#messageWrap .inner .leftBox {
  position: relative;
}
@media screen and (min-width: 900px) {
  #messageWrap .inner .leftBox {
    width: 50%;
    max-width: 530px;
    margin: 1.875rem 7% 0 0;
    padding-left: 7.3%;
  }
}
#messageWrap .inner .leftBox .sectionTitle {
  text-align: left;
  margin-bottom: 0;
}
#messageWrap .inner .leftBox .leadText {
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
  margin-bottom: 3.5rem;
}
@media screen and (min-width: 900px) {
  #messageWrap .inner .leftBox .leadText {
    font-size: clamp(1.75rem, 1.95rem - 0.82vw, 1.25rem);
    white-space: nowrap;
  }
}
#messageWrap .inner .leftBox .leadText span {
  color: var(--colorTextSub);
}
@media screen and (min-width: 900px) {
  #messageWrap .inner .leftBox p {
    max-width: 380px;
    font-size: 1.125rem;
  }
}
#messageWrap .inner .leftBox .btnBox {
  margin-bottom: 80px;
}
#messageWrap .inner .leftBox .btnBox a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 65.6%;
  max-width: 256px;
  color: #ffffff;
  padding: 1em 1.5em;
  margin: 0 auto;
  font-family: var(--fontJP);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: 0.12em;
  border: 1px solid var(--colorMain);
  border-radius: 1.5em;
  background-color: var(--colorMain);
  position: relative;
}
@media screen and (min-width: 900px) {
  #messageWrap .inner .leftBox .btnBox a {
    width: 100%;
    max-width: 288px;
    margin: 0 auto 0 0;
  }
  #messageWrap .inner .leftBox .btnBox a:hover {
    color: var(--colorMain);
    background-color: #F4FCF1;
  }
}
#messageWrap .inner .leftBox .absImg01 {
  width: 56px;
  top: -88px;
  right: 16.6%;
}
@media screen and (min-width: 900px) {
  #messageWrap .inner .leftBox .absImg01 {
    width: 70px;
    top: 33px;
    right: -50px;
  }
}
#messageWrap .inner .rightBox {
  max-width: 390px;
  margin: 0 auto 50px;
}
@media screen and (min-width: 900px) {
  #messageWrap .inner .rightBox {
    position: relative;
    width: 50%;
    max-width: 477px;
    margin: 80px -80px 0 auto;
  }
}
#messageWrap .inner .rightBox .absImg03 {
  display: block;
  text-align: left;
  width: 77.7%;
  max-width: 272px;
  position: static;
  margin-left: -20px;
}
@media screen and (min-width: 900px) {
  #messageWrap .inner .rightBox .absImg03 {
    width: 83.8%;
    max-width: 400px;
    margin-bottom: 40px;
    margin-left: 0;
  }
}
#messageWrap .inner .rightBox .absImg04 {
  display: block;
  text-align: right;
  position: static;
  margin-right: -20px;
}
@media screen and (min-width: 900px) {
  #messageWrap .inner .rightBox .absImg04 {
    margin-top: 44px;
    margin-right: 0;
  }
}
#messageWrap .inner .rightBox .absImg04 img {
  width: 61.7%;
  max-width: 216px;
}
@media screen and (min-width: 900px) {
  #messageWrap .inner .rightBox .absImg04 img {
    max-width: 320px;
  }
}
#messageWrap .inner .rightBox .absImg05 {
  position: static;
}
@media screen and (min-width: 900px) {
  #messageWrap .inner .rightBox .absImg05 {
    position: absolute;
    top: 64%;
    left: -80px;
  }
}
#messageWrap .inner .rightBox .absImg05 img {
  width: 41%;
  max-width: 160px;
  margin: -50px 0 0 20px;
}
@media screen and (min-width: 900px) {
  #messageWrap .inner .rightBox .absImg05 img {
    width: 100%;
    max-width: 200px;
    margin: auto;
  }
}
#messageWrap p {
  margin-bottom: 3.75rem;
}
@media screen and (min-width: 900px) {
  #messageWrap p {
    margin-bottom: 4.81rem;
  }
}

/* facility
---------------------------------------------- */
#facilityWrap {
  overflow: hidden;
  background-color: var(--colorBackGroundSub);
}
#facilityWrap .facilityWrapInner {
  padding-top: 75px;
}
@media screen and (min-width: 900px) {
  #facilityWrap .facilityWrapInner {
    padding-top: 160px;
  }
}
#facilityWrap .sectionTitle .fontJP .absImg01 {
  width: 2.187rem;
  top: 50%;
  left: -1.5rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (min-width: 900px) {
  #facilityWrap .sectionTitle .fontJP .absImg01 {
    width: 2.875rem;
  }
}
#facilityWrap .sectionTitle .fontJP .absImg02 {
  width: 1.187rem;
  top: 50%;
  right: -1.5rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (min-width: 900px) {
  #facilityWrap .sectionTitle .fontJP .absImg02 {
    width: 1.5635rem;
  }
}
#facilityWrap .facilityList {
  margin-bottom: 5.31rem;
}
@media screen and (min-width: 900px) {
  #facilityWrap .facilityList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 10rem;
  }
}
#facilityWrap .facilityList .facility {
  max-width: 310px;
  font-family: var(--fontJP);
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: 170px;
  overflow: hidden;
  margin: 0 auto 2rem;
}
@media screen and (min-width: 900px) {
  #facilityWrap .facilityList .facility {
    margin: 0 1em 0 auto;
  }
}
#facilityWrap .facilityList .facility:last-child {
  margin: 0 auto;
}
#facilityWrap .facilityList .facility a {
  display: block;
}
#facilityWrap .facilityList .facility figcaption {
  display: block;
  padding: 1.375rem 0 2rem;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 900px) {
  #facilityWrap .facilityList .facility figcaption {
    font-size: 1.25rem;
    padding: 1.66rem 0 2.5rem;
  }
}
#facilityWrap .facilityList .facility figcaption span {
  display: block;
  margin: 0 auto;
}
#facilityWrap .facilityList .facility figcaption span:first-child {
  margin: 0 auto 0.875rem;
}
@media screen and (min-width: 900px) {
  #facilityWrap .facilityList .facility figcaption span:first-child {
    margin: 0 auto 1.125rem;
  }
}
#facilityWrap .facilityList .facility.facility01 figcaption {
  background-color: var(--colorFa01);
}
#facilityWrap .facilityList .facility.facility02 figcaption {
  background-color: var(--colorFa02);
}
#facilityWrap .facilityList .facility.facility03 figcaption {
  background-color: var(--colorFa03);
}
@media screen and (min-width: 900px) {
  #facilityWrap .facilityList .facility a:hover {
    opacity: 1;
  }
  #facilityWrap .facilityList .facility a:hover img {
    opacity: 0.6;
  }
  #facilityWrap .facilityList .facility a:hover .chevron-right {
    -webkit-transform: translateX(45%) rotate(45deg);
            transform: translateX(45%) rotate(45deg);
  }
}

/* contact
---------------------------------------------- */
#contactWrap {
  overflow: hidden;
  background-color: var(--colorBackGroundSub);
  position: relative;
}
#contactWrap .curveBottom {
  position: absolute;
  top: 0;
}
#contactWrap .contactWrapInner {
  background: url(images/contactBgImage_sp.jpg) no-repeat center top/100% auto;
  padding-top: 130%;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactWrapInner {
    background: url(images/contactBgImage.jpg) no-repeat center top/100% auto;
    padding-top: 52%;
  }
}
#contactWrap .contactWrapInner .sectionTitle .fontJP {
  width: 5em;
}
#contactWrap .contactWrapInner .sectionTitle .absImg01 {
  width: 3.625rem;
  top: -2.875rem;
  left: -5.3125rem;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactWrapInner .sectionTitle .absImg01 {
    width: 4.5rem;
    top: -3.25rem;
    left: -5.6875rem;
  }
}
#contactWrap .contactInfoBox {
  max-width: 900px;
  font-weight: 700;
  padding: 2rem 1.6875rem;
  margin: 0 auto 8rem;
  background-color: #ffffff;
  border-radius: 30px;
  text-align: center;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactInfoBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 3.5rem 10px;
    margin: 0 auto 15rem;
  }
}
#contactWrap .contactInfoBox h3 {
  font-size: 1.25em;
  font-family: var(--fontJP);
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactInfoBox h3 {
    font-size: 1.5rem;
    margin-bottom: 1.75rem;
  }
}
#contactWrap .contactInfoBox .fromTel {
  position: relative;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactInfoBox .fromTel {
    width: 48.8%;
    overflow: hidden;
  }
}
#contactWrap .contactInfoBox .fromTel .telNo {
  font-size: 1.875rem;
  font-family: var(--fontJP);
  font-weight: 700;
  line-height: 1em;
  color: var(--colorMain);
  padding-bottom: 0.375rem;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactInfoBox .fromTel .telNo {
    font-size: 2.75rem;
  }
}
#contactWrap .contactInfoBox .fromTel .telNo img {
  width: 1.25rem;
  margin-right: 0.5rem;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactInfoBox .fromTel .telNo img {
    width: 2rem;
    margin-right: 1rem;
  }
}
#contactWrap .contactInfoBox .fromTel .businessHours {
  font-size: 0.9735rem;
  font-weight: bold;
  padding-bottom: 2.06rem;
  text-align: center;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactInfoBox .fromTel .businessHours {
    padding-bottom: 0;
  }
}
#contactWrap .contactInfoBox .fromTel .businessHours span {
  font-weight: normal;
}
#contactWrap .contactInfoBox .fromTel::after {
  display: block;
  content: "";
  height: 3px;
  width: 100%;
  border-right: dotted 3px var(--colorMain);
  background-image: radial-gradient(circle farthest-side, #B2DBC4, #B2DBC4 2px, transparent 2px, transparent);
  background-size: 9px;
  background-repeat: repeat-x;
  position: absolute;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactInfoBox .fromTel::after {
    right: calc(-50% + 3px);
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}
#contactWrap .contactInfoBox .fromWeb {
  padding-top: 2.06rem;
  position: relative;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactInfoBox .fromWeb {
    padding-top: 0;
    width: 48.8%;
  }
}
#contactWrap .contactInfoBox .fromWeb .btnBox .btnBasic {
  color: #ffffff;
  border-radius: 1.75rem;
}
#contactWrap .contactInfoBox .fromWeb .btnBox .btnBasic img {
  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(118deg) brightness(104%) contrast(101%);
          filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(118deg) brightness(104%) contrast(101%);
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactInfoBox .fromWeb .btnBox .btnBasic img {
    width: 20px;
    height: 20px;
  }
}
#contactWrap .contactInfoBox .fromWeb .btnBox .btnBasic:hover img {
  -webkit-filter: invert(62%) sepia(19%) saturate(7018%) hue-rotate(103deg) brightness(96%) contrast(69%);
          filter: invert(62%) sepia(19%) saturate(7018%) hue-rotate(103deg) brightness(96%) contrast(69%);
}
#contactWrap .contactInfoBox .fromWeb .absImg02 {
  right: -20px;
  bottom: -62px;
  width: 18px;
  height: 62px;
}
@media screen and (min-width: 900px) {
  #contactWrap .contactInfoBox .fromWeb .absImg02 {
    right: -10px;
    bottom: -88px;
    width: 26px;
    height: 88px;
  }
}

/* ループスライダー
---------------------------------------------- */
#loopSliderWrap {
  background-color: var(--colorBackGroundSub);
  padding-bottom: 70px;
}
@media screen and (min-width: 900px) {
  #loopSliderWrap {
    padding-bottom: 130px;
  }
}
#loopSliderWrap .loopSlider {
  display: none;
}
#loopSliderWrap .loopSlider.slick-initialized {
  display: block;
}
#loopSliderWrap .loopSlider img {
  width: 96.5%;
  border-radius: 30px;
}

/* footer
---------------------------------------------- */
#footer {
  overflow: hidden;
  background-color: var(--colorBackGroundSub);
}/*# sourceMappingURL=index.css.map */