@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap");
.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: inline-block;
  }
}

.pc {
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

/************/
.text-xxxxl {
  font-size: 4rem;
  font-weight: normal;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .text-xxxxl {
    font-size: 3.2rem;
  }
}

.text-xxxl {
  font-size: 3.2rem;
  font-weight: normal;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .text-xxxl {
    font-size: 2.8rem;
  }
}

.text-xxl {
  font-size: 2.8rem;
  font-weight: normal;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .text-xxl {
    font-size: 2.6rem;
  }
}

.text-xl {
  font-size: 2.4rem;
  font-weight: normal;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .text-xl {
    font-size: 2rem;
  }
}

.text-l {
  font-size: 1.7rem;
  font-weight: normal;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .text-l {
    font-size: 1.5rem;
  }
}

.text-r {
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .text-r {
    font-size: 1.4rem;
  }
}

.text-s {
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .text-s {
    font-size: 1.2rem;
  }
}

.text-xs {
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .text-xs {
    font-size: 1rem;
  }
}

.flex {
  display: flex;
}

.text-center {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .sp-text-center {
    text-align: center;
  }
}

.text-justify {
  text-align: justify;
}

@media screen and (max-width: 767px) {
  .sp-text-justify {
    text-align: justify;
  }
}

.underline {
  text-decoration: underline !important;
}

.sans-serif {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
}

.serif {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}

.border-b {
  border-bottom: 1px solid rgba(115, 95, 81, 0.2);
}

.border-t {
  border-top: 1px solid rgba(115, 95, 81, 0.2);
}

.color-lblue {
  color: #735F51;
}

.color-main {
  color: #735F51;
}

.color-light {
  color: #fff;
}

.color-dark {
  color: #735F51;
}

.mt-0 {
  margin-top: 0rem;
}
@media screen and (max-width: 767px) {
  .mt-0 {
    margin-top: calc( 0rem * .7);
  }
}

.mb-0 {
  margin-bottom: 0rem;
}
@media screen and (max-width: 767px) {
  .mb-0 {
    margin-bottom: calc( 0rem * .7);
  }
}

.ml-0 {
  margin-left: 0rem;
}
@media screen and (max-width: 767px) {
  .ml-0 {
    margin-left: calc( 0rem * .7);
  }
}

.mr-0 {
  margin-right: 0rem;
}
@media screen and (max-width: 767px) {
  .mr-0 {
    margin-right: calc( 0rem * .7);
  }
}

.mx-0 {
  margin-left: 0rem;
  margin-right: 0rem;
}
@media screen and (max-width: 767px) {
  .mx-0 {
    margin-left: calc( 0rem * .7);
    margin-right: calc( 0rem * .7);
  }
}

.my-0 {
  margin-top: 0rem;
  margin-bottom: 0rem;
}
@media screen and (max-width: 767px) {
  .my-0 {
    margin-top: calc( 0rem * .7);
    margin-bottom: calc( 0rem * .7);
  }
}

.pt-0 {
  padding-top: 0rem;
}
@media screen and (max-width: 767px) {
  .pt-0 {
    padding-top: calc( 0rem * .7);
  }
}

.pb-0 {
  padding-bottom: 0rem;
}
@media screen and (max-width: 767px) {
  .pb-0 {
    padding-bottom: calc( 0rem * .7);
  }
}

.pl-0 {
  padding-left: 0rem;
}
@media screen and (max-width: 767px) {
  .pl-0 {
    padding-left: calc( 0rem * .7);
  }
}

.pr-0 {
  padding-right: 0rem;
}
@media screen and (max-width: 767px) {
  .pr-0 {
    padding-right: calc( 0rem * .7);
  }
}

.px-0 {
  padding-left: 0rem;
  padding-right: 0rem;
}
@media screen and (max-width: 767px) {
  .px-0 {
    padding-left: calc( 0rem * .7);
    padding-right: calc( 0rem * .7);
  }
}

.py-0 {
  padding-top: 0rem;
  padding-bottom: 0rem;
}
@media screen and (max-width: 767px) {
  .py-0 {
    padding-top: calc( 0rem * .7);
    padding-bottom: calc( 0rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-0 {
    margin-top: 0rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-0 {
    margin-bottom: 0rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-0 {
    margin-bottom: 0rem !important;
    margin-top: 0rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-0 {
    padding-top: 0rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-0 {
    padding-bottom: 0rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-0 {
    padding-bottom: 0rem !important;
    padding-top: 0rem !important;
  }
}

.mt-1 {
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .mt-1 {
    margin-top: calc( 1rem * .7);
  }
}

.mb-1 {
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .mb-1 {
    margin-bottom: calc( 1rem * .7);
  }
}

.ml-1 {
  margin-left: 1rem;
}
@media screen and (max-width: 767px) {
  .ml-1 {
    margin-left: calc( 1rem * .7);
  }
}

.mr-1 {
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  .mr-1 {
    margin-right: calc( 1rem * .7);
  }
}

.mx-1 {
  margin-left: 1rem;
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  .mx-1 {
    margin-left: calc( 1rem * .7);
    margin-right: calc( 1rem * .7);
  }
}

.my-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .my-1 {
    margin-top: calc( 1rem * .7);
    margin-bottom: calc( 1rem * .7);
  }
}

.pt-1 {
  padding-top: 1rem;
}
@media screen and (max-width: 767px) {
  .pt-1 {
    padding-top: calc( 1rem * .7);
  }
}

.pb-1 {
  padding-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .pb-1 {
    padding-bottom: calc( 1rem * .7);
  }
}

.pl-1 {
  padding-left: 1rem;
}
@media screen and (max-width: 767px) {
  .pl-1 {
    padding-left: calc( 1rem * .7);
  }
}

.pr-1 {
  padding-right: 1rem;
}
@media screen and (max-width: 767px) {
  .pr-1 {
    padding-right: calc( 1rem * .7);
  }
}

.px-1 {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media screen and (max-width: 767px) {
  .px-1 {
    padding-left: calc( 1rem * .7);
    padding-right: calc( 1rem * .7);
  }
}

.py-1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .py-1 {
    padding-top: calc( 1rem * .7);
    padding-bottom: calc( 1rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-1 {
    margin-top: 1rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-1 {
    margin-bottom: 1rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-1 {
    margin-bottom: 1rem !important;
    margin-top: 1rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-1 {
    padding-top: 1rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-1 {
    padding-bottom: 1rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-1 {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
  }
}

.mt-2 {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .mt-2 {
    margin-top: calc( 2rem * .7);
  }
}

.mb-2 {
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .mb-2 {
    margin-bottom: calc( 2rem * .7);
  }
}

.ml-2 {
  margin-left: 2rem;
}
@media screen and (max-width: 767px) {
  .ml-2 {
    margin-left: calc( 2rem * .7);
  }
}

.mr-2 {
  margin-right: 2rem;
}
@media screen and (max-width: 767px) {
  .mr-2 {
    margin-right: calc( 2rem * .7);
  }
}

.mx-2 {
  margin-left: 2rem;
  margin-right: 2rem;
}
@media screen and (max-width: 767px) {
  .mx-2 {
    margin-left: calc( 2rem * .7);
    margin-right: calc( 2rem * .7);
  }
}

.my-2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .my-2 {
    margin-top: calc( 2rem * .7);
    margin-bottom: calc( 2rem * .7);
  }
}

.pt-2 {
  padding-top: 2rem;
}
@media screen and (max-width: 767px) {
  .pt-2 {
    padding-top: calc( 2rem * .7);
  }
}

.pb-2 {
  padding-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .pb-2 {
    padding-bottom: calc( 2rem * .7);
  }
}

.pl-2 {
  padding-left: 2rem;
}
@media screen and (max-width: 767px) {
  .pl-2 {
    padding-left: calc( 2rem * .7);
  }
}

.pr-2 {
  padding-right: 2rem;
}
@media screen and (max-width: 767px) {
  .pr-2 {
    padding-right: calc( 2rem * .7);
  }
}

.px-2 {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media screen and (max-width: 767px) {
  .px-2 {
    padding-left: calc( 2rem * .7);
    padding-right: calc( 2rem * .7);
  }
}

.py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .py-2 {
    padding-top: calc( 2rem * .7);
    padding-bottom: calc( 2rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-2 {
    margin-top: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-2 {
    margin-bottom: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-2 {
    margin-bottom: 2rem !important;
    margin-top: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-2 {
    padding-top: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-2 {
    padding-bottom: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-2 {
    padding-bottom: 2rem !important;
    padding-top: 2rem !important;
  }
}

.mt-3 {
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .mt-3 {
    margin-top: calc( 3rem * .7);
  }
}

.mb-3 {
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .mb-3 {
    margin-bottom: calc( 3rem * .7);
  }
}

.ml-3 {
  margin-left: 3rem;
}
@media screen and (max-width: 767px) {
  .ml-3 {
    margin-left: calc( 3rem * .7);
  }
}

.mr-3 {
  margin-right: 3rem;
}
@media screen and (max-width: 767px) {
  .mr-3 {
    margin-right: calc( 3rem * .7);
  }
}

.mx-3 {
  margin-left: 3rem;
  margin-right: 3rem;
}
@media screen and (max-width: 767px) {
  .mx-3 {
    margin-left: calc( 3rem * .7);
    margin-right: calc( 3rem * .7);
  }
}

.my-3 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .my-3 {
    margin-top: calc( 3rem * .7);
    margin-bottom: calc( 3rem * .7);
  }
}

.pt-3 {
  padding-top: 3rem;
}
@media screen and (max-width: 767px) {
  .pt-3 {
    padding-top: calc( 3rem * .7);
  }
}

.pb-3 {
  padding-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .pb-3 {
    padding-bottom: calc( 3rem * .7);
  }
}

.pl-3 {
  padding-left: 3rem;
}
@media screen and (max-width: 767px) {
  .pl-3 {
    padding-left: calc( 3rem * .7);
  }
}

.pr-3 {
  padding-right: 3rem;
}
@media screen and (max-width: 767px) {
  .pr-3 {
    padding-right: calc( 3rem * .7);
  }
}

.px-3 {
  padding-left: 3rem;
  padding-right: 3rem;
}
@media screen and (max-width: 767px) {
  .px-3 {
    padding-left: calc( 3rem * .7);
    padding-right: calc( 3rem * .7);
  }
}

.py-3 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .py-3 {
    padding-top: calc( 3rem * .7);
    padding-bottom: calc( 3rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-3 {
    margin-top: 3rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-3 {
    margin-bottom: 3rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-3 {
    margin-bottom: 3rem !important;
    margin-top: 3rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-3 {
    padding-top: 3rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-3 {
    padding-bottom: 3rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-3 {
    padding-bottom: 3rem !important;
    padding-top: 3rem !important;
  }
}

.mt-4 {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .mt-4 {
    margin-top: calc( 4rem * .7);
  }
}

.mb-4 {
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .mb-4 {
    margin-bottom: calc( 4rem * .7);
  }
}

.ml-4 {
  margin-left: 4rem;
}
@media screen and (max-width: 767px) {
  .ml-4 {
    margin-left: calc( 4rem * .7);
  }
}

.mr-4 {
  margin-right: 4rem;
}
@media screen and (max-width: 767px) {
  .mr-4 {
    margin-right: calc( 4rem * .7);
  }
}

.mx-4 {
  margin-left: 4rem;
  margin-right: 4rem;
}
@media screen and (max-width: 767px) {
  .mx-4 {
    margin-left: calc( 4rem * .7);
    margin-right: calc( 4rem * .7);
  }
}

.my-4 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .my-4 {
    margin-top: calc( 4rem * .7);
    margin-bottom: calc( 4rem * .7);
  }
}

.pt-4 {
  padding-top: 4rem;
}
@media screen and (max-width: 767px) {
  .pt-4 {
    padding-top: calc( 4rem * .7);
  }
}

.pb-4 {
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .pb-4 {
    padding-bottom: calc( 4rem * .7);
  }
}

.pl-4 {
  padding-left: 4rem;
}
@media screen and (max-width: 767px) {
  .pl-4 {
    padding-left: calc( 4rem * .7);
  }
}

.pr-4 {
  padding-right: 4rem;
}
@media screen and (max-width: 767px) {
  .pr-4 {
    padding-right: calc( 4rem * .7);
  }
}

.px-4 {
  padding-left: 4rem;
  padding-right: 4rem;
}
@media screen and (max-width: 767px) {
  .px-4 {
    padding-left: calc( 4rem * .7);
    padding-right: calc( 4rem * .7);
  }
}

.py-4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .py-4 {
    padding-top: calc( 4rem * .7);
    padding-bottom: calc( 4rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-4 {
    margin-top: 4rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-4 {
    margin-bottom: 4rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-4 {
    margin-bottom: 4rem !important;
    margin-top: 4rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-4 {
    padding-top: 4rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-4 {
    padding-bottom: 4rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-4 {
    padding-bottom: 4rem !important;
    padding-top: 4rem !important;
  }
}

.mt-5 {
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .mt-5 {
    margin-top: calc( 5rem * .7);
  }
}

.mb-5 {
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .mb-5 {
    margin-bottom: calc( 5rem * .7);
  }
}

.ml-5 {
  margin-left: 5rem;
}
@media screen and (max-width: 767px) {
  .ml-5 {
    margin-left: calc( 5rem * .7);
  }
}

.mr-5 {
  margin-right: 5rem;
}
@media screen and (max-width: 767px) {
  .mr-5 {
    margin-right: calc( 5rem * .7);
  }
}

.mx-5 {
  margin-left: 5rem;
  margin-right: 5rem;
}
@media screen and (max-width: 767px) {
  .mx-5 {
    margin-left: calc( 5rem * .7);
    margin-right: calc( 5rem * .7);
  }
}

.my-5 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .my-5 {
    margin-top: calc( 5rem * .7);
    margin-bottom: calc( 5rem * .7);
  }
}

.pt-5 {
  padding-top: 5rem;
}
@media screen and (max-width: 767px) {
  .pt-5 {
    padding-top: calc( 5rem * .7);
  }
}

.pb-5 {
  padding-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .pb-5 {
    padding-bottom: calc( 5rem * .7);
  }
}

.pl-5 {
  padding-left: 5rem;
}
@media screen and (max-width: 767px) {
  .pl-5 {
    padding-left: calc( 5rem * .7);
  }
}

.pr-5 {
  padding-right: 5rem;
}
@media screen and (max-width: 767px) {
  .pr-5 {
    padding-right: calc( 5rem * .7);
  }
}

.px-5 {
  padding-left: 5rem;
  padding-right: 5rem;
}
@media screen and (max-width: 767px) {
  .px-5 {
    padding-left: calc( 5rem * .7);
    padding-right: calc( 5rem * .7);
  }
}

.py-5 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .py-5 {
    padding-top: calc( 5rem * .7);
    padding-bottom: calc( 5rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-5 {
    margin-top: 5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-5 {
    margin-bottom: 5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-5 {
    margin-bottom: 5rem !important;
    margin-top: 5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-5 {
    padding-top: 5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-5 {
    padding-bottom: 5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-5 {
    padding-bottom: 5rem !important;
    padding-top: 5rem !important;
  }
}

.mt-6 {
  margin-top: 6rem;
}
@media screen and (max-width: 767px) {
  .mt-6 {
    margin-top: calc( 6rem * .7);
  }
}

.mb-6 {
  margin-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .mb-6 {
    margin-bottom: calc( 6rem * .7);
  }
}

.ml-6 {
  margin-left: 6rem;
}
@media screen and (max-width: 767px) {
  .ml-6 {
    margin-left: calc( 6rem * .7);
  }
}

.mr-6 {
  margin-right: 6rem;
}
@media screen and (max-width: 767px) {
  .mr-6 {
    margin-right: calc( 6rem * .7);
  }
}

.mx-6 {
  margin-left: 6rem;
  margin-right: 6rem;
}
@media screen and (max-width: 767px) {
  .mx-6 {
    margin-left: calc( 6rem * .7);
    margin-right: calc( 6rem * .7);
  }
}

.my-6 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .my-6 {
    margin-top: calc( 6rem * .7);
    margin-bottom: calc( 6rem * .7);
  }
}

.pt-6 {
  padding-top: 6rem;
}
@media screen and (max-width: 767px) {
  .pt-6 {
    padding-top: calc( 6rem * .7);
  }
}

.pb-6 {
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .pb-6 {
    padding-bottom: calc( 6rem * .7);
  }
}

.pl-6 {
  padding-left: 6rem;
}
@media screen and (max-width: 767px) {
  .pl-6 {
    padding-left: calc( 6rem * .7);
  }
}

.pr-6 {
  padding-right: 6rem;
}
@media screen and (max-width: 767px) {
  .pr-6 {
    padding-right: calc( 6rem * .7);
  }
}

.px-6 {
  padding-left: 6rem;
  padding-right: 6rem;
}
@media screen and (max-width: 767px) {
  .px-6 {
    padding-left: calc( 6rem * .7);
    padding-right: calc( 6rem * .7);
  }
}

.py-6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .py-6 {
    padding-top: calc( 6rem * .7);
    padding-bottom: calc( 6rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-6 {
    margin-top: 6rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-6 {
    margin-bottom: 6rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-6 {
    margin-bottom: 6rem !important;
    margin-top: 6rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-6 {
    padding-top: 6rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-6 {
    padding-bottom: 6rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-6 {
    padding-bottom: 6rem !important;
    padding-top: 6rem !important;
  }
}

.mt-7 {
  margin-top: 7rem;
}
@media screen and (max-width: 767px) {
  .mt-7 {
    margin-top: calc( 7rem * .7);
  }
}

.mb-7 {
  margin-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  .mb-7 {
    margin-bottom: calc( 7rem * .7);
  }
}

.ml-7 {
  margin-left: 7rem;
}
@media screen and (max-width: 767px) {
  .ml-7 {
    margin-left: calc( 7rem * .7);
  }
}

.mr-7 {
  margin-right: 7rem;
}
@media screen and (max-width: 767px) {
  .mr-7 {
    margin-right: calc( 7rem * .7);
  }
}

.mx-7 {
  margin-left: 7rem;
  margin-right: 7rem;
}
@media screen and (max-width: 767px) {
  .mx-7 {
    margin-left: calc( 7rem * .7);
    margin-right: calc( 7rem * .7);
  }
}

.my-7 {
  margin-top: 7rem;
  margin-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  .my-7 {
    margin-top: calc( 7rem * .7);
    margin-bottom: calc( 7rem * .7);
  }
}

.pt-7 {
  padding-top: 7rem;
}
@media screen and (max-width: 767px) {
  .pt-7 {
    padding-top: calc( 7rem * .7);
  }
}

.pb-7 {
  padding-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  .pb-7 {
    padding-bottom: calc( 7rem * .7);
  }
}

.pl-7 {
  padding-left: 7rem;
}
@media screen and (max-width: 767px) {
  .pl-7 {
    padding-left: calc( 7rem * .7);
  }
}

.pr-7 {
  padding-right: 7rem;
}
@media screen and (max-width: 767px) {
  .pr-7 {
    padding-right: calc( 7rem * .7);
  }
}

.px-7 {
  padding-left: 7rem;
  padding-right: 7rem;
}
@media screen and (max-width: 767px) {
  .px-7 {
    padding-left: calc( 7rem * .7);
    padding-right: calc( 7rem * .7);
  }
}

.py-7 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  .py-7 {
    padding-top: calc( 7rem * .7);
    padding-bottom: calc( 7rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-7 {
    margin-top: 7rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-7 {
    margin-bottom: 7rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-7 {
    margin-bottom: 7rem !important;
    margin-top: 7rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-7 {
    padding-top: 7rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-7 {
    padding-bottom: 7rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-7 {
    padding-bottom: 7rem !important;
    padding-top: 7rem !important;
  }
}

.mt-8 {
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .mt-8 {
    margin-top: calc( 8rem * .7);
  }
}

.mb-8 {
  margin-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .mb-8 {
    margin-bottom: calc( 8rem * .7);
  }
}

.ml-8 {
  margin-left: 8rem;
}
@media screen and (max-width: 767px) {
  .ml-8 {
    margin-left: calc( 8rem * .7);
  }
}

.mr-8 {
  margin-right: 8rem;
}
@media screen and (max-width: 767px) {
  .mr-8 {
    margin-right: calc( 8rem * .7);
  }
}

.mx-8 {
  margin-left: 8rem;
  margin-right: 8rem;
}
@media screen and (max-width: 767px) {
  .mx-8 {
    margin-left: calc( 8rem * .7);
    margin-right: calc( 8rem * .7);
  }
}

.my-8 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .my-8 {
    margin-top: calc( 8rem * .7);
    margin-bottom: calc( 8rem * .7);
  }
}

.pt-8 {
  padding-top: 8rem;
}
@media screen and (max-width: 767px) {
  .pt-8 {
    padding-top: calc( 8rem * .7);
  }
}

.pb-8 {
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .pb-8 {
    padding-bottom: calc( 8rem * .7);
  }
}

.pl-8 {
  padding-left: 8rem;
}
@media screen and (max-width: 767px) {
  .pl-8 {
    padding-left: calc( 8rem * .7);
  }
}

.pr-8 {
  padding-right: 8rem;
}
@media screen and (max-width: 767px) {
  .pr-8 {
    padding-right: calc( 8rem * .7);
  }
}

.px-8 {
  padding-left: 8rem;
  padding-right: 8rem;
}
@media screen and (max-width: 767px) {
  .px-8 {
    padding-left: calc( 8rem * .7);
    padding-right: calc( 8rem * .7);
  }
}

.py-8 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .py-8 {
    padding-top: calc( 8rem * .7);
    padding-bottom: calc( 8rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-8 {
    margin-top: 8rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-8 {
    margin-bottom: 8rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-8 {
    margin-bottom: 8rem !important;
    margin-top: 8rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-8 {
    padding-top: 8rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-8 {
    padding-bottom: 8rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-8 {
    padding-bottom: 8rem !important;
    padding-top: 8rem !important;
  }
}

.mt-9 {
  margin-top: 9rem;
}
@media screen and (max-width: 767px) {
  .mt-9 {
    margin-top: calc( 9rem * .7);
  }
}

.mb-9 {
  margin-bottom: 9rem;
}
@media screen and (max-width: 767px) {
  .mb-9 {
    margin-bottom: calc( 9rem * .7);
  }
}

.ml-9 {
  margin-left: 9rem;
}
@media screen and (max-width: 767px) {
  .ml-9 {
    margin-left: calc( 9rem * .7);
  }
}

.mr-9 {
  margin-right: 9rem;
}
@media screen and (max-width: 767px) {
  .mr-9 {
    margin-right: calc( 9rem * .7);
  }
}

.mx-9 {
  margin-left: 9rem;
  margin-right: 9rem;
}
@media screen and (max-width: 767px) {
  .mx-9 {
    margin-left: calc( 9rem * .7);
    margin-right: calc( 9rem * .7);
  }
}

.my-9 {
  margin-top: 9rem;
  margin-bottom: 9rem;
}
@media screen and (max-width: 767px) {
  .my-9 {
    margin-top: calc( 9rem * .7);
    margin-bottom: calc( 9rem * .7);
  }
}

.pt-9 {
  padding-top: 9rem;
}
@media screen and (max-width: 767px) {
  .pt-9 {
    padding-top: calc( 9rem * .7);
  }
}

.pb-9 {
  padding-bottom: 9rem;
}
@media screen and (max-width: 767px) {
  .pb-9 {
    padding-bottom: calc( 9rem * .7);
  }
}

.pl-9 {
  padding-left: 9rem;
}
@media screen and (max-width: 767px) {
  .pl-9 {
    padding-left: calc( 9rem * .7);
  }
}

.pr-9 {
  padding-right: 9rem;
}
@media screen and (max-width: 767px) {
  .pr-9 {
    padding-right: calc( 9rem * .7);
  }
}

.px-9 {
  padding-left: 9rem;
  padding-right: 9rem;
}
@media screen and (max-width: 767px) {
  .px-9 {
    padding-left: calc( 9rem * .7);
    padding-right: calc( 9rem * .7);
  }
}

.py-9 {
  padding-top: 9rem;
  padding-bottom: 9rem;
}
@media screen and (max-width: 767px) {
  .py-9 {
    padding-top: calc( 9rem * .7);
    padding-bottom: calc( 9rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-9 {
    margin-top: 9rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-9 {
    margin-bottom: 9rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-9 {
    margin-bottom: 9rem !important;
    margin-top: 9rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-9 {
    padding-top: 9rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-9 {
    padding-bottom: 9rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-9 {
    padding-bottom: 9rem !important;
    padding-top: 9rem !important;
  }
}

.mt-10 {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .mt-10 {
    margin-top: calc( 10rem * .7);
  }
}

.mb-10 {
  margin-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  .mb-10 {
    margin-bottom: calc( 10rem * .7);
  }
}

.ml-10 {
  margin-left: 10rem;
}
@media screen and (max-width: 767px) {
  .ml-10 {
    margin-left: calc( 10rem * .7);
  }
}

.mr-10 {
  margin-right: 10rem;
}
@media screen and (max-width: 767px) {
  .mr-10 {
    margin-right: calc( 10rem * .7);
  }
}

.mx-10 {
  margin-left: 10rem;
  margin-right: 10rem;
}
@media screen and (max-width: 767px) {
  .mx-10 {
    margin-left: calc( 10rem * .7);
    margin-right: calc( 10rem * .7);
  }
}

.my-10 {
  margin-top: 10rem;
  margin-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  .my-10 {
    margin-top: calc( 10rem * .7);
    margin-bottom: calc( 10rem * .7);
  }
}

.pt-10 {
  padding-top: 10rem;
}
@media screen and (max-width: 767px) {
  .pt-10 {
    padding-top: calc( 10rem * .7);
  }
}

.pb-10 {
  padding-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  .pb-10 {
    padding-bottom: calc( 10rem * .7);
  }
}

.pl-10 {
  padding-left: 10rem;
}
@media screen and (max-width: 767px) {
  .pl-10 {
    padding-left: calc( 10rem * .7);
  }
}

.pr-10 {
  padding-right: 10rem;
}
@media screen and (max-width: 767px) {
  .pr-10 {
    padding-right: calc( 10rem * .7);
  }
}

.px-10 {
  padding-left: 10rem;
  padding-right: 10rem;
}
@media screen and (max-width: 767px) {
  .px-10 {
    padding-left: calc( 10rem * .7);
    padding-right: calc( 10rem * .7);
  }
}

.py-10 {
  padding-top: 10rem;
  padding-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  .py-10 {
    padding-top: calc( 10rem * .7);
    padding-bottom: calc( 10rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-10 {
    margin-top: 10rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-10 {
    margin-bottom: 10rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-10 {
    margin-bottom: 10rem !important;
    margin-top: 10rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-10 {
    padding-top: 10rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-10 {
    padding-bottom: 10rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-10 {
    padding-bottom: 10rem !important;
    padding-top: 10rem !important;
  }
}

.mt-11 {
  margin-top: 11rem;
}
@media screen and (max-width: 767px) {
  .mt-11 {
    margin-top: calc( 11rem * .7);
  }
}

.mb-11 {
  margin-bottom: 11rem;
}
@media screen and (max-width: 767px) {
  .mb-11 {
    margin-bottom: calc( 11rem * .7);
  }
}

.ml-11 {
  margin-left: 11rem;
}
@media screen and (max-width: 767px) {
  .ml-11 {
    margin-left: calc( 11rem * .7);
  }
}

.mr-11 {
  margin-right: 11rem;
}
@media screen and (max-width: 767px) {
  .mr-11 {
    margin-right: calc( 11rem * .7);
  }
}

.mx-11 {
  margin-left: 11rem;
  margin-right: 11rem;
}
@media screen and (max-width: 767px) {
  .mx-11 {
    margin-left: calc( 11rem * .7);
    margin-right: calc( 11rem * .7);
  }
}

.my-11 {
  margin-top: 11rem;
  margin-bottom: 11rem;
}
@media screen and (max-width: 767px) {
  .my-11 {
    margin-top: calc( 11rem * .7);
    margin-bottom: calc( 11rem * .7);
  }
}

.pt-11 {
  padding-top: 11rem;
}
@media screen and (max-width: 767px) {
  .pt-11 {
    padding-top: calc( 11rem * .7);
  }
}

.pb-11 {
  padding-bottom: 11rem;
}
@media screen and (max-width: 767px) {
  .pb-11 {
    padding-bottom: calc( 11rem * .7);
  }
}

.pl-11 {
  padding-left: 11rem;
}
@media screen and (max-width: 767px) {
  .pl-11 {
    padding-left: calc( 11rem * .7);
  }
}

.pr-11 {
  padding-right: 11rem;
}
@media screen and (max-width: 767px) {
  .pr-11 {
    padding-right: calc( 11rem * .7);
  }
}

.px-11 {
  padding-left: 11rem;
  padding-right: 11rem;
}
@media screen and (max-width: 767px) {
  .px-11 {
    padding-left: calc( 11rem * .7);
    padding-right: calc( 11rem * .7);
  }
}

.py-11 {
  padding-top: 11rem;
  padding-bottom: 11rem;
}
@media screen and (max-width: 767px) {
  .py-11 {
    padding-top: calc( 11rem * .7);
    padding-bottom: calc( 11rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-11 {
    margin-top: 11rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-11 {
    margin-bottom: 11rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-11 {
    margin-bottom: 11rem !important;
    margin-top: 11rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-11 {
    padding-top: 11rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-11 {
    padding-bottom: 11rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-11 {
    padding-bottom: 11rem !important;
    padding-top: 11rem !important;
  }
}

.mt-12 {
  margin-top: 12rem;
}
@media screen and (max-width: 767px) {
  .mt-12 {
    margin-top: calc( 12rem * .7);
  }
}

.mb-12 {
  margin-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  .mb-12 {
    margin-bottom: calc( 12rem * .7);
  }
}

.ml-12 {
  margin-left: 12rem;
}
@media screen and (max-width: 767px) {
  .ml-12 {
    margin-left: calc( 12rem * .7);
  }
}

.mr-12 {
  margin-right: 12rem;
}
@media screen and (max-width: 767px) {
  .mr-12 {
    margin-right: calc( 12rem * .7);
  }
}

.mx-12 {
  margin-left: 12rem;
  margin-right: 12rem;
}
@media screen and (max-width: 767px) {
  .mx-12 {
    margin-left: calc( 12rem * .7);
    margin-right: calc( 12rem * .7);
  }
}

.my-12 {
  margin-top: 12rem;
  margin-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  .my-12 {
    margin-top: calc( 12rem * .7);
    margin-bottom: calc( 12rem * .7);
  }
}

.pt-12 {
  padding-top: 12rem;
}
@media screen and (max-width: 767px) {
  .pt-12 {
    padding-top: calc( 12rem * .7);
  }
}

.pb-12 {
  padding-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  .pb-12 {
    padding-bottom: calc( 12rem * .7);
  }
}

.pl-12 {
  padding-left: 12rem;
}
@media screen and (max-width: 767px) {
  .pl-12 {
    padding-left: calc( 12rem * .7);
  }
}

.pr-12 {
  padding-right: 12rem;
}
@media screen and (max-width: 767px) {
  .pr-12 {
    padding-right: calc( 12rem * .7);
  }
}

.px-12 {
  padding-left: 12rem;
  padding-right: 12rem;
}
@media screen and (max-width: 767px) {
  .px-12 {
    padding-left: calc( 12rem * .7);
    padding-right: calc( 12rem * .7);
  }
}

.py-12 {
  padding-top: 12rem;
  padding-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  .py-12 {
    padding-top: calc( 12rem * .7);
    padding-bottom: calc( 12rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-12 {
    margin-top: 12rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-12 {
    margin-bottom: 12rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-12 {
    margin-bottom: 12rem !important;
    margin-top: 12rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-12 {
    padding-top: 12rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-12 {
    padding-bottom: 12rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-12 {
    padding-bottom: 12rem !important;
    padding-top: 12rem !important;
  }
}

.mt-13 {
  margin-top: 13rem;
}
@media screen and (max-width: 767px) {
  .mt-13 {
    margin-top: calc( 13rem * .7);
  }
}

.mb-13 {
  margin-bottom: 13rem;
}
@media screen and (max-width: 767px) {
  .mb-13 {
    margin-bottom: calc( 13rem * .7);
  }
}

.ml-13 {
  margin-left: 13rem;
}
@media screen and (max-width: 767px) {
  .ml-13 {
    margin-left: calc( 13rem * .7);
  }
}

.mr-13 {
  margin-right: 13rem;
}
@media screen and (max-width: 767px) {
  .mr-13 {
    margin-right: calc( 13rem * .7);
  }
}

.mx-13 {
  margin-left: 13rem;
  margin-right: 13rem;
}
@media screen and (max-width: 767px) {
  .mx-13 {
    margin-left: calc( 13rem * .7);
    margin-right: calc( 13rem * .7);
  }
}

.my-13 {
  margin-top: 13rem;
  margin-bottom: 13rem;
}
@media screen and (max-width: 767px) {
  .my-13 {
    margin-top: calc( 13rem * .7);
    margin-bottom: calc( 13rem * .7);
  }
}

.pt-13 {
  padding-top: 13rem;
}
@media screen and (max-width: 767px) {
  .pt-13 {
    padding-top: calc( 13rem * .7);
  }
}

.pb-13 {
  padding-bottom: 13rem;
}
@media screen and (max-width: 767px) {
  .pb-13 {
    padding-bottom: calc( 13rem * .7);
  }
}

.pl-13 {
  padding-left: 13rem;
}
@media screen and (max-width: 767px) {
  .pl-13 {
    padding-left: calc( 13rem * .7);
  }
}

.pr-13 {
  padding-right: 13rem;
}
@media screen and (max-width: 767px) {
  .pr-13 {
    padding-right: calc( 13rem * .7);
  }
}

.px-13 {
  padding-left: 13rem;
  padding-right: 13rem;
}
@media screen and (max-width: 767px) {
  .px-13 {
    padding-left: calc( 13rem * .7);
    padding-right: calc( 13rem * .7);
  }
}

.py-13 {
  padding-top: 13rem;
  padding-bottom: 13rem;
}
@media screen and (max-width: 767px) {
  .py-13 {
    padding-top: calc( 13rem * .7);
    padding-bottom: calc( 13rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-13 {
    margin-top: 13rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-13 {
    margin-bottom: 13rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-13 {
    margin-bottom: 13rem !important;
    margin-top: 13rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-13 {
    padding-top: 13rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-13 {
    padding-bottom: 13rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-13 {
    padding-bottom: 13rem !important;
    padding-top: 13rem !important;
  }
}

.mt-14 {
  margin-top: 14rem;
}
@media screen and (max-width: 767px) {
  .mt-14 {
    margin-top: calc( 14rem * .7);
  }
}

.mb-14 {
  margin-bottom: 14rem;
}
@media screen and (max-width: 767px) {
  .mb-14 {
    margin-bottom: calc( 14rem * .7);
  }
}

.ml-14 {
  margin-left: 14rem;
}
@media screen and (max-width: 767px) {
  .ml-14 {
    margin-left: calc( 14rem * .7);
  }
}

.mr-14 {
  margin-right: 14rem;
}
@media screen and (max-width: 767px) {
  .mr-14 {
    margin-right: calc( 14rem * .7);
  }
}

.mx-14 {
  margin-left: 14rem;
  margin-right: 14rem;
}
@media screen and (max-width: 767px) {
  .mx-14 {
    margin-left: calc( 14rem * .7);
    margin-right: calc( 14rem * .7);
  }
}

.my-14 {
  margin-top: 14rem;
  margin-bottom: 14rem;
}
@media screen and (max-width: 767px) {
  .my-14 {
    margin-top: calc( 14rem * .7);
    margin-bottom: calc( 14rem * .7);
  }
}

.pt-14 {
  padding-top: 14rem;
}
@media screen and (max-width: 767px) {
  .pt-14 {
    padding-top: calc( 14rem * .7);
  }
}

.pb-14 {
  padding-bottom: 14rem;
}
@media screen and (max-width: 767px) {
  .pb-14 {
    padding-bottom: calc( 14rem * .7);
  }
}

.pl-14 {
  padding-left: 14rem;
}
@media screen and (max-width: 767px) {
  .pl-14 {
    padding-left: calc( 14rem * .7);
  }
}

.pr-14 {
  padding-right: 14rem;
}
@media screen and (max-width: 767px) {
  .pr-14 {
    padding-right: calc( 14rem * .7);
  }
}

.px-14 {
  padding-left: 14rem;
  padding-right: 14rem;
}
@media screen and (max-width: 767px) {
  .px-14 {
    padding-left: calc( 14rem * .7);
    padding-right: calc( 14rem * .7);
  }
}

.py-14 {
  padding-top: 14rem;
  padding-bottom: 14rem;
}
@media screen and (max-width: 767px) {
  .py-14 {
    padding-top: calc( 14rem * .7);
    padding-bottom: calc( 14rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-14 {
    margin-top: 14rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-14 {
    margin-bottom: 14rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-14 {
    margin-bottom: 14rem !important;
    margin-top: 14rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-14 {
    padding-top: 14rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-14 {
    padding-bottom: 14rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-14 {
    padding-bottom: 14rem !important;
    padding-top: 14rem !important;
  }
}

.mt-15 {
  margin-top: 15rem;
}
@media screen and (max-width: 767px) {
  .mt-15 {
    margin-top: calc( 15rem * .7);
  }
}

.mb-15 {
  margin-bottom: 15rem;
}
@media screen and (max-width: 767px) {
  .mb-15 {
    margin-bottom: calc( 15rem * .7);
  }
}

.ml-15 {
  margin-left: 15rem;
}
@media screen and (max-width: 767px) {
  .ml-15 {
    margin-left: calc( 15rem * .7);
  }
}

.mr-15 {
  margin-right: 15rem;
}
@media screen and (max-width: 767px) {
  .mr-15 {
    margin-right: calc( 15rem * .7);
  }
}

.mx-15 {
  margin-left: 15rem;
  margin-right: 15rem;
}
@media screen and (max-width: 767px) {
  .mx-15 {
    margin-left: calc( 15rem * .7);
    margin-right: calc( 15rem * .7);
  }
}

.my-15 {
  margin-top: 15rem;
  margin-bottom: 15rem;
}
@media screen and (max-width: 767px) {
  .my-15 {
    margin-top: calc( 15rem * .7);
    margin-bottom: calc( 15rem * .7);
  }
}

.pt-15 {
  padding-top: 15rem;
}
@media screen and (max-width: 767px) {
  .pt-15 {
    padding-top: calc( 15rem * .7);
  }
}

.pb-15 {
  padding-bottom: 15rem;
}
@media screen and (max-width: 767px) {
  .pb-15 {
    padding-bottom: calc( 15rem * .7);
  }
}

.pl-15 {
  padding-left: 15rem;
}
@media screen and (max-width: 767px) {
  .pl-15 {
    padding-left: calc( 15rem * .7);
  }
}

.pr-15 {
  padding-right: 15rem;
}
@media screen and (max-width: 767px) {
  .pr-15 {
    padding-right: calc( 15rem * .7);
  }
}

.px-15 {
  padding-left: 15rem;
  padding-right: 15rem;
}
@media screen and (max-width: 767px) {
  .px-15 {
    padding-left: calc( 15rem * .7);
    padding-right: calc( 15rem * .7);
  }
}

.py-15 {
  padding-top: 15rem;
  padding-bottom: 15rem;
}
@media screen and (max-width: 767px) {
  .py-15 {
    padding-top: calc( 15rem * .7);
    padding-bottom: calc( 15rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-15 {
    margin-top: 15rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-15 {
    margin-bottom: 15rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-15 {
    margin-bottom: 15rem !important;
    margin-top: 15rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-15 {
    padding-top: 15rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-15 {
    padding-bottom: 15rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-15 {
    padding-bottom: 15rem !important;
    padding-top: 15rem !important;
  }
}

.mt-16 {
  margin-top: 16rem;
}
@media screen and (max-width: 767px) {
  .mt-16 {
    margin-top: calc( 16rem * .7);
  }
}

.mb-16 {
  margin-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .mb-16 {
    margin-bottom: calc( 16rem * .7);
  }
}

.ml-16 {
  margin-left: 16rem;
}
@media screen and (max-width: 767px) {
  .ml-16 {
    margin-left: calc( 16rem * .7);
  }
}

.mr-16 {
  margin-right: 16rem;
}
@media screen and (max-width: 767px) {
  .mr-16 {
    margin-right: calc( 16rem * .7);
  }
}

.mx-16 {
  margin-left: 16rem;
  margin-right: 16rem;
}
@media screen and (max-width: 767px) {
  .mx-16 {
    margin-left: calc( 16rem * .7);
    margin-right: calc( 16rem * .7);
  }
}

.my-16 {
  margin-top: 16rem;
  margin-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .my-16 {
    margin-top: calc( 16rem * .7);
    margin-bottom: calc( 16rem * .7);
  }
}

.pt-16 {
  padding-top: 16rem;
}
@media screen and (max-width: 767px) {
  .pt-16 {
    padding-top: calc( 16rem * .7);
  }
}

.pb-16 {
  padding-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .pb-16 {
    padding-bottom: calc( 16rem * .7);
  }
}

.pl-16 {
  padding-left: 16rem;
}
@media screen and (max-width: 767px) {
  .pl-16 {
    padding-left: calc( 16rem * .7);
  }
}

.pr-16 {
  padding-right: 16rem;
}
@media screen and (max-width: 767px) {
  .pr-16 {
    padding-right: calc( 16rem * .7);
  }
}

.px-16 {
  padding-left: 16rem;
  padding-right: 16rem;
}
@media screen and (max-width: 767px) {
  .px-16 {
    padding-left: calc( 16rem * .7);
    padding-right: calc( 16rem * .7);
  }
}

.py-16 {
  padding-top: 16rem;
  padding-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .py-16 {
    padding-top: calc( 16rem * .7);
    padding-bottom: calc( 16rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-16 {
    margin-top: 16rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-16 {
    margin-bottom: 16rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-16 {
    margin-bottom: 16rem !important;
    margin-top: 16rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-16 {
    padding-top: 16rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-16 {
    padding-bottom: 16rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-16 {
    padding-bottom: 16rem !important;
    padding-top: 16rem !important;
  }
}

.mt-17 {
  margin-top: 17rem;
}
@media screen and (max-width: 767px) {
  .mt-17 {
    margin-top: calc( 17rem * .7);
  }
}

.mb-17 {
  margin-bottom: 17rem;
}
@media screen and (max-width: 767px) {
  .mb-17 {
    margin-bottom: calc( 17rem * .7);
  }
}

.ml-17 {
  margin-left: 17rem;
}
@media screen and (max-width: 767px) {
  .ml-17 {
    margin-left: calc( 17rem * .7);
  }
}

.mr-17 {
  margin-right: 17rem;
}
@media screen and (max-width: 767px) {
  .mr-17 {
    margin-right: calc( 17rem * .7);
  }
}

.mx-17 {
  margin-left: 17rem;
  margin-right: 17rem;
}
@media screen and (max-width: 767px) {
  .mx-17 {
    margin-left: calc( 17rem * .7);
    margin-right: calc( 17rem * .7);
  }
}

.my-17 {
  margin-top: 17rem;
  margin-bottom: 17rem;
}
@media screen and (max-width: 767px) {
  .my-17 {
    margin-top: calc( 17rem * .7);
    margin-bottom: calc( 17rem * .7);
  }
}

.pt-17 {
  padding-top: 17rem;
}
@media screen and (max-width: 767px) {
  .pt-17 {
    padding-top: calc( 17rem * .7);
  }
}

.pb-17 {
  padding-bottom: 17rem;
}
@media screen and (max-width: 767px) {
  .pb-17 {
    padding-bottom: calc( 17rem * .7);
  }
}

.pl-17 {
  padding-left: 17rem;
}
@media screen and (max-width: 767px) {
  .pl-17 {
    padding-left: calc( 17rem * .7);
  }
}

.pr-17 {
  padding-right: 17rem;
}
@media screen and (max-width: 767px) {
  .pr-17 {
    padding-right: calc( 17rem * .7);
  }
}

.px-17 {
  padding-left: 17rem;
  padding-right: 17rem;
}
@media screen and (max-width: 767px) {
  .px-17 {
    padding-left: calc( 17rem * .7);
    padding-right: calc( 17rem * .7);
  }
}

.py-17 {
  padding-top: 17rem;
  padding-bottom: 17rem;
}
@media screen and (max-width: 767px) {
  .py-17 {
    padding-top: calc( 17rem * .7);
    padding-bottom: calc( 17rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-17 {
    margin-top: 17rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-17 {
    margin-bottom: 17rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-17 {
    margin-bottom: 17rem !important;
    margin-top: 17rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-17 {
    padding-top: 17rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-17 {
    padding-bottom: 17rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-17 {
    padding-bottom: 17rem !important;
    padding-top: 17rem !important;
  }
}

.mt-18 {
  margin-top: 18rem;
}
@media screen and (max-width: 767px) {
  .mt-18 {
    margin-top: calc( 18rem * .7);
  }
}

.mb-18 {
  margin-bottom: 18rem;
}
@media screen and (max-width: 767px) {
  .mb-18 {
    margin-bottom: calc( 18rem * .7);
  }
}

.ml-18 {
  margin-left: 18rem;
}
@media screen and (max-width: 767px) {
  .ml-18 {
    margin-left: calc( 18rem * .7);
  }
}

.mr-18 {
  margin-right: 18rem;
}
@media screen and (max-width: 767px) {
  .mr-18 {
    margin-right: calc( 18rem * .7);
  }
}

.mx-18 {
  margin-left: 18rem;
  margin-right: 18rem;
}
@media screen and (max-width: 767px) {
  .mx-18 {
    margin-left: calc( 18rem * .7);
    margin-right: calc( 18rem * .7);
  }
}

.my-18 {
  margin-top: 18rem;
  margin-bottom: 18rem;
}
@media screen and (max-width: 767px) {
  .my-18 {
    margin-top: calc( 18rem * .7);
    margin-bottom: calc( 18rem * .7);
  }
}

.pt-18 {
  padding-top: 18rem;
}
@media screen and (max-width: 767px) {
  .pt-18 {
    padding-top: calc( 18rem * .7);
  }
}

.pb-18 {
  padding-bottom: 18rem;
}
@media screen and (max-width: 767px) {
  .pb-18 {
    padding-bottom: calc( 18rem * .7);
  }
}

.pl-18 {
  padding-left: 18rem;
}
@media screen and (max-width: 767px) {
  .pl-18 {
    padding-left: calc( 18rem * .7);
  }
}

.pr-18 {
  padding-right: 18rem;
}
@media screen and (max-width: 767px) {
  .pr-18 {
    padding-right: calc( 18rem * .7);
  }
}

.px-18 {
  padding-left: 18rem;
  padding-right: 18rem;
}
@media screen and (max-width: 767px) {
  .px-18 {
    padding-left: calc( 18rem * .7);
    padding-right: calc( 18rem * .7);
  }
}

.py-18 {
  padding-top: 18rem;
  padding-bottom: 18rem;
}
@media screen and (max-width: 767px) {
  .py-18 {
    padding-top: calc( 18rem * .7);
    padding-bottom: calc( 18rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-18 {
    margin-top: 18rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-18 {
    margin-bottom: 18rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-18 {
    margin-bottom: 18rem !important;
    margin-top: 18rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-18 {
    padding-top: 18rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-18 {
    padding-bottom: 18rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-18 {
    padding-bottom: 18rem !important;
    padding-top: 18rem !important;
  }
}

.mt-19 {
  margin-top: 19rem;
}
@media screen and (max-width: 767px) {
  .mt-19 {
    margin-top: calc( 19rem * .7);
  }
}

.mb-19 {
  margin-bottom: 19rem;
}
@media screen and (max-width: 767px) {
  .mb-19 {
    margin-bottom: calc( 19rem * .7);
  }
}

.ml-19 {
  margin-left: 19rem;
}
@media screen and (max-width: 767px) {
  .ml-19 {
    margin-left: calc( 19rem * .7);
  }
}

.mr-19 {
  margin-right: 19rem;
}
@media screen and (max-width: 767px) {
  .mr-19 {
    margin-right: calc( 19rem * .7);
  }
}

.mx-19 {
  margin-left: 19rem;
  margin-right: 19rem;
}
@media screen and (max-width: 767px) {
  .mx-19 {
    margin-left: calc( 19rem * .7);
    margin-right: calc( 19rem * .7);
  }
}

.my-19 {
  margin-top: 19rem;
  margin-bottom: 19rem;
}
@media screen and (max-width: 767px) {
  .my-19 {
    margin-top: calc( 19rem * .7);
    margin-bottom: calc( 19rem * .7);
  }
}

.pt-19 {
  padding-top: 19rem;
}
@media screen and (max-width: 767px) {
  .pt-19 {
    padding-top: calc( 19rem * .7);
  }
}

.pb-19 {
  padding-bottom: 19rem;
}
@media screen and (max-width: 767px) {
  .pb-19 {
    padding-bottom: calc( 19rem * .7);
  }
}

.pl-19 {
  padding-left: 19rem;
}
@media screen and (max-width: 767px) {
  .pl-19 {
    padding-left: calc( 19rem * .7);
  }
}

.pr-19 {
  padding-right: 19rem;
}
@media screen and (max-width: 767px) {
  .pr-19 {
    padding-right: calc( 19rem * .7);
  }
}

.px-19 {
  padding-left: 19rem;
  padding-right: 19rem;
}
@media screen and (max-width: 767px) {
  .px-19 {
    padding-left: calc( 19rem * .7);
    padding-right: calc( 19rem * .7);
  }
}

.py-19 {
  padding-top: 19rem;
  padding-bottom: 19rem;
}
@media screen and (max-width: 767px) {
  .py-19 {
    padding-top: calc( 19rem * .7);
    padding-bottom: calc( 19rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-19 {
    margin-top: 19rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-19 {
    margin-bottom: 19rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-19 {
    margin-bottom: 19rem !important;
    margin-top: 19rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-19 {
    padding-top: 19rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-19 {
    padding-bottom: 19rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-19 {
    padding-bottom: 19rem !important;
    padding-top: 19rem !important;
  }
}

.mt-20 {
  margin-top: 20rem;
}
@media screen and (max-width: 767px) {
  .mt-20 {
    margin-top: calc( 20rem * .7);
  }
}

.mb-20 {
  margin-bottom: 20rem;
}
@media screen and (max-width: 767px) {
  .mb-20 {
    margin-bottom: calc( 20rem * .7);
  }
}

.ml-20 {
  margin-left: 20rem;
}
@media screen and (max-width: 767px) {
  .ml-20 {
    margin-left: calc( 20rem * .7);
  }
}

.mr-20 {
  margin-right: 20rem;
}
@media screen and (max-width: 767px) {
  .mr-20 {
    margin-right: calc( 20rem * .7);
  }
}

.mx-20 {
  margin-left: 20rem;
  margin-right: 20rem;
}
@media screen and (max-width: 767px) {
  .mx-20 {
    margin-left: calc( 20rem * .7);
    margin-right: calc( 20rem * .7);
  }
}

.my-20 {
  margin-top: 20rem;
  margin-bottom: 20rem;
}
@media screen and (max-width: 767px) {
  .my-20 {
    margin-top: calc( 20rem * .7);
    margin-bottom: calc( 20rem * .7);
  }
}

.pt-20 {
  padding-top: 20rem;
}
@media screen and (max-width: 767px) {
  .pt-20 {
    padding-top: calc( 20rem * .7);
  }
}

.pb-20 {
  padding-bottom: 20rem;
}
@media screen and (max-width: 767px) {
  .pb-20 {
    padding-bottom: calc( 20rem * .7);
  }
}

.pl-20 {
  padding-left: 20rem;
}
@media screen and (max-width: 767px) {
  .pl-20 {
    padding-left: calc( 20rem * .7);
  }
}

.pr-20 {
  padding-right: 20rem;
}
@media screen and (max-width: 767px) {
  .pr-20 {
    padding-right: calc( 20rem * .7);
  }
}

.px-20 {
  padding-left: 20rem;
  padding-right: 20rem;
}
@media screen and (max-width: 767px) {
  .px-20 {
    padding-left: calc( 20rem * .7);
    padding-right: calc( 20rem * .7);
  }
}

.py-20 {
  padding-top: 20rem;
  padding-bottom: 20rem;
}
@media screen and (max-width: 767px) {
  .py-20 {
    padding-top: calc( 20rem * .7);
    padding-bottom: calc( 20rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-20 {
    margin-top: 20rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-20 {
    margin-bottom: 20rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-20 {
    margin-bottom: 20rem !important;
    margin-top: 20rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-20 {
    padding-top: 20rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-20 {
    padding-bottom: 20rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-20 {
    padding-bottom: 20rem !important;
    padding-top: 20rem !important;
  }
}

.mt-21 {
  margin-top: 21rem;
}
@media screen and (max-width: 767px) {
  .mt-21 {
    margin-top: calc( 21rem * .7);
  }
}

.mb-21 {
  margin-bottom: 21rem;
}
@media screen and (max-width: 767px) {
  .mb-21 {
    margin-bottom: calc( 21rem * .7);
  }
}

.ml-21 {
  margin-left: 21rem;
}
@media screen and (max-width: 767px) {
  .ml-21 {
    margin-left: calc( 21rem * .7);
  }
}

.mr-21 {
  margin-right: 21rem;
}
@media screen and (max-width: 767px) {
  .mr-21 {
    margin-right: calc( 21rem * .7);
  }
}

.mx-21 {
  margin-left: 21rem;
  margin-right: 21rem;
}
@media screen and (max-width: 767px) {
  .mx-21 {
    margin-left: calc( 21rem * .7);
    margin-right: calc( 21rem * .7);
  }
}

.my-21 {
  margin-top: 21rem;
  margin-bottom: 21rem;
}
@media screen and (max-width: 767px) {
  .my-21 {
    margin-top: calc( 21rem * .7);
    margin-bottom: calc( 21rem * .7);
  }
}

.pt-21 {
  padding-top: 21rem;
}
@media screen and (max-width: 767px) {
  .pt-21 {
    padding-top: calc( 21rem * .7);
  }
}

.pb-21 {
  padding-bottom: 21rem;
}
@media screen and (max-width: 767px) {
  .pb-21 {
    padding-bottom: calc( 21rem * .7);
  }
}

.pl-21 {
  padding-left: 21rem;
}
@media screen and (max-width: 767px) {
  .pl-21 {
    padding-left: calc( 21rem * .7);
  }
}

.pr-21 {
  padding-right: 21rem;
}
@media screen and (max-width: 767px) {
  .pr-21 {
    padding-right: calc( 21rem * .7);
  }
}

.px-21 {
  padding-left: 21rem;
  padding-right: 21rem;
}
@media screen and (max-width: 767px) {
  .px-21 {
    padding-left: calc( 21rem * .7);
    padding-right: calc( 21rem * .7);
  }
}

.py-21 {
  padding-top: 21rem;
  padding-bottom: 21rem;
}
@media screen and (max-width: 767px) {
  .py-21 {
    padding-top: calc( 21rem * .7);
    padding-bottom: calc( 21rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-21 {
    margin-top: 21rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-21 {
    margin-bottom: 21rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-21 {
    margin-bottom: 21rem !important;
    margin-top: 21rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-21 {
    padding-top: 21rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-21 {
    padding-bottom: 21rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-21 {
    padding-bottom: 21rem !important;
    padding-top: 21rem !important;
  }
}

.mt-22 {
  margin-top: 22rem;
}
@media screen and (max-width: 767px) {
  .mt-22 {
    margin-top: calc( 22rem * .7);
  }
}

.mb-22 {
  margin-bottom: 22rem;
}
@media screen and (max-width: 767px) {
  .mb-22 {
    margin-bottom: calc( 22rem * .7);
  }
}

.ml-22 {
  margin-left: 22rem;
}
@media screen and (max-width: 767px) {
  .ml-22 {
    margin-left: calc( 22rem * .7);
  }
}

.mr-22 {
  margin-right: 22rem;
}
@media screen and (max-width: 767px) {
  .mr-22 {
    margin-right: calc( 22rem * .7);
  }
}

.mx-22 {
  margin-left: 22rem;
  margin-right: 22rem;
}
@media screen and (max-width: 767px) {
  .mx-22 {
    margin-left: calc( 22rem * .7);
    margin-right: calc( 22rem * .7);
  }
}

.my-22 {
  margin-top: 22rem;
  margin-bottom: 22rem;
}
@media screen and (max-width: 767px) {
  .my-22 {
    margin-top: calc( 22rem * .7);
    margin-bottom: calc( 22rem * .7);
  }
}

.pt-22 {
  padding-top: 22rem;
}
@media screen and (max-width: 767px) {
  .pt-22 {
    padding-top: calc( 22rem * .7);
  }
}

.pb-22 {
  padding-bottom: 22rem;
}
@media screen and (max-width: 767px) {
  .pb-22 {
    padding-bottom: calc( 22rem * .7);
  }
}

.pl-22 {
  padding-left: 22rem;
}
@media screen and (max-width: 767px) {
  .pl-22 {
    padding-left: calc( 22rem * .7);
  }
}

.pr-22 {
  padding-right: 22rem;
}
@media screen and (max-width: 767px) {
  .pr-22 {
    padding-right: calc( 22rem * .7);
  }
}

.px-22 {
  padding-left: 22rem;
  padding-right: 22rem;
}
@media screen and (max-width: 767px) {
  .px-22 {
    padding-left: calc( 22rem * .7);
    padding-right: calc( 22rem * .7);
  }
}

.py-22 {
  padding-top: 22rem;
  padding-bottom: 22rem;
}
@media screen and (max-width: 767px) {
  .py-22 {
    padding-top: calc( 22rem * .7);
    padding-bottom: calc( 22rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-22 {
    margin-top: 22rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-22 {
    margin-bottom: 22rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-22 {
    margin-bottom: 22rem !important;
    margin-top: 22rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-22 {
    padding-top: 22rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-22 {
    padding-bottom: 22rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-22 {
    padding-bottom: 22rem !important;
    padding-top: 22rem !important;
  }
}

.mt-23 {
  margin-top: 23rem;
}
@media screen and (max-width: 767px) {
  .mt-23 {
    margin-top: calc( 23rem * .7);
  }
}

.mb-23 {
  margin-bottom: 23rem;
}
@media screen and (max-width: 767px) {
  .mb-23 {
    margin-bottom: calc( 23rem * .7);
  }
}

.ml-23 {
  margin-left: 23rem;
}
@media screen and (max-width: 767px) {
  .ml-23 {
    margin-left: calc( 23rem * .7);
  }
}

.mr-23 {
  margin-right: 23rem;
}
@media screen and (max-width: 767px) {
  .mr-23 {
    margin-right: calc( 23rem * .7);
  }
}

.mx-23 {
  margin-left: 23rem;
  margin-right: 23rem;
}
@media screen and (max-width: 767px) {
  .mx-23 {
    margin-left: calc( 23rem * .7);
    margin-right: calc( 23rem * .7);
  }
}

.my-23 {
  margin-top: 23rem;
  margin-bottom: 23rem;
}
@media screen and (max-width: 767px) {
  .my-23 {
    margin-top: calc( 23rem * .7);
    margin-bottom: calc( 23rem * .7);
  }
}

.pt-23 {
  padding-top: 23rem;
}
@media screen and (max-width: 767px) {
  .pt-23 {
    padding-top: calc( 23rem * .7);
  }
}

.pb-23 {
  padding-bottom: 23rem;
}
@media screen and (max-width: 767px) {
  .pb-23 {
    padding-bottom: calc( 23rem * .7);
  }
}

.pl-23 {
  padding-left: 23rem;
}
@media screen and (max-width: 767px) {
  .pl-23 {
    padding-left: calc( 23rem * .7);
  }
}

.pr-23 {
  padding-right: 23rem;
}
@media screen and (max-width: 767px) {
  .pr-23 {
    padding-right: calc( 23rem * .7);
  }
}

.px-23 {
  padding-left: 23rem;
  padding-right: 23rem;
}
@media screen and (max-width: 767px) {
  .px-23 {
    padding-left: calc( 23rem * .7);
    padding-right: calc( 23rem * .7);
  }
}

.py-23 {
  padding-top: 23rem;
  padding-bottom: 23rem;
}
@media screen and (max-width: 767px) {
  .py-23 {
    padding-top: calc( 23rem * .7);
    padding-bottom: calc( 23rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-23 {
    margin-top: 23rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-23 {
    margin-bottom: 23rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-23 {
    margin-bottom: 23rem !important;
    margin-top: 23rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-23 {
    padding-top: 23rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-23 {
    padding-bottom: 23rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-23 {
    padding-bottom: 23rem !important;
    padding-top: 23rem !important;
  }
}

.mt-24 {
  margin-top: 24rem;
}
@media screen and (max-width: 767px) {
  .mt-24 {
    margin-top: calc( 24rem * .7);
  }
}

.mb-24 {
  margin-bottom: 24rem;
}
@media screen and (max-width: 767px) {
  .mb-24 {
    margin-bottom: calc( 24rem * .7);
  }
}

.ml-24 {
  margin-left: 24rem;
}
@media screen and (max-width: 767px) {
  .ml-24 {
    margin-left: calc( 24rem * .7);
  }
}

.mr-24 {
  margin-right: 24rem;
}
@media screen and (max-width: 767px) {
  .mr-24 {
    margin-right: calc( 24rem * .7);
  }
}

.mx-24 {
  margin-left: 24rem;
  margin-right: 24rem;
}
@media screen and (max-width: 767px) {
  .mx-24 {
    margin-left: calc( 24rem * .7);
    margin-right: calc( 24rem * .7);
  }
}

.my-24 {
  margin-top: 24rem;
  margin-bottom: 24rem;
}
@media screen and (max-width: 767px) {
  .my-24 {
    margin-top: calc( 24rem * .7);
    margin-bottom: calc( 24rem * .7);
  }
}

.pt-24 {
  padding-top: 24rem;
}
@media screen and (max-width: 767px) {
  .pt-24 {
    padding-top: calc( 24rem * .7);
  }
}

.pb-24 {
  padding-bottom: 24rem;
}
@media screen and (max-width: 767px) {
  .pb-24 {
    padding-bottom: calc( 24rem * .7);
  }
}

.pl-24 {
  padding-left: 24rem;
}
@media screen and (max-width: 767px) {
  .pl-24 {
    padding-left: calc( 24rem * .7);
  }
}

.pr-24 {
  padding-right: 24rem;
}
@media screen and (max-width: 767px) {
  .pr-24 {
    padding-right: calc( 24rem * .7);
  }
}

.px-24 {
  padding-left: 24rem;
  padding-right: 24rem;
}
@media screen and (max-width: 767px) {
  .px-24 {
    padding-left: calc( 24rem * .7);
    padding-right: calc( 24rem * .7);
  }
}

.py-24 {
  padding-top: 24rem;
  padding-bottom: 24rem;
}
@media screen and (max-width: 767px) {
  .py-24 {
    padding-top: calc( 24rem * .7);
    padding-bottom: calc( 24rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-24 {
    margin-top: 24rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-24 {
    margin-bottom: 24rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-24 {
    margin-bottom: 24rem !important;
    margin-top: 24rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-24 {
    padding-top: 24rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-24 {
    padding-bottom: 24rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-24 {
    padding-bottom: 24rem !important;
    padding-top: 24rem !important;
  }
}

.mt-25 {
  margin-top: 25rem;
}
@media screen and (max-width: 767px) {
  .mt-25 {
    margin-top: calc( 25rem * .7);
  }
}

.mb-25 {
  margin-bottom: 25rem;
}
@media screen and (max-width: 767px) {
  .mb-25 {
    margin-bottom: calc( 25rem * .7);
  }
}

.ml-25 {
  margin-left: 25rem;
}
@media screen and (max-width: 767px) {
  .ml-25 {
    margin-left: calc( 25rem * .7);
  }
}

.mr-25 {
  margin-right: 25rem;
}
@media screen and (max-width: 767px) {
  .mr-25 {
    margin-right: calc( 25rem * .7);
  }
}

.mx-25 {
  margin-left: 25rem;
  margin-right: 25rem;
}
@media screen and (max-width: 767px) {
  .mx-25 {
    margin-left: calc( 25rem * .7);
    margin-right: calc( 25rem * .7);
  }
}

.my-25 {
  margin-top: 25rem;
  margin-bottom: 25rem;
}
@media screen and (max-width: 767px) {
  .my-25 {
    margin-top: calc( 25rem * .7);
    margin-bottom: calc( 25rem * .7);
  }
}

.pt-25 {
  padding-top: 25rem;
}
@media screen and (max-width: 767px) {
  .pt-25 {
    padding-top: calc( 25rem * .7);
  }
}

.pb-25 {
  padding-bottom: 25rem;
}
@media screen and (max-width: 767px) {
  .pb-25 {
    padding-bottom: calc( 25rem * .7);
  }
}

.pl-25 {
  padding-left: 25rem;
}
@media screen and (max-width: 767px) {
  .pl-25 {
    padding-left: calc( 25rem * .7);
  }
}

.pr-25 {
  padding-right: 25rem;
}
@media screen and (max-width: 767px) {
  .pr-25 {
    padding-right: calc( 25rem * .7);
  }
}

.px-25 {
  padding-left: 25rem;
  padding-right: 25rem;
}
@media screen and (max-width: 767px) {
  .px-25 {
    padding-left: calc( 25rem * .7);
    padding-right: calc( 25rem * .7);
  }
}

.py-25 {
  padding-top: 25rem;
  padding-bottom: 25rem;
}
@media screen and (max-width: 767px) {
  .py-25 {
    padding-top: calc( 25rem * .7);
    padding-bottom: calc( 25rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-25 {
    margin-top: 25rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-25 {
    margin-bottom: 25rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-25 {
    margin-bottom: 25rem !important;
    margin-top: 25rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-25 {
    padding-top: 25rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-25 {
    padding-bottom: 25rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-25 {
    padding-bottom: 25rem !important;
    padding-top: 25rem !important;
  }
}

.mt-26 {
  margin-top: 26rem;
}
@media screen and (max-width: 767px) {
  .mt-26 {
    margin-top: calc( 26rem * .7);
  }
}

.mb-26 {
  margin-bottom: 26rem;
}
@media screen and (max-width: 767px) {
  .mb-26 {
    margin-bottom: calc( 26rem * .7);
  }
}

.ml-26 {
  margin-left: 26rem;
}
@media screen and (max-width: 767px) {
  .ml-26 {
    margin-left: calc( 26rem * .7);
  }
}

.mr-26 {
  margin-right: 26rem;
}
@media screen and (max-width: 767px) {
  .mr-26 {
    margin-right: calc( 26rem * .7);
  }
}

.mx-26 {
  margin-left: 26rem;
  margin-right: 26rem;
}
@media screen and (max-width: 767px) {
  .mx-26 {
    margin-left: calc( 26rem * .7);
    margin-right: calc( 26rem * .7);
  }
}

.my-26 {
  margin-top: 26rem;
  margin-bottom: 26rem;
}
@media screen and (max-width: 767px) {
  .my-26 {
    margin-top: calc( 26rem * .7);
    margin-bottom: calc( 26rem * .7);
  }
}

.pt-26 {
  padding-top: 26rem;
}
@media screen and (max-width: 767px) {
  .pt-26 {
    padding-top: calc( 26rem * .7);
  }
}

.pb-26 {
  padding-bottom: 26rem;
}
@media screen and (max-width: 767px) {
  .pb-26 {
    padding-bottom: calc( 26rem * .7);
  }
}

.pl-26 {
  padding-left: 26rem;
}
@media screen and (max-width: 767px) {
  .pl-26 {
    padding-left: calc( 26rem * .7);
  }
}

.pr-26 {
  padding-right: 26rem;
}
@media screen and (max-width: 767px) {
  .pr-26 {
    padding-right: calc( 26rem * .7);
  }
}

.px-26 {
  padding-left: 26rem;
  padding-right: 26rem;
}
@media screen and (max-width: 767px) {
  .px-26 {
    padding-left: calc( 26rem * .7);
    padding-right: calc( 26rem * .7);
  }
}

.py-26 {
  padding-top: 26rem;
  padding-bottom: 26rem;
}
@media screen and (max-width: 767px) {
  .py-26 {
    padding-top: calc( 26rem * .7);
    padding-bottom: calc( 26rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-26 {
    margin-top: 26rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-26 {
    margin-bottom: 26rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-26 {
    margin-bottom: 26rem !important;
    margin-top: 26rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-26 {
    padding-top: 26rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-26 {
    padding-bottom: 26rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-26 {
    padding-bottom: 26rem !important;
    padding-top: 26rem !important;
  }
}

.mt-27 {
  margin-top: 27rem;
}
@media screen and (max-width: 767px) {
  .mt-27 {
    margin-top: calc( 27rem * .7);
  }
}

.mb-27 {
  margin-bottom: 27rem;
}
@media screen and (max-width: 767px) {
  .mb-27 {
    margin-bottom: calc( 27rem * .7);
  }
}

.ml-27 {
  margin-left: 27rem;
}
@media screen and (max-width: 767px) {
  .ml-27 {
    margin-left: calc( 27rem * .7);
  }
}

.mr-27 {
  margin-right: 27rem;
}
@media screen and (max-width: 767px) {
  .mr-27 {
    margin-right: calc( 27rem * .7);
  }
}

.mx-27 {
  margin-left: 27rem;
  margin-right: 27rem;
}
@media screen and (max-width: 767px) {
  .mx-27 {
    margin-left: calc( 27rem * .7);
    margin-right: calc( 27rem * .7);
  }
}

.my-27 {
  margin-top: 27rem;
  margin-bottom: 27rem;
}
@media screen and (max-width: 767px) {
  .my-27 {
    margin-top: calc( 27rem * .7);
    margin-bottom: calc( 27rem * .7);
  }
}

.pt-27 {
  padding-top: 27rem;
}
@media screen and (max-width: 767px) {
  .pt-27 {
    padding-top: calc( 27rem * .7);
  }
}

.pb-27 {
  padding-bottom: 27rem;
}
@media screen and (max-width: 767px) {
  .pb-27 {
    padding-bottom: calc( 27rem * .7);
  }
}

.pl-27 {
  padding-left: 27rem;
}
@media screen and (max-width: 767px) {
  .pl-27 {
    padding-left: calc( 27rem * .7);
  }
}

.pr-27 {
  padding-right: 27rem;
}
@media screen and (max-width: 767px) {
  .pr-27 {
    padding-right: calc( 27rem * .7);
  }
}

.px-27 {
  padding-left: 27rem;
  padding-right: 27rem;
}
@media screen and (max-width: 767px) {
  .px-27 {
    padding-left: calc( 27rem * .7);
    padding-right: calc( 27rem * .7);
  }
}

.py-27 {
  padding-top: 27rem;
  padding-bottom: 27rem;
}
@media screen and (max-width: 767px) {
  .py-27 {
    padding-top: calc( 27rem * .7);
    padding-bottom: calc( 27rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-27 {
    margin-top: 27rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-27 {
    margin-bottom: 27rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-27 {
    margin-bottom: 27rem !important;
    margin-top: 27rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-27 {
    padding-top: 27rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-27 {
    padding-bottom: 27rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-27 {
    padding-bottom: 27rem !important;
    padding-top: 27rem !important;
  }
}

.mt-28 {
  margin-top: 28rem;
}
@media screen and (max-width: 767px) {
  .mt-28 {
    margin-top: calc( 28rem * .7);
  }
}

.mb-28 {
  margin-bottom: 28rem;
}
@media screen and (max-width: 767px) {
  .mb-28 {
    margin-bottom: calc( 28rem * .7);
  }
}

.ml-28 {
  margin-left: 28rem;
}
@media screen and (max-width: 767px) {
  .ml-28 {
    margin-left: calc( 28rem * .7);
  }
}

.mr-28 {
  margin-right: 28rem;
}
@media screen and (max-width: 767px) {
  .mr-28 {
    margin-right: calc( 28rem * .7);
  }
}

.mx-28 {
  margin-left: 28rem;
  margin-right: 28rem;
}
@media screen and (max-width: 767px) {
  .mx-28 {
    margin-left: calc( 28rem * .7);
    margin-right: calc( 28rem * .7);
  }
}

.my-28 {
  margin-top: 28rem;
  margin-bottom: 28rem;
}
@media screen and (max-width: 767px) {
  .my-28 {
    margin-top: calc( 28rem * .7);
    margin-bottom: calc( 28rem * .7);
  }
}

.pt-28 {
  padding-top: 28rem;
}
@media screen and (max-width: 767px) {
  .pt-28 {
    padding-top: calc( 28rem * .7);
  }
}

.pb-28 {
  padding-bottom: 28rem;
}
@media screen and (max-width: 767px) {
  .pb-28 {
    padding-bottom: calc( 28rem * .7);
  }
}

.pl-28 {
  padding-left: 28rem;
}
@media screen and (max-width: 767px) {
  .pl-28 {
    padding-left: calc( 28rem * .7);
  }
}

.pr-28 {
  padding-right: 28rem;
}
@media screen and (max-width: 767px) {
  .pr-28 {
    padding-right: calc( 28rem * .7);
  }
}

.px-28 {
  padding-left: 28rem;
  padding-right: 28rem;
}
@media screen and (max-width: 767px) {
  .px-28 {
    padding-left: calc( 28rem * .7);
    padding-right: calc( 28rem * .7);
  }
}

.py-28 {
  padding-top: 28rem;
  padding-bottom: 28rem;
}
@media screen and (max-width: 767px) {
  .py-28 {
    padding-top: calc( 28rem * .7);
    padding-bottom: calc( 28rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-28 {
    margin-top: 28rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-28 {
    margin-bottom: 28rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-28 {
    margin-bottom: 28rem !important;
    margin-top: 28rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-28 {
    padding-top: 28rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-28 {
    padding-bottom: 28rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-28 {
    padding-bottom: 28rem !important;
    padding-top: 28rem !important;
  }
}

.mt-29 {
  margin-top: 29rem;
}
@media screen and (max-width: 767px) {
  .mt-29 {
    margin-top: calc( 29rem * .7);
  }
}

.mb-29 {
  margin-bottom: 29rem;
}
@media screen and (max-width: 767px) {
  .mb-29 {
    margin-bottom: calc( 29rem * .7);
  }
}

.ml-29 {
  margin-left: 29rem;
}
@media screen and (max-width: 767px) {
  .ml-29 {
    margin-left: calc( 29rem * .7);
  }
}

.mr-29 {
  margin-right: 29rem;
}
@media screen and (max-width: 767px) {
  .mr-29 {
    margin-right: calc( 29rem * .7);
  }
}

.mx-29 {
  margin-left: 29rem;
  margin-right: 29rem;
}
@media screen and (max-width: 767px) {
  .mx-29 {
    margin-left: calc( 29rem * .7);
    margin-right: calc( 29rem * .7);
  }
}

.my-29 {
  margin-top: 29rem;
  margin-bottom: 29rem;
}
@media screen and (max-width: 767px) {
  .my-29 {
    margin-top: calc( 29rem * .7);
    margin-bottom: calc( 29rem * .7);
  }
}

.pt-29 {
  padding-top: 29rem;
}
@media screen and (max-width: 767px) {
  .pt-29 {
    padding-top: calc( 29rem * .7);
  }
}

.pb-29 {
  padding-bottom: 29rem;
}
@media screen and (max-width: 767px) {
  .pb-29 {
    padding-bottom: calc( 29rem * .7);
  }
}

.pl-29 {
  padding-left: 29rem;
}
@media screen and (max-width: 767px) {
  .pl-29 {
    padding-left: calc( 29rem * .7);
  }
}

.pr-29 {
  padding-right: 29rem;
}
@media screen and (max-width: 767px) {
  .pr-29 {
    padding-right: calc( 29rem * .7);
  }
}

.px-29 {
  padding-left: 29rem;
  padding-right: 29rem;
}
@media screen and (max-width: 767px) {
  .px-29 {
    padding-left: calc( 29rem * .7);
    padding-right: calc( 29rem * .7);
  }
}

.py-29 {
  padding-top: 29rem;
  padding-bottom: 29rem;
}
@media screen and (max-width: 767px) {
  .py-29 {
    padding-top: calc( 29rem * .7);
    padding-bottom: calc( 29rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-29 {
    margin-top: 29rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-29 {
    margin-bottom: 29rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-29 {
    margin-bottom: 29rem !important;
    margin-top: 29rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-29 {
    padding-top: 29rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-29 {
    padding-bottom: 29rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-29 {
    padding-bottom: 29rem !important;
    padding-top: 29rem !important;
  }
}

.mt-30 {
  margin-top: 30rem;
}
@media screen and (max-width: 767px) {
  .mt-30 {
    margin-top: calc( 30rem * .7);
  }
}

.mb-30 {
  margin-bottom: 30rem;
}
@media screen and (max-width: 767px) {
  .mb-30 {
    margin-bottom: calc( 30rem * .7);
  }
}

.ml-30 {
  margin-left: 30rem;
}
@media screen and (max-width: 767px) {
  .ml-30 {
    margin-left: calc( 30rem * .7);
  }
}

.mr-30 {
  margin-right: 30rem;
}
@media screen and (max-width: 767px) {
  .mr-30 {
    margin-right: calc( 30rem * .7);
  }
}

.mx-30 {
  margin-left: 30rem;
  margin-right: 30rem;
}
@media screen and (max-width: 767px) {
  .mx-30 {
    margin-left: calc( 30rem * .7);
    margin-right: calc( 30rem * .7);
  }
}

.my-30 {
  margin-top: 30rem;
  margin-bottom: 30rem;
}
@media screen and (max-width: 767px) {
  .my-30 {
    margin-top: calc( 30rem * .7);
    margin-bottom: calc( 30rem * .7);
  }
}

.pt-30 {
  padding-top: 30rem;
}
@media screen and (max-width: 767px) {
  .pt-30 {
    padding-top: calc( 30rem * .7);
  }
}

.pb-30 {
  padding-bottom: 30rem;
}
@media screen and (max-width: 767px) {
  .pb-30 {
    padding-bottom: calc( 30rem * .7);
  }
}

.pl-30 {
  padding-left: 30rem;
}
@media screen and (max-width: 767px) {
  .pl-30 {
    padding-left: calc( 30rem * .7);
  }
}

.pr-30 {
  padding-right: 30rem;
}
@media screen and (max-width: 767px) {
  .pr-30 {
    padding-right: calc( 30rem * .7);
  }
}

.px-30 {
  padding-left: 30rem;
  padding-right: 30rem;
}
@media screen and (max-width: 767px) {
  .px-30 {
    padding-left: calc( 30rem * .7);
    padding-right: calc( 30rem * .7);
  }
}

.py-30 {
  padding-top: 30rem;
  padding-bottom: 30rem;
}
@media screen and (max-width: 767px) {
  .py-30 {
    padding-top: calc( 30rem * .7);
    padding-bottom: calc( 30rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-30 {
    margin-top: 30rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-30 {
    margin-bottom: 30rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-30 {
    margin-bottom: 30rem !important;
    margin-top: 30rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-30 {
    padding-top: 30rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-30 {
    padding-bottom: 30rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-30 {
    padding-bottom: 30rem !important;
    padding-top: 30rem !important;
  }
}

.mt-31 {
  margin-top: 31rem;
}
@media screen and (max-width: 767px) {
  .mt-31 {
    margin-top: calc( 31rem * .7);
  }
}

.mb-31 {
  margin-bottom: 31rem;
}
@media screen and (max-width: 767px) {
  .mb-31 {
    margin-bottom: calc( 31rem * .7);
  }
}

.ml-31 {
  margin-left: 31rem;
}
@media screen and (max-width: 767px) {
  .ml-31 {
    margin-left: calc( 31rem * .7);
  }
}

.mr-31 {
  margin-right: 31rem;
}
@media screen and (max-width: 767px) {
  .mr-31 {
    margin-right: calc( 31rem * .7);
  }
}

.mx-31 {
  margin-left: 31rem;
  margin-right: 31rem;
}
@media screen and (max-width: 767px) {
  .mx-31 {
    margin-left: calc( 31rem * .7);
    margin-right: calc( 31rem * .7);
  }
}

.my-31 {
  margin-top: 31rem;
  margin-bottom: 31rem;
}
@media screen and (max-width: 767px) {
  .my-31 {
    margin-top: calc( 31rem * .7);
    margin-bottom: calc( 31rem * .7);
  }
}

.pt-31 {
  padding-top: 31rem;
}
@media screen and (max-width: 767px) {
  .pt-31 {
    padding-top: calc( 31rem * .7);
  }
}

.pb-31 {
  padding-bottom: 31rem;
}
@media screen and (max-width: 767px) {
  .pb-31 {
    padding-bottom: calc( 31rem * .7);
  }
}

.pl-31 {
  padding-left: 31rem;
}
@media screen and (max-width: 767px) {
  .pl-31 {
    padding-left: calc( 31rem * .7);
  }
}

.pr-31 {
  padding-right: 31rem;
}
@media screen and (max-width: 767px) {
  .pr-31 {
    padding-right: calc( 31rem * .7);
  }
}

.px-31 {
  padding-left: 31rem;
  padding-right: 31rem;
}
@media screen and (max-width: 767px) {
  .px-31 {
    padding-left: calc( 31rem * .7);
    padding-right: calc( 31rem * .7);
  }
}

.py-31 {
  padding-top: 31rem;
  padding-bottom: 31rem;
}
@media screen and (max-width: 767px) {
  .py-31 {
    padding-top: calc( 31rem * .7);
    padding-bottom: calc( 31rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-31 {
    margin-top: 31rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-31 {
    margin-bottom: 31rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-31 {
    margin-bottom: 31rem !important;
    margin-top: 31rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-31 {
    padding-top: 31rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-31 {
    padding-bottom: 31rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-31 {
    padding-bottom: 31rem !important;
    padding-top: 31rem !important;
  }
}

.mt-32 {
  margin-top: 32rem;
}
@media screen and (max-width: 767px) {
  .mt-32 {
    margin-top: calc( 32rem * .7);
  }
}

.mb-32 {
  margin-bottom: 32rem;
}
@media screen and (max-width: 767px) {
  .mb-32 {
    margin-bottom: calc( 32rem * .7);
  }
}

.ml-32 {
  margin-left: 32rem;
}
@media screen and (max-width: 767px) {
  .ml-32 {
    margin-left: calc( 32rem * .7);
  }
}

.mr-32 {
  margin-right: 32rem;
}
@media screen and (max-width: 767px) {
  .mr-32 {
    margin-right: calc( 32rem * .7);
  }
}

.mx-32 {
  margin-left: 32rem;
  margin-right: 32rem;
}
@media screen and (max-width: 767px) {
  .mx-32 {
    margin-left: calc( 32rem * .7);
    margin-right: calc( 32rem * .7);
  }
}

.my-32 {
  margin-top: 32rem;
  margin-bottom: 32rem;
}
@media screen and (max-width: 767px) {
  .my-32 {
    margin-top: calc( 32rem * .7);
    margin-bottom: calc( 32rem * .7);
  }
}

.pt-32 {
  padding-top: 32rem;
}
@media screen and (max-width: 767px) {
  .pt-32 {
    padding-top: calc( 32rem * .7);
  }
}

.pb-32 {
  padding-bottom: 32rem;
}
@media screen and (max-width: 767px) {
  .pb-32 {
    padding-bottom: calc( 32rem * .7);
  }
}

.pl-32 {
  padding-left: 32rem;
}
@media screen and (max-width: 767px) {
  .pl-32 {
    padding-left: calc( 32rem * .7);
  }
}

.pr-32 {
  padding-right: 32rem;
}
@media screen and (max-width: 767px) {
  .pr-32 {
    padding-right: calc( 32rem * .7);
  }
}

.px-32 {
  padding-left: 32rem;
  padding-right: 32rem;
}
@media screen and (max-width: 767px) {
  .px-32 {
    padding-left: calc( 32rem * .7);
    padding-right: calc( 32rem * .7);
  }
}

.py-32 {
  padding-top: 32rem;
  padding-bottom: 32rem;
}
@media screen and (max-width: 767px) {
  .py-32 {
    padding-top: calc( 32rem * .7);
    padding-bottom: calc( 32rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-32 {
    margin-top: 32rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-32 {
    margin-bottom: 32rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-32 {
    margin-bottom: 32rem !important;
    margin-top: 32rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-32 {
    padding-top: 32rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-32 {
    padding-bottom: 32rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-32 {
    padding-bottom: 32rem !important;
    padding-top: 32rem !important;
  }
}

.mt-33 {
  margin-top: 33rem;
}
@media screen and (max-width: 767px) {
  .mt-33 {
    margin-top: calc( 33rem * .7);
  }
}

.mb-33 {
  margin-bottom: 33rem;
}
@media screen and (max-width: 767px) {
  .mb-33 {
    margin-bottom: calc( 33rem * .7);
  }
}

.ml-33 {
  margin-left: 33rem;
}
@media screen and (max-width: 767px) {
  .ml-33 {
    margin-left: calc( 33rem * .7);
  }
}

.mr-33 {
  margin-right: 33rem;
}
@media screen and (max-width: 767px) {
  .mr-33 {
    margin-right: calc( 33rem * .7);
  }
}

.mx-33 {
  margin-left: 33rem;
  margin-right: 33rem;
}
@media screen and (max-width: 767px) {
  .mx-33 {
    margin-left: calc( 33rem * .7);
    margin-right: calc( 33rem * .7);
  }
}

.my-33 {
  margin-top: 33rem;
  margin-bottom: 33rem;
}
@media screen and (max-width: 767px) {
  .my-33 {
    margin-top: calc( 33rem * .7);
    margin-bottom: calc( 33rem * .7);
  }
}

.pt-33 {
  padding-top: 33rem;
}
@media screen and (max-width: 767px) {
  .pt-33 {
    padding-top: calc( 33rem * .7);
  }
}

.pb-33 {
  padding-bottom: 33rem;
}
@media screen and (max-width: 767px) {
  .pb-33 {
    padding-bottom: calc( 33rem * .7);
  }
}

.pl-33 {
  padding-left: 33rem;
}
@media screen and (max-width: 767px) {
  .pl-33 {
    padding-left: calc( 33rem * .7);
  }
}

.pr-33 {
  padding-right: 33rem;
}
@media screen and (max-width: 767px) {
  .pr-33 {
    padding-right: calc( 33rem * .7);
  }
}

.px-33 {
  padding-left: 33rem;
  padding-right: 33rem;
}
@media screen and (max-width: 767px) {
  .px-33 {
    padding-left: calc( 33rem * .7);
    padding-right: calc( 33rem * .7);
  }
}

.py-33 {
  padding-top: 33rem;
  padding-bottom: 33rem;
}
@media screen and (max-width: 767px) {
  .py-33 {
    padding-top: calc( 33rem * .7);
    padding-bottom: calc( 33rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-33 {
    margin-top: 33rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-33 {
    margin-bottom: 33rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-33 {
    margin-bottom: 33rem !important;
    margin-top: 33rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-33 {
    padding-top: 33rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-33 {
    padding-bottom: 33rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-33 {
    padding-bottom: 33rem !important;
    padding-top: 33rem !important;
  }
}

.mt-34 {
  margin-top: 34rem;
}
@media screen and (max-width: 767px) {
  .mt-34 {
    margin-top: calc( 34rem * .7);
  }
}

.mb-34 {
  margin-bottom: 34rem;
}
@media screen and (max-width: 767px) {
  .mb-34 {
    margin-bottom: calc( 34rem * .7);
  }
}

.ml-34 {
  margin-left: 34rem;
}
@media screen and (max-width: 767px) {
  .ml-34 {
    margin-left: calc( 34rem * .7);
  }
}

.mr-34 {
  margin-right: 34rem;
}
@media screen and (max-width: 767px) {
  .mr-34 {
    margin-right: calc( 34rem * .7);
  }
}

.mx-34 {
  margin-left: 34rem;
  margin-right: 34rem;
}
@media screen and (max-width: 767px) {
  .mx-34 {
    margin-left: calc( 34rem * .7);
    margin-right: calc( 34rem * .7);
  }
}

.my-34 {
  margin-top: 34rem;
  margin-bottom: 34rem;
}
@media screen and (max-width: 767px) {
  .my-34 {
    margin-top: calc( 34rem * .7);
    margin-bottom: calc( 34rem * .7);
  }
}

.pt-34 {
  padding-top: 34rem;
}
@media screen and (max-width: 767px) {
  .pt-34 {
    padding-top: calc( 34rem * .7);
  }
}

.pb-34 {
  padding-bottom: 34rem;
}
@media screen and (max-width: 767px) {
  .pb-34 {
    padding-bottom: calc( 34rem * .7);
  }
}

.pl-34 {
  padding-left: 34rem;
}
@media screen and (max-width: 767px) {
  .pl-34 {
    padding-left: calc( 34rem * .7);
  }
}

.pr-34 {
  padding-right: 34rem;
}
@media screen and (max-width: 767px) {
  .pr-34 {
    padding-right: calc( 34rem * .7);
  }
}

.px-34 {
  padding-left: 34rem;
  padding-right: 34rem;
}
@media screen and (max-width: 767px) {
  .px-34 {
    padding-left: calc( 34rem * .7);
    padding-right: calc( 34rem * .7);
  }
}

.py-34 {
  padding-top: 34rem;
  padding-bottom: 34rem;
}
@media screen and (max-width: 767px) {
  .py-34 {
    padding-top: calc( 34rem * .7);
    padding-bottom: calc( 34rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-34 {
    margin-top: 34rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-34 {
    margin-bottom: 34rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-34 {
    margin-bottom: 34rem !important;
    margin-top: 34rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-34 {
    padding-top: 34rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-34 {
    padding-bottom: 34rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-34 {
    padding-bottom: 34rem !important;
    padding-top: 34rem !important;
  }
}

.mt-35 {
  margin-top: 35rem;
}
@media screen and (max-width: 767px) {
  .mt-35 {
    margin-top: calc( 35rem * .7);
  }
}

.mb-35 {
  margin-bottom: 35rem;
}
@media screen and (max-width: 767px) {
  .mb-35 {
    margin-bottom: calc( 35rem * .7);
  }
}

.ml-35 {
  margin-left: 35rem;
}
@media screen and (max-width: 767px) {
  .ml-35 {
    margin-left: calc( 35rem * .7);
  }
}

.mr-35 {
  margin-right: 35rem;
}
@media screen and (max-width: 767px) {
  .mr-35 {
    margin-right: calc( 35rem * .7);
  }
}

.mx-35 {
  margin-left: 35rem;
  margin-right: 35rem;
}
@media screen and (max-width: 767px) {
  .mx-35 {
    margin-left: calc( 35rem * .7);
    margin-right: calc( 35rem * .7);
  }
}

.my-35 {
  margin-top: 35rem;
  margin-bottom: 35rem;
}
@media screen and (max-width: 767px) {
  .my-35 {
    margin-top: calc( 35rem * .7);
    margin-bottom: calc( 35rem * .7);
  }
}

.pt-35 {
  padding-top: 35rem;
}
@media screen and (max-width: 767px) {
  .pt-35 {
    padding-top: calc( 35rem * .7);
  }
}

.pb-35 {
  padding-bottom: 35rem;
}
@media screen and (max-width: 767px) {
  .pb-35 {
    padding-bottom: calc( 35rem * .7);
  }
}

.pl-35 {
  padding-left: 35rem;
}
@media screen and (max-width: 767px) {
  .pl-35 {
    padding-left: calc( 35rem * .7);
  }
}

.pr-35 {
  padding-right: 35rem;
}
@media screen and (max-width: 767px) {
  .pr-35 {
    padding-right: calc( 35rem * .7);
  }
}

.px-35 {
  padding-left: 35rem;
  padding-right: 35rem;
}
@media screen and (max-width: 767px) {
  .px-35 {
    padding-left: calc( 35rem * .7);
    padding-right: calc( 35rem * .7);
  }
}

.py-35 {
  padding-top: 35rem;
  padding-bottom: 35rem;
}
@media screen and (max-width: 767px) {
  .py-35 {
    padding-top: calc( 35rem * .7);
    padding-bottom: calc( 35rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-35 {
    margin-top: 35rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-35 {
    margin-bottom: 35rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-35 {
    margin-bottom: 35rem !important;
    margin-top: 35rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-35 {
    padding-top: 35rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-35 {
    padding-bottom: 35rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-35 {
    padding-bottom: 35rem !important;
    padding-top: 35rem !important;
  }
}

.mt-36 {
  margin-top: 36rem;
}
@media screen and (max-width: 767px) {
  .mt-36 {
    margin-top: calc( 36rem * .7);
  }
}

.mb-36 {
  margin-bottom: 36rem;
}
@media screen and (max-width: 767px) {
  .mb-36 {
    margin-bottom: calc( 36rem * .7);
  }
}

.ml-36 {
  margin-left: 36rem;
}
@media screen and (max-width: 767px) {
  .ml-36 {
    margin-left: calc( 36rem * .7);
  }
}

.mr-36 {
  margin-right: 36rem;
}
@media screen and (max-width: 767px) {
  .mr-36 {
    margin-right: calc( 36rem * .7);
  }
}

.mx-36 {
  margin-left: 36rem;
  margin-right: 36rem;
}
@media screen and (max-width: 767px) {
  .mx-36 {
    margin-left: calc( 36rem * .7);
    margin-right: calc( 36rem * .7);
  }
}

.my-36 {
  margin-top: 36rem;
  margin-bottom: 36rem;
}
@media screen and (max-width: 767px) {
  .my-36 {
    margin-top: calc( 36rem * .7);
    margin-bottom: calc( 36rem * .7);
  }
}

.pt-36 {
  padding-top: 36rem;
}
@media screen and (max-width: 767px) {
  .pt-36 {
    padding-top: calc( 36rem * .7);
  }
}

.pb-36 {
  padding-bottom: 36rem;
}
@media screen and (max-width: 767px) {
  .pb-36 {
    padding-bottom: calc( 36rem * .7);
  }
}

.pl-36 {
  padding-left: 36rem;
}
@media screen and (max-width: 767px) {
  .pl-36 {
    padding-left: calc( 36rem * .7);
  }
}

.pr-36 {
  padding-right: 36rem;
}
@media screen and (max-width: 767px) {
  .pr-36 {
    padding-right: calc( 36rem * .7);
  }
}

.px-36 {
  padding-left: 36rem;
  padding-right: 36rem;
}
@media screen and (max-width: 767px) {
  .px-36 {
    padding-left: calc( 36rem * .7);
    padding-right: calc( 36rem * .7);
  }
}

.py-36 {
  padding-top: 36rem;
  padding-bottom: 36rem;
}
@media screen and (max-width: 767px) {
  .py-36 {
    padding-top: calc( 36rem * .7);
    padding-bottom: calc( 36rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-36 {
    margin-top: 36rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-36 {
    margin-bottom: 36rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-36 {
    margin-bottom: 36rem !important;
    margin-top: 36rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-36 {
    padding-top: 36rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-36 {
    padding-bottom: 36rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-36 {
    padding-bottom: 36rem !important;
    padding-top: 36rem !important;
  }
}

.mt-37 {
  margin-top: 37rem;
}
@media screen and (max-width: 767px) {
  .mt-37 {
    margin-top: calc( 37rem * .7);
  }
}

.mb-37 {
  margin-bottom: 37rem;
}
@media screen and (max-width: 767px) {
  .mb-37 {
    margin-bottom: calc( 37rem * .7);
  }
}

.ml-37 {
  margin-left: 37rem;
}
@media screen and (max-width: 767px) {
  .ml-37 {
    margin-left: calc( 37rem * .7);
  }
}

.mr-37 {
  margin-right: 37rem;
}
@media screen and (max-width: 767px) {
  .mr-37 {
    margin-right: calc( 37rem * .7);
  }
}

.mx-37 {
  margin-left: 37rem;
  margin-right: 37rem;
}
@media screen and (max-width: 767px) {
  .mx-37 {
    margin-left: calc( 37rem * .7);
    margin-right: calc( 37rem * .7);
  }
}

.my-37 {
  margin-top: 37rem;
  margin-bottom: 37rem;
}
@media screen and (max-width: 767px) {
  .my-37 {
    margin-top: calc( 37rem * .7);
    margin-bottom: calc( 37rem * .7);
  }
}

.pt-37 {
  padding-top: 37rem;
}
@media screen and (max-width: 767px) {
  .pt-37 {
    padding-top: calc( 37rem * .7);
  }
}

.pb-37 {
  padding-bottom: 37rem;
}
@media screen and (max-width: 767px) {
  .pb-37 {
    padding-bottom: calc( 37rem * .7);
  }
}

.pl-37 {
  padding-left: 37rem;
}
@media screen and (max-width: 767px) {
  .pl-37 {
    padding-left: calc( 37rem * .7);
  }
}

.pr-37 {
  padding-right: 37rem;
}
@media screen and (max-width: 767px) {
  .pr-37 {
    padding-right: calc( 37rem * .7);
  }
}

.px-37 {
  padding-left: 37rem;
  padding-right: 37rem;
}
@media screen and (max-width: 767px) {
  .px-37 {
    padding-left: calc( 37rem * .7);
    padding-right: calc( 37rem * .7);
  }
}

.py-37 {
  padding-top: 37rem;
  padding-bottom: 37rem;
}
@media screen and (max-width: 767px) {
  .py-37 {
    padding-top: calc( 37rem * .7);
    padding-bottom: calc( 37rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-37 {
    margin-top: 37rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-37 {
    margin-bottom: 37rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-37 {
    margin-bottom: 37rem !important;
    margin-top: 37rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-37 {
    padding-top: 37rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-37 {
    padding-bottom: 37rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-37 {
    padding-bottom: 37rem !important;
    padding-top: 37rem !important;
  }
}

.mt-38 {
  margin-top: 38rem;
}
@media screen and (max-width: 767px) {
  .mt-38 {
    margin-top: calc( 38rem * .7);
  }
}

.mb-38 {
  margin-bottom: 38rem;
}
@media screen and (max-width: 767px) {
  .mb-38 {
    margin-bottom: calc( 38rem * .7);
  }
}

.ml-38 {
  margin-left: 38rem;
}
@media screen and (max-width: 767px) {
  .ml-38 {
    margin-left: calc( 38rem * .7);
  }
}

.mr-38 {
  margin-right: 38rem;
}
@media screen and (max-width: 767px) {
  .mr-38 {
    margin-right: calc( 38rem * .7);
  }
}

.mx-38 {
  margin-left: 38rem;
  margin-right: 38rem;
}
@media screen and (max-width: 767px) {
  .mx-38 {
    margin-left: calc( 38rem * .7);
    margin-right: calc( 38rem * .7);
  }
}

.my-38 {
  margin-top: 38rem;
  margin-bottom: 38rem;
}
@media screen and (max-width: 767px) {
  .my-38 {
    margin-top: calc( 38rem * .7);
    margin-bottom: calc( 38rem * .7);
  }
}

.pt-38 {
  padding-top: 38rem;
}
@media screen and (max-width: 767px) {
  .pt-38 {
    padding-top: calc( 38rem * .7);
  }
}

.pb-38 {
  padding-bottom: 38rem;
}
@media screen and (max-width: 767px) {
  .pb-38 {
    padding-bottom: calc( 38rem * .7);
  }
}

.pl-38 {
  padding-left: 38rem;
}
@media screen and (max-width: 767px) {
  .pl-38 {
    padding-left: calc( 38rem * .7);
  }
}

.pr-38 {
  padding-right: 38rem;
}
@media screen and (max-width: 767px) {
  .pr-38 {
    padding-right: calc( 38rem * .7);
  }
}

.px-38 {
  padding-left: 38rem;
  padding-right: 38rem;
}
@media screen and (max-width: 767px) {
  .px-38 {
    padding-left: calc( 38rem * .7);
    padding-right: calc( 38rem * .7);
  }
}

.py-38 {
  padding-top: 38rem;
  padding-bottom: 38rem;
}
@media screen and (max-width: 767px) {
  .py-38 {
    padding-top: calc( 38rem * .7);
    padding-bottom: calc( 38rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-38 {
    margin-top: 38rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-38 {
    margin-bottom: 38rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-38 {
    margin-bottom: 38rem !important;
    margin-top: 38rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-38 {
    padding-top: 38rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-38 {
    padding-bottom: 38rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-38 {
    padding-bottom: 38rem !important;
    padding-top: 38rem !important;
  }
}

.mt-39 {
  margin-top: 39rem;
}
@media screen and (max-width: 767px) {
  .mt-39 {
    margin-top: calc( 39rem * .7);
  }
}

.mb-39 {
  margin-bottom: 39rem;
}
@media screen and (max-width: 767px) {
  .mb-39 {
    margin-bottom: calc( 39rem * .7);
  }
}

.ml-39 {
  margin-left: 39rem;
}
@media screen and (max-width: 767px) {
  .ml-39 {
    margin-left: calc( 39rem * .7);
  }
}

.mr-39 {
  margin-right: 39rem;
}
@media screen and (max-width: 767px) {
  .mr-39 {
    margin-right: calc( 39rem * .7);
  }
}

.mx-39 {
  margin-left: 39rem;
  margin-right: 39rem;
}
@media screen and (max-width: 767px) {
  .mx-39 {
    margin-left: calc( 39rem * .7);
    margin-right: calc( 39rem * .7);
  }
}

.my-39 {
  margin-top: 39rem;
  margin-bottom: 39rem;
}
@media screen and (max-width: 767px) {
  .my-39 {
    margin-top: calc( 39rem * .7);
    margin-bottom: calc( 39rem * .7);
  }
}

.pt-39 {
  padding-top: 39rem;
}
@media screen and (max-width: 767px) {
  .pt-39 {
    padding-top: calc( 39rem * .7);
  }
}

.pb-39 {
  padding-bottom: 39rem;
}
@media screen and (max-width: 767px) {
  .pb-39 {
    padding-bottom: calc( 39rem * .7);
  }
}

.pl-39 {
  padding-left: 39rem;
}
@media screen and (max-width: 767px) {
  .pl-39 {
    padding-left: calc( 39rem * .7);
  }
}

.pr-39 {
  padding-right: 39rem;
}
@media screen and (max-width: 767px) {
  .pr-39 {
    padding-right: calc( 39rem * .7);
  }
}

.px-39 {
  padding-left: 39rem;
  padding-right: 39rem;
}
@media screen and (max-width: 767px) {
  .px-39 {
    padding-left: calc( 39rem * .7);
    padding-right: calc( 39rem * .7);
  }
}

.py-39 {
  padding-top: 39rem;
  padding-bottom: 39rem;
}
@media screen and (max-width: 767px) {
  .py-39 {
    padding-top: calc( 39rem * .7);
    padding-bottom: calc( 39rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-39 {
    margin-top: 39rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-39 {
    margin-bottom: 39rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-39 {
    margin-bottom: 39rem !important;
    margin-top: 39rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-39 {
    padding-top: 39rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-39 {
    padding-bottom: 39rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-39 {
    padding-bottom: 39rem !important;
    padding-top: 39rem !important;
  }
}

.mt-40 {
  margin-top: 40rem;
}
@media screen and (max-width: 767px) {
  .mt-40 {
    margin-top: calc( 40rem * .7);
  }
}

.mb-40 {
  margin-bottom: 40rem;
}
@media screen and (max-width: 767px) {
  .mb-40 {
    margin-bottom: calc( 40rem * .7);
  }
}

.ml-40 {
  margin-left: 40rem;
}
@media screen and (max-width: 767px) {
  .ml-40 {
    margin-left: calc( 40rem * .7);
  }
}

.mr-40 {
  margin-right: 40rem;
}
@media screen and (max-width: 767px) {
  .mr-40 {
    margin-right: calc( 40rem * .7);
  }
}

.mx-40 {
  margin-left: 40rem;
  margin-right: 40rem;
}
@media screen and (max-width: 767px) {
  .mx-40 {
    margin-left: calc( 40rem * .7);
    margin-right: calc( 40rem * .7);
  }
}

.my-40 {
  margin-top: 40rem;
  margin-bottom: 40rem;
}
@media screen and (max-width: 767px) {
  .my-40 {
    margin-top: calc( 40rem * .7);
    margin-bottom: calc( 40rem * .7);
  }
}

.pt-40 {
  padding-top: 40rem;
}
@media screen and (max-width: 767px) {
  .pt-40 {
    padding-top: calc( 40rem * .7);
  }
}

.pb-40 {
  padding-bottom: 40rem;
}
@media screen and (max-width: 767px) {
  .pb-40 {
    padding-bottom: calc( 40rem * .7);
  }
}

.pl-40 {
  padding-left: 40rem;
}
@media screen and (max-width: 767px) {
  .pl-40 {
    padding-left: calc( 40rem * .7);
  }
}

.pr-40 {
  padding-right: 40rem;
}
@media screen and (max-width: 767px) {
  .pr-40 {
    padding-right: calc( 40rem * .7);
  }
}

.px-40 {
  padding-left: 40rem;
  padding-right: 40rem;
}
@media screen and (max-width: 767px) {
  .px-40 {
    padding-left: calc( 40rem * .7);
    padding-right: calc( 40rem * .7);
  }
}

.py-40 {
  padding-top: 40rem;
  padding-bottom: 40rem;
}
@media screen and (max-width: 767px) {
  .py-40 {
    padding-top: calc( 40rem * .7);
    padding-bottom: calc( 40rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-40 {
    margin-top: 40rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-40 {
    margin-bottom: 40rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-40 {
    margin-bottom: 40rem !important;
    margin-top: 40rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-40 {
    padding-top: 40rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-40 {
    padding-bottom: 40rem !important;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-40 {
    padding-bottom: 40rem !important;
    padding-top: 40rem !important;
  }
}

/************/
* {
  margin: 0px;
  padding: 0px;
  border: 0px;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  vertical-align: baseline;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
  background-image: linear-gradient(to right, #a8caba 0%, #5d4157 100%);
  background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);
  background: #faf5e9;
  letter-spacing: 0.05em;
}

/* 520px以上 共通項目 */
.lead {
  font-size: 1rem;
  line-height: 2em;
}
@media screen and (max-width: 767px) {
  .lead {
    font-size: 0.9rem;
  }
}

#main {
  position: relative;
}
#main .to-staylist {
  position: absolute;
  width: 135px;
  max-width: 16%;
  height: 15px;
  right: 5%;
  top: -2%;
  z-index: 85;
}

.toReserve {
  position: fixed;
  right: 5%;
  bottom: 8%;
  z-index: 10000;
  display: block;
  background: #fff;
  color: #a98220;
  font-size: 0.9rem;
  border-radius: 10px;
  padding: 0.8em 2rem;
  text-decoration: none;
}
.toReserve i {
  padding-left: 1rem;
}
@media screen and (max-width: 767px) {
  .toReserve {
    top: 8%;
    bottom: auto;
    position: absolute;
  }
}

.toReserveSp {
  position: fixed;
  right: 5%;
  bottom: 8%;
  z-index: 10000;
  opacity: 0;
  display: block;
  background: #fff;
  color: #a98220;
  font-size: 0.9rem;
  border-radius: 10px;
  padding: 0.8em 2rem;
  text-decoration: none;
  visibility: hidden;
  transition: all 0.5s;
}
.toReserveSp i {
  padding-left: 1rem;
}
body.scrolled .toReserveSp {
  opacity: 1;
  visibility: visible;
}

#header {
  position: relative;
  text-align: center;
  min-height: 600px;
  height: 100vh;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #header {
    min-height: auto;
    height: 90vh;
  }
}
#header .mv-img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
#header .mv-img > div {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#header .mv {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
#header .mv .swiper {
  width: 100%;
  height: 100%;
}
#header .mv .swiper .swiper-wrapper {
  width: 100%;
  height: 100%;
}
#header .mv .swiper .swiper-wrapper .slide-block {
  width: 100%;
  height: 100%;
}
#header .mv .swiper .swiper-wrapper .slide-block > div {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#header .mv-text {
  position: absolute;
  left: 5%;
  bottom: 10%;
  z-index: 5;
  text-align: left;
}
#header .mv-text p {
  font-size: 2rem;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.1em;
}
#header .mv-text p span:nth-of-type(2) {
  font-size: 0.5em;
}
#header .headerWrapper {
  /*
  ul{
    li{
      list-style-type: none;
      &.button{
        position: absolute;
        top:2rem;
        right:2rem;
        width:auto;
        a{
          display: block;
          background-color: $color-key;
          color: #FFF;
          font-size: .8rem;
          border-radius: 10rem;
          padding:.8em 2rem;
          text-decoration: none;
          box-shadow: 0 0 34px rgba(0,0,0,0.2);
          i{
            padding-left:1rem;
          }
        }
      }
    }
  }*/
}
#header .headerWrapper .only-sp {
  display: none;
}
#header .headerWrapper .logo {
  width: 50%;
  max-width: 100px;
  position: absolute;
  left: 5%;
  top: 5%;
}
@media screen and (max-width: 767px) {
  #header .headerWrapper .logo {
    width: 50%;
  }
}
#header .navbar-links {
  display: none;
}

.image-photo {
  height: 480px;
  background-image: url(../../images/step-back-top.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.block.message {
  position: relative;
  padding: 8rem 0;
}
@media screen and (max-width: 767px) {
  .block.message {
    padding: 4rem 0;
  }
}
.block.message::before {
  content: "";
  display: block;
  background: url(../img/sauna-ill.png) no-repeat center center/contain;
  opacity: 0.2;
  width: 90%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .block.message::before {
    background: url(../img/sauna-ill.png) no-repeat center center/200%;
  }
}
.block.message .wrapper {
  position: relative;
  text-align: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  z-index: 50;
  z-index: 55;
}
.block.message .wrapper .headline .impact {
  position: relative;
  display: inline-block;
  margin-bottom: 25px;
}
.block.message .wrapper .headline .impact span {
  color: #216ab7;
  font-size: 1.5rem;
  font-weight: bold;
  padding-right: 2px;
}
.block.message .wrapper .headline .impact::before {
  display: inline-block;
  background-image: url(../../images/impact-before.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 15px;
  height: 35px;
  position: absolute;
  top: 50%;
  left: -2rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 50;
}
.block.message .wrapper .headline .impact::after {
  display: inline-block;
  background-image: url(../../images/impact-after.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  width: 15px;
  height: 35px;
  position: absolute;
  top: 50%;
  right: -2rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 50;
}
.block.message .wrapper .headline .title {
  margin-bottom: 35px;
  line-height: 1.6em;
  font-size: 2.2rem;
  font-weight: normal;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  .block.message .wrapper .headline .title {
    font-size: 2rem;
  }
}
.block.message .wrapper .headline .text {
  font-size: 1rem;
  line-height: 2em;
}
.block.message .wrapper .button {
  position: relative;
}
.block.message .wrapper .button.stay-list {
  display: inline-block;
  background-color: #a14c8e;
  border-radius: 100vh;
}
.block.message .wrapper .button.stay-list i {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.block.message .wrapper .button.stay-list a {
  display: block;
  color: #FFF;
  padding: 10px 85px;
  text-decoration: none;
}
.block.recommend {
  position: relative;
}
.block.recommend .wrapper {
  position: relative;
  text-align: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  z-index: 50;
}
.block.recommend .wrapper .headline .text {
  text-align: center;
  padding: 10px 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 1.4rem;
  margin-bottom: 35px;
  font-weight: bold;
}
.block.recommend .wrapper .box-wrap {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
.block.recommend .wrapper .box-wrap .box {
  margin-bottom: 75px;
  background: rgba(255, 255, 255, 0.7);
}
.block.recommend .wrapper .box-wrap .box .inner {
  position: relative;
  text-align: left;
  line-height: 2em;
  padding: 4rem 2rem;
  background-size: 100%;
  z-index: 10;
}
.block.recommend .wrapper .box-wrap .box .inner .title {
  /*text-decoration: underline;

  text-decoration-thickness: 0.5em; 
  text-decoration-color: rgba(255, 255, 76, 0.7); 
  text-underline-offset: -0.2em; 
  text-decoration-skip-ink: none; 
  */
  margin-bottom: 15px;
  font-size: 1.4rem;
  font-weight: bold;
}
.block.recommend .wrapper .box-wrap .box .inner .text {
  text-align: left;
  font-size: 0.8rem;
  line-height: 2em;
}
.block.recommend .wrapper .box-wrap .box .inner .text span {
  color: #216ab7;
  font-weight: bold;
}
.block.recommend .wrapper .box-wrap .box .inner.one::before {
  display: block;
  background-image: url(../../images/recommend-title-top-001.png);
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  height: 75px;
  position: absolute;
  left: 0px;
  top: -35px;
  z-index: 15;
}
.block.recommend .wrapper .box-wrap .box .inner.one .step-list::before {
  display: block;
  background-image: url(../../images/step-illust-001.png);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  width: 100%;
  height: 195px;
  position: absolute;
  top: 50%;
  right: -190px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 45;
}
.block.recommend .wrapper .box-wrap .box .inner.two::before {
  display: block;
  background-image: url(../../images/recommend-title-top-002.png);
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  height: 55px;
  position: absolute;
  left: 0px;
  top: -35px;
  z-index: 15;
}
.block.recommend .wrapper .box-wrap .box .inner.two .step-list::before {
  display: block;
  background-image: url(../../images/step-illust-002.png);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  width: 100%;
  height: 170px;
  position: absolute;
  top: 50%;
  right: -190px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 45;
}
.block.recommend .wrapper .box-wrap .box .inner.three::before {
  display: block;
  background-image: url(../../images/recommend-title-top-003.png);
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  height: 55px;
  position: absolute;
  left: 0px;
  top: -35px;
  z-index: 15;
}
.block.recommend .wrapper .box-wrap .box .inner.three .step-list::before {
  display: block;
  background-image: url(../../images/step-illust-003.png);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  width: 100%;
  height: 170px;
  position: absolute;
  top: 50%;
  right: -190px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 45;
}
.block.recommend .wrapper .box-wrap .box .inner::after {
  display: block;
  background-image: url(../../images/recommend-title-bottom.png);
  background-size: 100%;
  background-position: bottom;
  background-repeat: no-repeat;
  width: 100%;
  height: 55px;
  position: absolute;
  left: 0px;
  bottom: -35px;
  z-index: 15;
}
.block.recommend .wrapper .button {
  position: relative;
}
.block.recommend .wrapper .button.stay-list {
  display: inline-block;
  background-color: #a14c8e;
  border-radius: 100vh;
}
.block.recommend .wrapper .button.stay-list i {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.block.recommend .wrapper .button.stay-list a {
  display: block;
  color: #FFF;
  padding: 10px 85px;
  text-decoration: none;
}
.block.recommend::before {
  display: block;
  background-image: url(../../images/recomment-back-top.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  width: 100%;
  height: 650px;
  position: absolute;
  left: 0px;
  top: -130px;
  z-index: 45;
}
.block.recommend::after {
  display: block;
  background-image: url(../../images/step-illust-bottom-001.png);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  width: 21%;
  height: 115px;
  position: absolute;
  left: 15%;
  bottom: -85px;
  z-index: 25;
}
.block.step {
  position: relative;
  background-color: #e6f4fe;
}
.block.step .wrapper {
  position: relative;
  text-align: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 35px;
  padding-bottom: 185px;
  z-index: 50;
}
.block.step .wrapper .headline .title {
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 55px;
  font-size: 1.4rem;
}
.block.step .wrapper .headline .type {
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgba(255, 255, 76, 0.7);
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
  margin-bottom: 65px;
  font-size: 1.4rem;
  font-weight: bold;
}
.block.step .wrapper .step-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 55px;
}
.block.step .wrapper .step-wrap .box {
  position: relative;
  flex-basis: calc(50% - 0px);
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.block.step .wrapper .step-wrap .box .inner {
  position: relative;
  text-align: left;
  line-height: 2em;
  /*background-image: url(../../images/step-title-middle-001.png);
  background-position: center;
  background-repeat: repeat-y;*/
  padding: 55px 40% 55px 5%;
  background-size: 100%;
  z-index: 10;
}
.block.step .wrapper .step-wrap .box .inner.one::before {
  display: block;
  background-image: url(../../images/step-title-top-001.png);
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  height: 35px;
  position: absolute;
  left: 0px;
  top: -25px;
}
.block.step .wrapper .step-wrap .box .inner.one .step-list {
  position: relative;
  z-index: 30;
}
.block.step .wrapper .step-wrap .box .inner.one .step-list span {
  color: #216ab7;
  font-weight: bold;
}
.block.step .wrapper .step-wrap .box .inner.one .step-list::before {
  display: block;
  background-image: url(../../images/step-illust-004.png);
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  height: 185px;
  position: absolute;
  top: 50%;
  right: -190px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 45;
}
.block.step .wrapper .step-wrap .box .inner.two::before {
  display: block;
  background-image: url(../../images/step-title-top-002.png);
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  height: 35px;
  position: absolute;
  left: 0px;
  top: -25px;
}
.block.step .wrapper .step-wrap .box .inner.two .step-list {
  position: relative;
  z-index: 30;
}
.block.step .wrapper .step-wrap .box .inner.two .step-list span {
  color: #216ab7;
  font-weight: bold;
}
.block.step .wrapper .step-wrap .box .inner.two .step-list::before {
  display: block;
  background-image: url(../../images/step-illust-005.png);
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  height: 185px;
  position: absolute;
  top: 50%;
  right: -190px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 45;
}
.block.step .wrapper .step-wrap .box .inner::after {
  display: block;
  background-image: url(../../images/step-title-bottom-001.png);
  background-size: 100%;
  background-position: bottom;
  background-repeat: no-repeat;
  width: 100%;
  height: 35px;
  position: absolute;
  left: 0px;
  bottom: -25px;
}
.block.step .wrapper .step-wrap .box .inner .step-list span {
  color: #216ab7;
  font-weight: bold;
}
.block.step .wrapper .step-wrap::after {
  display: block;
  background-image: url(../../images/step-arrow.png);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 15px;
  height: 25px;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 10;
}
.block.step .wrapper .button {
  position: relative;
}
.block.step .wrapper .button.stay-list {
  display: inline-block;
  background-color: #a14c8e;
  border-radius: 100vh;
}
.block.step .wrapper .button.stay-list i {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.block.step .wrapper .button.stay-list a {
  display: block;
  color: #FFF;
  padding: 10px 85px;
  text-decoration: none;
}
.block.step::before {
  display: block;
  background-image: url(../../images/step-back-illust-001.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  width: 100%;
  height: 850px;
  position: absolute;
  left: 0px;
  top: -80px;
  z-index: 0;
}
.block.step::after {
  display: block;
  background-image: url(../../images/step-back-bottom.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  width: 100%;
  height: 200px;
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  z-index: 0;
}
.block.about {
  position: relative;
  padding-bottom: 10px;
}
.block.about .wrapper {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  z-index: 50;
}
.block.about .wrapper .headline {
  text-align: center;
}
.block.about .wrapper .headline .type {
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgba(255, 255, 76, 0.7);
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
  margin-bottom: 35px;
  font-size: 1.6rem;
  font-weight: bold;
}
.block.about .wrapper .headline .text {
  margin-bottom: 55px;
  width: 45%;
  margin-left: auto;
  margin-right: auto;
  line-height: 2em;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .block.about .wrapper .headline .text {
    width: 90%;
  }
}
.block.about .wrapper .box-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 3%;
  width: 90%;
  margin: 0 auto;
  /*display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;*/
  margin-bottom: 55px;
}
@media screen and (max-width: 767px) {
  .block.about .wrapper .box-wrap {
    grid-template-columns: 1fr;
  }
}
.block.about .wrapper .box-wrap .box {
  box-sizing: border-box;
}
.block.about .wrapper .box-wrap .box:nth-of-type(even) {
  margin-top: 2rem;
}
.block.about .wrapper .box-wrap .box .inner {
  overflow: hidden;
  text-align: center;
}
.block.about .wrapper .box-wrap .box .inner figure img {
  aspect-ratio: 0.8;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .block.about .wrapper .box-wrap .box .inner figure img {
    aspect-ratio: 1.4;
  }
}
.block.about .wrapper .box-wrap .box .inner .title {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 10px;
  /* 蛍光ペン風 */
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  margin-bottom: 1.2em;
  font-size: 1.4rem;
  /*
  text-decoration: underline;
  text-decoration-thickness: 0.5em; 
  text-decoration-color: rgba(255, 255, 76, 0.7); 
  text-underline-offset: -0.2em; 
  text-decoration-skip-ink: none; 
  */
}
.block.about .wrapper .box-wrap .box .inner .text {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-size: 1rem;
  height: auto;
  line-height: 1.6;
}
.block.stay-list {
  position: relative;
}
.block.stay-list .wrapper {
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  z-index: 50;
  width: 90%;
}
.block.stay-list .wrapper .box-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
  /*
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 55px;*/
}
@media screen and (max-width: 767px) {
  .block.stay-list .wrapper .box-wrap {
    grid-template-columns: 1fr;
  }
}
.block.stay-list .wrapper .box-wrap .box {
  box-sizing: border-box;
}
.block.stay-list .wrapper .box-wrap .box.cvShirarahama .logo img {
  width: 50%;
}
.block.stay-list .wrapper .box-wrap .box.cvShirahama .logo img {
  width: 50%;
}
.block.stay-list .wrapper .box-wrap .box.ce1 .logo img {
  width: 60%;
}
.block.stay-list .wrapper .box-wrap .box.ce2 .logo img {
  width: 60%;
}
.block.stay-list .wrapper .box-wrap .box.bessou .logo img {
  width: 60%;
}
.block.stay-list .wrapper .box-wrap .box.akariya .logo img {
  width: 45%;
}
.block.stay-list .wrapper .box-wrap .box .box-info {
  padding: 1rem 1rem 1.5rem;
}
.block.stay-list .wrapper .box-wrap .box .thumb img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 0.9;
}
.block.stay-list .wrapper .box-wrap .box .inner {
  background-color: #FFF;
  height: 100%;
  box-shadow: 0 0 34px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
}
.block.stay-list .wrapper .box-wrap .box .inner .title {
  font-size: 0.7rem;
  font-weight: normal;
  margin: 0.5em 0 1.6em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-weight: bold;
}
.block.stay-list .wrapper .box-wrap .box .inner .text {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  overflow: hidden;
  font-size: 0.9rem;
  margin-bottom: 2em;
  text-align: justify;
}
.block.stay-list .wrapper .box-wrap .box .inner .campaign {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #faeff3;
  color: #e46393;
  font-weight: bold;
  font-size: 0.9rem;
}
.block.stay-list .wrapper .box-wrap .box .inner .campaign-sub {
  margin-top: 0.5em;
  display: inline-block;
  font-size: 0.8em;
  padding: 0.3em 0.5em;
  background: #fff;
}
.block.stay-list .wrapper .box-wrap .box .inner .button {
  position: relative;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.block.stay-list .wrapper .box-wrap .box .inner .button.reserve {
  background-color: #a14c8e;
  border-radius: 100vh;
}
.block.stay-list .wrapper .box-wrap .box .inner .button.reserve i {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.block.stay-list .wrapper .box-wrap .box .inner .button.reserve a {
  display: block;
  color: #FFF;
  padding: 5px 0;
  text-decoration: none;
}
.block.stay-list .wrapper .attention {
  margin-top: 5rem;
}
.block.stay-list .wrapper .attention ul {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.block.stay-list .wrapper .attention ul li {
  list-style-type: none;
  line-height: 1.5em;
  font-size: 0.9rem;
  text-align: left;
  white-space: wrap;
}

/* 520px以上 共通項目 */
/*  
@include mq(){

#outline{
  width:100%;
  overflow-x: hidden;
}
  #main{
    position: relative;
    .to-staylist{
      position: absolute;
      width:25%;
      height:auto;
      right:5%;
      top:-85px;
      z-index: 85;
    }
  }
  #header{
    position: relative;
    text-align: center;
    width:100%;
    height:100vh;
    max-height: 820px;
    background-image: url(../../images/background-header-sp.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 5;
    .wrapper{
      .only-sp{
        position: absolute;
        width:45%;
        height:auto;
        top:10px;
        left:5px;
        z-index: 10;
      }
      .logo{
        position: absolute;
        width:76%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 3;
      }
      ul{
        li{
          list-style-type: none;
          &.button{
            position: absolute;
            top:10px;
            left:50%;
            width:35%;
            overflow: hidden;
            z-index: 10;
            a{
              display: block;
              background-color: #a14c8e;
              color: #FFF;
              font-size:0.8rem;
              padding:10px 10px;
              text-decoration: none;
              white-space: nowrap;
              i{
                padding-left:1rem;
              }
            }
          }
        }
      }
    }
  }

.image-photo{
  width:100%;
  height:250px;
  background-image: url(../../images/step-back-top-sp.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.block{
  &.message{
    position: relative;
    .wrapper{
      position: relative;
      text-align: center;
      width:90%;
      margin-left: auto;
      margin-right: auto;
      z-index: 50;
      padding-top:100px;
      padding-bottom:100px;
      z-index: 50;
      .headline{
        .impact{
          position: relative;
          display: inline-block;
          margin-bottom: 25px;
          span{
            color: #216ab7;
            font-size: 1.7rem;
            font-weight: bold;
            padding-right: 2px;
          }
          &::before{
            content: "";
            display: inline-block;
            background-image: url(../../images/impact-before.png);
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: bottom;
            width: 15px;
            height: 35px;
            position: absolute;
            top: 50%;
            left: -2rem;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);

          }
          &::after{
            content: "";
            display: inline-block;
            background-image: url(../../images/impact-after.png);
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: bottom;
            width: 15px;
            height: 35px;
            position: absolute;
            top: 50%;
            right: -2rem;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            z-index: 50;

          }
        }
        .title{
          text-decoration: underline;
          text-decoration-thickness: 0.5em; 
          text-decoration-color: rgba(255, 255, 76, 0.7); 
          text-underline-offset: -0.2em; 
          text-decoration-skip-ink: none; 
          margin-bottom: 35px;
          line-height: 2em;
          font-size: 1.5rem;
          font-weight: bold;
        }
        .text{
          font-size: 0.9rem;
          line-height: 2em;
          margin-bottom: 55px;
        }
      }
      .button{
        position: relative;
        &.stay-list{
          display: inline-block;
          background-color: #a14c8e;
          border-radius: 100vh;
          i{
            position: absolute;
            top: 50%;
            right: 25px;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
          }
          a{
            display: block;
            color: #FFF;
            padding: 10px 85px;
            text-decoration: none;
          }
        }
      }
    }
    &::before{
      content: "";
      display: block;
      background-image: url(../../images/message-back-illust-001-sp.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: top;
      width: 100%;
      height: 850px;
      position: absolute;
      left:0px;
      top: -43px;
      z-index: 30;
    }
    &::after{
      content: "";
      display: block;
      background-image: url(../../images/message-back-illust-002-sp.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: bottom;
      width: 100%;
      height: 850px;
      position: absolute;
      left:0px;
      bottom: 0px;
      z-index: 35;
    }
  }
  &.recommend{
    position: relative;
    background-color: #fffde8;
    margin-top: 80px;
    padding-bottom: 25px;
    .wrapper{
      position: relative;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      z-index: 50;
      .headline{
        padding-top:0px;
        width:93%;
        margin-left: auto;
        margin-right: auto;
        padding-bottom:35px;
        .title{
          text-align: center;
         // color: #FFF;
         // padding:10px 15px;
         // background-image: url(../../images/title-back-wave.png);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          font-size: 1.3rem;
          margin-bottom: 10px;
        }
        .text{
          text-align: center;
         // color: #FFF;
         // padding:10px 15px;
         // background-image: url(../../images/title-back-wave.png);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          font-size: 1.4rem;
          margin-bottom: 35px;
          font-weight: bold;
        }
      }
      .box-wrap{
        width:90%;
        margin-left: auto;
        margin-right: auto;
        .box{
          margin-bottom: 75px;
          .inner{
            position: relative;
            text-align: left;
            line-height: 2em;
            background-image: url(../../images/recommend-title-middle-sp.png);
            background-position: center;
            background-repeat: repeat-y;
            padding: 35px 25px 190px 25px;
            background-size: 100%;
            z-index: 20;
            .title{
              position: relative;
              text-decoration: underline;
              text-decoration-thickness: 0.5em; 
              text-decoration-color: rgba(255, 255, 76, 0.7); 
              text-underline-offset: -0.2em; 
              text-decoration-skip-ink: none; 
              margin-bottom: 15px;
              font-size: 1.5rem;
              font-weight: bold;
              z-index: 25;
            }
            .text{
              position: relative;
              text-align: left;
              font-size: 0.9rem;
              line-height: 1.7em;
              z-index: 25;
              span{
                color:#216ab7;
                font-weight: bold;
              }
            }
              &.one{
                &::before{
                  content: "";
                  display: block;
                  background-image: url(../../images/recommend-title-top-001-sp.png);
                  background-size: 100%;
                  background-position: top;
                  background-repeat: no-repeat;
                  width: 100%;
                  height: 75px;
                  position: absolute;
                  left:0px;
                  top: -35px;
                  z-index: 15;
                }
                .step-list{
                  &::before{
                    content: "";
                    display: block;
                    background-image: url(../../images/step-illust-001-sp.png);
                    background-size: contain;
                    background-position: bottom;
                    background-repeat: no-repeat;
                    width: 100%;
                    height: 170px;
                    position: absolute;
                    bottom: 0px;
                    left: 50%;
                    transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    z-index: 45;
                  }
                }
              }
              &.two{
                &::before{
                  content: "";
                  display: block;
                  background-image: url(../../images/recommend-title-top-002-sp.png);
                  background-size: 100%;
                  background-position: top;
                  background-repeat: no-repeat;
                  width: 100%;
                  height: 55px;
                  position: absolute;
                  left:0px;
                  top: -35px;
                  z-index: 15;
                }
                .step-list{
                  &::before{
                    content: "";
                    display: block;
                    background-image: url(../../images/step-illust-002--sp.png);
                    background-size: contain;
                    background-position: bottom;
                    background-repeat: no-repeat;
                    width: 100%;
                    height: 170px;
                    position: absolute;
                    bottom: 0px;
                    left: 50%;
                    transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    z-index: 45;
                  }
                }
             }
             &.three{
               &::before{
                 content: "";
                 display: block;
                 background-image: url(../../images/recommend-title-top-003-sp.png);
                 background-size: 100%;
                 background-position: top;
                 background-repeat: no-repeat;
                 width: 100%;
                 height: 55px;
                 position: absolute;
                 left:0px;
                 top: -35px;
                 z-index: 15;
               }
               .step-list{
                 &::before{
                   content: "";
                   display: block;
                   background-image: url(../../images/step-illust-003-sp.png);
                   background-size: contain;
                   background-position: bottom;
                   background-repeat: no-repeat;
                   width: 100%;
                   height: 170px;
                   position: absolute;
                   bottom: 0px;
                   left: 50%;
                   transform: translateX(-50%);
                   -webkit-transform: translateX(-50%);
                   -ms-transform: translateX(-50%);
                   z-index: 45;
                 }
               }
            }
            &::after{
              content: "";
              display: block;
              background-image: url(../../images/recommend-title-bottom-sp.png);
              background-size: 100%;
              background-position: bottom;
              background-repeat: no-repeat;
              width: 100%;
              height: 55px;
              position: absolute;
              left:0px;
              bottom: -35px;
              z-index: 15;
            }
          }
        }
      }
      .button{
        position: relative;
        &.stay-list{
          display: inline-block;
          background-color: #a14c8e;
          border-radius: 100vh;
          i{
            position: absolute;
            top: 50%;
            right: 25px;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
          }
          a{
            display: block;
            color: #FFF;
            padding: 10px 85px;
            text-decoration: none;
          }
        }
      }
    }
    &::before{
      content: "";
      display: block;
      background-image: url(../../images/recomment-back-top-sp.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: top;
      width: 100%;
      height: 500px;
      position: absolute;
      left:0px;
      top: -130px;
      z-index: 36;
    }
    &::after{
      content: "";
      display: block;
      background-image: url(../../images/step-illust-bottom-001-sp.png);
      background-size: contain;
      background-position: bottom;
      background-repeat: no-repeat;
      width: 30%;
      height: 125px;
      position: absolute;
      left:5%;
      bottom: -85px;
      z-index: 25;
    }
  }
  &.step{
    position: relative;
    background-color: #e6f4fe;
    .wrapper{
      position: relative;
      text-align: center;
      padding-top: 35px;
      padding-bottom: 195px;
      z-index: 50;
      .headline{
        width:93%;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 25px;
        .title{
          text-align: center;
          //color: #FFF;
         // padding:10px 15px;
          //background-image: url(../../images/title-back-wave.png);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          margin-bottom: 55px;
          font-size: 1.3rem;
        }
        .type{
          text-decoration: underline;
          text-decoration-thickness: 0.5em; 
          text-decoration-color: rgba(255, 255, 76, 0.7); 
          text-underline-offset: -0.2em; 
          text-decoration-skip-ink: none; 
          margin-bottom: 65px;
          font-size: 1.4rem;
          font-weight: bold;
        }
      }
      .step-wrap{
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: flex-start;
        width:90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 55px;
        .box{
          position: relative;
          flex-basis: calc(100% - 0px);
          padding: 0px 0px;
          box-sizing: border-box;
          margin-bottom: 105px;
          &:nth-last-child(1){
            margin-bottom: 10px;
          }
          .inner{
            position: relative;
            text-align: left;
            line-height: 2em;
            background-image: url(../../images/step-title-middle-001-sp.png);
            background-position: center;
            background-repeat: repeat-y;
            padding: 15px 25px 190px 25px;
            background-size: 100%;
            z-index: 10;
              &.one{
                &::before{
                  content: "";
                  display: block;
                  background-image: url(../../images/step-title-top-001-sp.png);
                  background-size: 100%;
                  background-position: top;
                  background-repeat: no-repeat;
                  width: 100%;
                  height: 85px;
                  position: absolute;
                  left:0px;
                  top: -55px;
                  z-index: 15;
                }
                .step-list{
                  position: relative;
                  z-index: 30;
                  span{
                    color:#216ab7;
                    font-weight: bold;
                  }
                  &::before{
                    content: "";
                    display: block;
                    background-image: url(../../images/step-illust-004-sp.png);
                    background-size: contain;
                    background-position: top;
                    background-repeat: no-repeat;
                    width: 100%;
                    height: 185px;
                    position: absolute;
                    top: 65px;
                    left: 50%;
                    transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    z-index: 15;
                  }
                }
              }
              &.two{
                &::before{
                  content: "";
                  display: block;
                  background-image: url(../../images/step-title-top-002-sp.png);
                  background-size: 100%;
                  background-position: top;
                  background-repeat: no-repeat;
                  width: 100%;
                  height: 85px;
                  position: absolute;
                  left:0px;
                  top: -55px;
                  z-index: 15;
                }
                .step-list{
                  position: relative;
                  z-index: 30;
                  span{
                    color:#216ab7;
                    font-weight: bold;
                  }
                  &::before{
                    content: "";
                    display: block;
                    background-image: url(../../images/step-illust-005-sp.png);
                    background-size: contain;
                    background-position: top;
                    background-repeat: no-repeat;
                    width: 100%;
                    height: 185px;
                    position: absolute;
                    top: 65px;
                    left: 50%;
                    transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    z-index: 15;
                  }
                }
             }
            &::after{
              content: "";
              display: block;
              background-image: url(../../images/step-title-bottom-001-sp.png);
              background-size: 100%;
              background-position: bottom;
              background-repeat: no-repeat;
              width: 100%;
              height: 35px;
              position: absolute;
              left:0px;
              bottom: -25px;
            }
          }
        }
        &::after{
          content: "";
          display: block;
          background-image: url(../../images/step-arrow.png);
          background-size: 100%;
          background-position: center;
          background-repeat: no-repeat;
          width:15px;
          height: 25px;
          position: absolute;
          top: 47.7%;
          left: 50%;
          transform: translate(-50%, -50%);
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          z-index: 10;
        }
      }
      .button{
        position: relative;
        &.stay-list{
          display: inline-block;
          background-color: #a14c8e;
          border-radius: 100vh;
          i{
            position: absolute;
            top: 50%;
            right: 25px;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
          }
          a{
            display: block;
            color: #FFF;
            padding: 10px 85px;
            text-decoration: none;
          }
        }
      }
    }
    &::before{
      content: "";
      display: block;
      background-image: url(../../images/step-back-illust-001-sp.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: top;
      width: 100%;
      height: 850px;
      position: absolute;
      left:0px;
      top: -70px;
      z-index: 0;
    }
    &::after{
      content: "";
      display: block;
      background-image: url(../../images/step-back-illust-002-sp.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: bottom;
      width: 100%;
      height: 200px;
      position: absolute;
      right:0px;
      left:0px;
      bottom: 80px;
      z-index: 0;
    }
  }
  &.about{
    position: relative;
    background-color: #fffde8;
    padding-bottom: 10px;
    .wrapper{
      position: relative;
      padding-top: 35px;
      padding-bottom: 95px;
      z-index: 50;
        .headline{
          text-align: center;
          width:93%;
          margin-left: auto;
          margin-right: auto;
          .title{
            text-align: center;
           // color: #FFF;
          //  padding:10px 15px;
           // background-image: url(../../images/title-back-wave.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            font-size: 1.3rem;
            margin-bottom: 35px;
          }
          .type{
            text-decoration: underline;
            text-decoration-thickness: 0.5em; 
            text-decoration-color: rgba(255, 255, 76, 0.7); 
            text-underline-offset: -0.2em; 
            text-decoration-skip-ink: none; 
            margin-bottom: 35px;
            font-size: 1.4rem;
            font-weight: bold;
          }
          .text{
            margin-bottom: 0px;
            width:90%;
            margin-left: auto;
            margin-right: auto;
            line-height: 2em;
            font-size: 0.8rem;
          }
        }
        .box-wrap{
          display: flex;
          flex-wrap: wrap;
          align-items: stretch;
          justify-content: flex-start;
          width:90%;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 55px;
          .box{
            flex-basis: calc(100% - 0px);
            padding: 0px;
            box-sizing: border-box;
            .inner{
              background-color: #FFF;
              box-shadow: 0 2px 4px rgba(0,0,0,0.3);
              padding-bottom: 20px;
              border-radius: 20px;
              overflow: hidden;
              text-align: center;
              margin-top: 35px;
              .title{
                width:90%;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                margin-top: 10px;

                margin-bottom: 15px; 
                text-decoration: underline;
                text-decoration-thickness: 0.5em; 
                text-decoration-color: rgba(255, 255, 76, 0.7); 
                text-underline-offset: -0.2em; 
                text-decoration-skip-ink: none; 
              }
              .text{
                width:90%;
                margin-left: auto;
                margin-right: auto;
                text-align: left;
                font-size: 0.9rem;
                line-height: 1.8em;
                height:auto;
              }
            }
          }
        }
    }
    &::before{
      content: "";
      display: block;
      background-image: url(../../images/step-back-bottom-sp.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: top;
      width: 100%;
      height: 300px;
      position: absolute;
      left:0px;
      top: -100px;
      z-index: 35;
    }
    &::after{
      content: "";
      display: block;
      background-image: url(../../images/about-back-bottom-sp.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: top;
      width: 100%;
      height: 200px;
      position: absolute;
      right:0px;
      left:0px;
      bottom: 0px;
      z-index: 0;
    }
  }
  &.stay-list{
    position: relative;
    background-color: #d9eefd;
    .wrapper{
      position: relative;
      padding-top: 35px;
      z-index: 50;

      .box-wrap{
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: flex-start;
        width:90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 55px;
        .box{
          flex-basis: calc(100% - 0px);
          padding: 0px;
          box-sizing: border-box;
          .inner{
            background-color: #FFF;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            padding-bottom: 25px;
            border-radius: 20px;
            overflow: hidden;
            text-align: center;
            margin-top: 35px;
            .title{
              font-size: 1rem;
              font-weight: bold;
              margin-bottom: 10px;
            }
            .text{
              width:90%;
              margin-left: auto;
              margin-right: auto;
              height: auto;
              min-height:35px;
              overflow: hidden;
              font-size: 0.7rem;
              margin-bottom: 10px;
            }
            .campaign{
              width:85%;
              margin-left: auto;
              margin-right: auto;
              margin-bottom: 20px;
              padding:7px;
              background-color: #ffeaf2;
              color: #ff7bac;
              font-size: .8em;
              &-sub{
                margin-top: .5em;
                display: inline-block;
                font-size: .85em;
                padding: .3em .5em;
                background: #fff;
              }
            }
            .button{
              position: relative;
              width:75%;
              margin-left: auto;
              margin-right: auto;
              &.reserve{
                background-color: #a14c8e;
                border-radius: 100vh;
                i{
                  position: absolute;
                  top: 50%;
                  right: 25px;
                  transform: translateY(-50%);
                  -webkit-transform: translateY(-50%);
                  -ms-transform: translateY(-50%);
                }
                a{
                  display: block;
                  color: #FFF;
                  padding: 5px 25px;
                  text-decoration: none;
                }
              }
            }
          }
        }
      }
      .attention{
        padding-bottom: 155px;
        ul{
          width:90%;
          margin-left: auto;
          margin-right: auto;
          li{
            list-style-type: none;
            line-height: 2em;
            text-align: left;
            white-space: wrap;
          }
        }
      }
    }
    &::before{
      content: "";
      display: inline-block;
      background-image: url(../../images/stay-list-back-001-sp.png);
      background-size: 100%;
      background-position: top;
      background-repeat: no-repeat;
      width: 100%;
      height: 500px;
      position: absolute;
      left:0px;
      top: -35px;
    }
    &::after{
      content: "";
      display: inline-block;
      background-image: url(../../images/stay-list-back-002-sp.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: bottom;
      width: 100%;
      height: 380px;
      position: absolute;
      right:20px;
      bottom: 0px;
    }
  }
}


#footer{
  border-top: 2px solid #efefef;
  height:300px;
  text-align: center;
  padding-top:55px;
}



:root {
  --hamburger-size: 25px; 
  --hamburger-padding: 0px;  
  --hamburger-border-px: 2px; 
  --hamburger-transition: 0.6s; 
}

.hamburger {
  margin: 0 auto; 
  cursor: pointer;
  position: relative;
    z-index: 250;
    &-line{
  position: absolute;
  background-color: #FFF;
  transition: var(--hamburger-transition);
  width: calc(100% - var(--hamburger-padding) * 2);
  height: var(--hamburger-border-px);
        &.top {
  top: var(--hamburger-padding);
  left: var(--hamburger-padding);
}
        &.middle {
  top: calc(50% - var(--hamburger-border-px)/2);
  left: var(--hamburger-padding);
}
        &.bottom {
  bottom: var(--hamburger-padding);
  left: var(--hamburger-padding);
}
}
}

.active >{
    .top {
  top: calc(50% - var(--hamburger-border-px)/2);
  transform: rotate(45deg);
}
    .middle {
  width: 0;
  height: 0;
  left: var(--hamburger-padding);
}
    .bottom {
  top: calc(50% - var(--hamburger-border-px)/2);
  transform: rotate(-45deg);
}
}


.menu-trigger {
  position: absolute;
  cursor: pointer;
  top: 20px;
  right: 15px;
  z-index: 50;
       .hamburger{
  width: 25px;
  height: 21px;
       }
        }

.navbar-links.active{
    top: 0;
}
.navbar-links{
	position: absolute;
	width: 100%;
	top: -680px;
	transition: top .5s;
}
.navbar-links ul{
  position: relative;
	padding: 88px 0px 0px;
	background: rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 5;
}
.navbar-links ul li a{
  display: block;
	height: 35px;
	line-height: 35px;
	color: #484848;
  padding: 15px;
}
.navbar-links li{
  width:100%;
  border-bottom: 1px solid #333;
  list-style-type: none;
  text-align: left;
}
.navbar-links li a{
  text-decoration: none;
}
.navbar-links li a:hover{
	background: rgba(63,169,245,0.9);
  color: #FFF;
}


}*/
.block.stay-list .wrapper .box-wrap .box .inner {
  position: relative;
}

.pet {
  position: absolute;
  left: 0.5em;
  top: 0.7em;
  background: #a14c8e;
  line-height: 1;
  font-size: 12px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  border-radius: 10rem;
  padding: 0.5em 0.8em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.pet img {
  width: 1.2em;
  margin-right: 0.4em;
}

.icon-onsen {
  position: absolute;
  display: inline-block;
  right: 0.5rem;
  top: 0.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 10rem;
  background-color: #ffff89;
  background-image: url(../../images/onsen.svg);
  background-position: center center;
  background-size: 70%;
  background-repeat: no-repeat;
}

.wrapper {
  padding: 5rem 0;
}
@media screen and (max-width: 767px) {
  .wrapper {
    padding: 5rem 0;
  }
}

h2.title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 3rem;
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  h2.title {
    font-size: 2.2rem;
  }
}

.area-bnr {
  font-size: 1.2rem;
  padding: 2em 0;
  background: #eee;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
.area-bnr .title {
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 0.7em;
  font-weight: normal;
}
.area-bnr .bnr-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.area-bnr .bnr-list .bnr a {
  text-decoration: none;
  color: #333;
  padding: 0 1em;
  display: inline-block;
  font-size: 0.9em;
}
.area-bnr .bnr-list .bnr:not(:last-of-type) a {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.scTxt {
  width: 100%;
  overflow: hidden;
  opacity: 0.3;
}
.scTxt p {
  white-space: nowrap;
  font-size: 8vw;
  letter-spacing: 0.15em;
  color: #a98220;
  opacity: 0.5;
  line-height: 1;
  mix-blend-mode: overlay;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  animation: flowing 40s linear infinite;
}
@media screen and (max-width: 767px) {
  .scTxt p {
    font-size: 15vw;
  }
}
.scTxt p:nth-of-type(2) {
  animation-direction: reverse;
}
.scTxt p span {
  font-size: 0.7em;
}

@keyframes flowing {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.gallery {
  width: 100%;
  margin-top: 10rem;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .gallery {
    margin-top: 5rem;
  }
}
.gallery .swiper {
  width: 100%;
  height: 100%;
}
.gallery .swiper .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.gallery .swiper .swiper-wrapper .slide-block {
  width: 100%;
  height: 100%;
}
.gallery .swiper .swiper-wrapper .slide-block figure {
  position: relative;
}
.gallery .swiper .swiper-wrapper .slide-block figure figcaption {
  position: absolute;
  left: 0.5em;
  bottom: 0.5em;
  font-size: 0.8rem;
  color: #fff;
}
.gallery .swiper .swiper-wrapper .slide-block figure figcaption.dark {
  color: #333;
}
.gallery .swiper .swiper-wrapper .slide-block img {
  aspect-ratio: 1.8;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .gallery .swiper .swiper-wrapper .slide-block img {
    aspect-ratio: 1.5;
  }
}
.gallery .swiper-button-next:after, .gallery .swiper-rtl .swiper-button-prev:after,
.gallery .swiper-button-prev:after, .gallery .swiper-rtl .swiper-button-next:after {
  color: #333;
}

/***********************************************/
/*
.steam-full {
  position:fixed;
  left:0;
  bottom:0;
  width:100%; height:100%;
  pointer-events:none; overflow:hidden;
}

.steam-full span {
  position:absolute;
  bottom:-80px;
  background: radial-gradient(
      circle at 50% 30%,
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.25) 35%,
      rgba(255,255,255,0.0) 80%
  );
  filter: blur(28px);
  opacity:0;
  border-radius:50%;
  mix-blend-mode: screen;
  animation: steamReal 9s ease-out infinite;
}
.steam-full span:nth-child(1) { left:52%; width:98px; height:255px; animation-duration:9.82s; animation-delay:-4.82s; }
.steam-full span:nth-child(2) { left:40%; width:104px; height:181px; animation-duration:7.98s; animation-delay:-4.22s; }
.steam-full span:nth-child(3) { left:8%; width:92px; height:186px; animation-duration:7.35s; animation-delay:-1.35s; }
.steam-full span:nth-child(4) { left:42%; width:100px; height:188px; animation-duration:9.55s; animation-delay:-1.57s; }
.steam-full span:nth-child(5) { left:19%; width:73px; height:165px; animation-duration:9.41s; animation-delay:-4.89s; }
.steam-full span:nth-child(6) { left:21%; width:114px; height:243px; animation-duration:10.16s; animation-delay:-2.43s; }
.steam-full span:nth-child(7) { left:24%; width:93px; height:214px; animation-duration:7.62s; animation-delay:-0.6s; }
.steam-full span:nth-child(8) { left:19%; width:101px; height:231px; animation-duration:8.54s; animation-delay:-2.61s; }
.steam-full span:nth-child(9) { left:15%; width:118px; height:245px; animation-duration:8.54s; animation-delay:-2.76s; }
.steam-full span:nth-child(10) { left:90%; width:65px; height:222px; animation-duration:7.02s; animation-delay:-4.58s; }
.steam-full span:nth-child(11) { left:28%; width:116px; height:176px; animation-duration:7.8s; animation-delay:-4.83s; }
.steam-full span:nth-child(12) { left:42%; width:111px; height:172px; animation-duration:7.79s; animation-delay:-2.6s; }
.steam-full span:nth-child(13) { left:12%; width:63px; height:232px; animation-duration:7.99s; animation-delay:-4.45s; }
.steam-full span:nth-child(14) { left:22%; width:66px; height:258px; animation-duration:9.12s; animation-delay:-3.45s; }
.steam-full span:nth-child(15) { left:86%; width:94px; height:241px; animation-duration:9.81s; animation-delay:-1.33s; }
.steam-full span:nth-child(16) { left:64%; width:98px; height:180px; animation-duration:7.52s; animation-delay:-4.15s; }
.steam-full span:nth-child(17) { left:96%; width:79px; height:257px; animation-duration:8.43s; animation-delay:-4.02s; }
.steam-full span:nth-child(18) { left:63%; width:104px; height:151px; animation-duration:10.29s; animation-delay:-0.45s; }
.steam-full span:nth-child(19) { left:27%; width:118px; height:224px; animation-duration:9.8s; animation-delay:-1.74s; }
.steam-full span:nth-child(20) { left:39%; width:93px; height:216px; animation-duration:7.59s; animation-delay:-4.52s; }

@keyframes steamReal {
  0%   { transform: translate3d(0,0,0) scale(0.8,1.0); opacity:0; }
  10%  { opacity:0.55; }
  30%  { transform: translate3d(-8px,-60px,0) scale(1.0,1.1); opacity:0.85; }
  55%  { transform: translate3d(10px,-130px,0) scale(1.15,1.18); opacity:0.55; }
  80%  { transform: translate3d(-6px,-210px,0) scale(1.28,1.25); opacity:0.25; }
  100% { transform: translate3d(4px,-300px,0) scale(1.35,1.3); opacity:0; }
}*/
/***********************************************/
#steamCanvas {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: blur(0.45px);
  z-index: 1;
  opacity: 0.8;
}

.section-title {
  font-size: 4rem;
  text-align: center;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}

.sauna-ill01 {
  text-align: center;
}
.sauna-ill01 img {
  width: 80%;
  max-width: 500px;
}

.location {
  background: #fff;
}
.location .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  padding: 4rem 0;
  display: flex;
  justify-content: center;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}
.location .map {
  border-radius: 10px;
  aspect-ratio: 1;
  filter: grayscale(1);
  overflow: hidden;
  width: 45%;
}
@media screen and (max-width: 767px) {
  .location .map {
    width: 100%;
  }
}
.location .text {
  width: 45%;
}
@media screen and (max-width: 767px) {
  .location .text {
    width: 100%;
  }
}
.location .text figure {
  width: 70%;
  margin: 0 auto 3rem;
}
.location .text figure img {
  width: 100%;
  aspect-ratio: 1.7;
  object-fit: cover;
}
.location .text .info {
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

.intro {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 15rem 0;
}
@media screen and (max-width: 767px) {
  .intro {
    padding: 10rem 0;
  }
}
.intro::after {
  content: "";
  background: #000;
  opacity: 0.3;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.intro::before {
  content: "";
  background: url(../img/rooms/d/04.jpg) no-repeat center center/cover;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}
.intro .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}
.intro .lead {
  text-align: center;
}

.features {
  padding: 10rem 0;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .features {
    padding: 10rem 0;
  }
}
.features::after {
  content: "";
  background: #deca9c;
  opacity: 0.6;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.features::before {
  content: "";
  background: url(../img/rooms/c/09.jpg) no-repeat center center/cover;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}
.features .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}
.features .section-title {
  color: #fff;
}
.features .feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .features .feature-list {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}
.features .feature-item {
  padding: 2rem;
  background: #f0e8d4;
}
@media screen and (max-width: 767px) {
  .features .feature-item {
    padding: 0.8rem;
  }
}
.features .feature-item h3 {
  font-size: 1.1rem;
  margin-bottom: 0.8em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .features .feature-item h3 {
    font-size: 0.9rem;
  }
}
.features .feature-item .feature-text {
  font-size: 0.8rem;
  text-align: justify;
}
.features .feature-item .feature-caption {
  font-size: 0.7rem;
  margin-top: 0.3em;
}

.price {
  padding: 10rem 0;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .price {
    padding: 10rem 0;
  }
}
.price::after {
  content: "";
  background: #deca9c;
  opacity: 0.6;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.price::before {
  content: "";
  background: url(https://img.freepik.com/free-vector/abstract-soft-yellow-watercolor-texture-background_1055-18093.jpg?t=st=1766717926~exp=1766721526~hmac=6b1f1d7d41d5af8b6c6a72073aa9d80f7e8d5a23d856e7d6fb64ced0a6e2994c&w=2000) no-repeat center center/cover;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}
.price .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}
.price .price-sale {
  text-align: center;
  font-size: 1.4rem;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.price .price-list {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .price .price-list {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}
.price .price-item {
  background: #f0e8d4;
  width: 30%;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .price .price-item {
    width: 100%;
  }
}
.price .price-item-inner {
  padding: 1.5rem;
}
.price .price-item p {
  text-align: center;
}
.price .price-item .price-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 6rem;
  background: #a98220;
}
.price .price-item .price-special {
  color: #a98220;
}
.price .price-item .price-title {
  font-size: 1.8em;
  text-align: center;
  line-height: 1;
  color: #fff;
}
.price .price-item .price-title b {
  font-size: 1.4em;
  font-weight: normal;
}
.price .price-item .price-title small {
  font-size: 0.6em;
}
.price .price-item .price-title small.mini {
  font-size: 0.6em;
}
.price .price-item .price-num {
  font-size: 1.6em;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 0.8em;
  padding-bottom: 0.8em;
}
.price .price-item .price-num span {
  font-size: 1.5em;
  color: #a98220;
}
.price .price-item .price-capa {
  font-size: 1.6em;
  text-align: center;
}
.price .price-item .price-capa b {
  font-size: 1.5em;
  font-weight: normal;
}

.flow {
  padding: 10rem 0;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .flow {
    padding: 10rem 0;
  }
}
.flow::after {
  background: #deca9c;
  opacity: 0.6;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.flow::before {
  background: url(https://img.freepik.com/free-vector/abstract-soft-yellow-watercolor-texture-background_1055-18093.jpg?t=st=1766717926~exp=1766721526~hmac=6b1f1d7d41d5af8b6c6a72073aa9d80f7e8d5a23d856e7d6fb64ced0a6e2994c&w=2000) no-repeat center center/cover;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}
.flow .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}
.flow .flow-sale {
  text-align: center;
  font-size: 1.4rem;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.flow .flow-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .flow .flow-list {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.flow .flow-item {
  background: #f0e8d4;
  position: relative;
  z-index: 0;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.flow .flow-item:not(:last-of-type)::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 0;
  transform: rotate(45deg) translateX(calc(1rem + 5px));
  border-top: 2px solid #5e594d;
  border-right: 2px solid #5e594d;
  opacity: 0.7;
}
@media screen and (max-width: 767px) {
  .flow .flow-item:not(:last-of-type)::before {
    right: auto;
    left: calc(50% - 10px);
    top: auto;
    bottom: -15px;
    transform: rotate(135deg) translate(0, 0);
  }
}
@media screen and (max-width: 767px) {
  .flow .flow-item {
    width: 100%;
  }
}
.flow .flow-item-inner {
  padding: 2rem;
}
.flow .flow-item p {
  text-align: center;
}
.flow .flow-item .flow-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1em 0;
  background: #5e594d;
}
.flow .flow-item .flow-special {
  color: #333;
}
.flow .flow-item .flow-title {
  font-size: 1.8em;
  text-align: center;
  line-height: 1;
  color: #fff;
}

.imgCol {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}
.imgCol .img-container {
  display: flex;
  justify-content: center;
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .imgCol .img-container {
    margin-bottom: 3rem;
  }
}
.imgCol .img {
  width: 70%;
  display: flex;
  gap: 5rem;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .imgCol .img {
    width: 100%;
    gap: 20px;
  }
}
.imgCol .img figure img {
  width: 100%;
  object-fit: cover;
}
.imgCol .img figure:nth-of-type(1) img {
  aspect-ratio: 0.9;
}
.imgCol .img figure:nth-of-type(2) {
  margin-top: 15%;
}
.imgCol .img figure:nth-of-type(2) img {
  aspect-ratio: 1.2;
}
@media screen and (max-width: 767px) {
  .imgCol .img figure:nth-of-type(2) {
    margin-top: 20%;
  }
}

.room {
  background: url(../img/bg1.jpg) no-repeat center top/100%;
  background-attachment: fixed;
}
@media screen and (max-width: 767px) {
  .room {
    background: url(../img/bg1.jpg) no-repeat center top/cover;
  }
}
.room > .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.room .lead {
  text-align: center;
  margin-bottom: 3rem;
}

.room-type-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.room-type-nav ul li {
  position: relative;
}
.room-type-nav ul li a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  display: inline-block;
  padding: 0.2em 2em;
  text-decoration: none;
  color: #333;
  transition: all 0.5s;
  font-size: 1.8rem;
}
.room-type-nav ul li a:hover {
  opacity: 0.6;
}
@media screen and (max-width: 767px) {
  .room-type-nav ul li a {
    font-size: 1.2rem;
    padding: 0.2em 1em;
  }
}
.room-type-nav ul li:not(:last-of-type)::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  top: 0;
  right: 0;
  position: absolute;
  background: #000;
  opacity: 0.1;
}
.room-type .room-type-block-slide,
.room-type .room-type-block-info {
  min-width: 0;
  min-height: 0;
  /* ←追加 */
}
.room-type .room-type-block-info {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .room-type .room-type-block-info {
    display: block;
  }
}
.room-type .room-type-block-info-copy-copy {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  text-align: left;
  font-size: 1.6em;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
  .room-type .room-type-block-info-copy-copy {
    font-size: 1.4em;
  }
}
.room-type .room-type-block-info-copy-lead {
  text-align: justify;
}
.room-type .rooms-detail-mv-slide_thumb {
  margin-top: 10px;
}
.room-type .room-type-block-slide {
  overflow: hidden;
}
.room-type .room-type-block > * {
  min-width: 0;
  min-height: 0;
  /* ←追加 */
}
.room-type .room-type-block {
  align-items: start;
  width: 100%;
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  .room-type .room-type-block:not(:last-of-type) {
    margin-bottom: 50px;
  }
}
.room-type .room-type-block-slide {
  width: 100%;
}
.room-type .room-type-block .rooms-detail-mv {
  overflow: hidden;
  position: relative;
}
.room-type .room-type-block .rooms-detail-mv img {
  display: block;
  max-width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
}
.room-type .room-type-block-info-title {
  font-size: 4.4rem;
  text-align: center;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #333;
  padding: 0.2em 0;
}
@media screen and (max-width: 767px) {
  .room-type .room-type-block-info-title {
    font-size: 3rem;
    padding: 0.2em 0;
  }
}
.room-type .room-type-block-info-title span {
  font-size: 0.5em;
}
.room-type .room-type-block-info-title b {
  font-weight: normal;
}
.room-type .room-type-block-info-spec {
  font-size: 0.9rem;
}
.room-type .room-type-block-info-spec dl {
  display: flex;
  flex-wrap: wrap;
}
.room-type .room-type-block-info-spec dl dt, .room-type .room-type-block-info-spec dl dd {
  margin-bottom: 0.4em;
}
.room-type .room-type-block-info-spec dl dt {
  width: 20%;
  opacity: 0.6;
}
.room-type .room-type-block-info-spec dl dd {
  width: 80%;
}

.amenity {
  margin-top: 3rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.4);
}
.amenity > p {
  font-size: 1.2rem;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 0.4em;
  padding-bottom: 0.4em;
}
.amenity .amenity-content p {
  font-size: 1rem;
}
.amenity dl {
  font-size: 0.8rem;
}
.amenity dl dt {
  margin-bottom: 0.3em;
}
.amenity dl dd {
  margin-bottom: 0.7em;
}
.amenity ul {
  margin-top: 0.5rem;
  list-style: none;
}
.amenity ul li {
  font-size: 0.8rem;
}
.amenity ul li::before {
  content: "※";
}

.swiper-button-next, .swiper-button-prev {
  color: #fff !important;
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 1.2rem !important;
}

.swiper-button-next:before {
  left: calc(50% - 0.15rem);
}

.swiper-button-prev:before {
  left: calc(50% + 0.15rem);
}

.swiper-button-next:before, .swiper-button-prev:before {
  position: absolute;
  content: "";
  display: block;
  border-radius: 20rem;
  transform: translate(-50%, -50%);
  top: 50%;
  width: 1.9rem;
  aspect-ratio: 1;
  background: #fff;
  z-index: -1;
  opacity: 0;
  transition: all 0.5s;
}

.swiper-button-next:hover:before, .swiper-button-prev:hover:before {
  opacity: 0.2;
}

.rooms-detail-mv-slide_thumb .swiper-slide {
  cursor: pointer;
  transition: opacity 0.5s;
}
.rooms-detail-mv-slide_thumb .swiper-slide:hover {
  opacity: 0.7;
}

.room-type-block button.modalTrg, .room-type-block button.close {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  padding: 0.5em 0;
  background: none;
  font-size: 0.8rem;
  margin-top: 0.5em;
  color: #000;
  font-weight: normal;
  line-height: 1;
  cursor: pointer;
  transition: all 0.5s;
  padding: 0.6em 1.5em;
  border-radius: 20rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
}
.room-type-block button.modalTrg:hover, .room-type-block button.close:hover {
  opacity: 0.6;
}
@media screen and (max-width: 767px) {
  .room-type-block button.modalTrg, .room-type-block button.close {
    font-size: 1rem;
  }
}
.room-type-block button.modalTrg {
  font-size: 0.8rem;
}
@media screen and (max-width: 767px) {
  .room-type-block button.modalTrg {
    margin-top: 1rem;
  }
}
.room-type-block button.close {
  border: 1px solid #aaa;
  padding: 0.5em 2rem;
  width: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
}
.room-type-block .modal-container {
  position: fixed;
  z-index: 10000000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.5s;
  visibility: hidden;
  opacity: 0;
}
.room-type-block .modal-container.show {
  visibility: visible;
  opacity: 1;
}
.room-type-block .modal-container .overlay {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.room-type-block .modal-container .overlay .modal-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}
.room-type-block .modal-container .overlay > div:not(.modal-bg) {
  max-height: 90%;
  max-width: 90%;
  height: 100%;
  padding: 1rem 1rem 4rem 1rem;
  background: #fff;
  border-radius: 10px;
  position: relative;
}
.room-type-block .modal-container .overlay > div:not(.modal-bg) figure {
  max-height: 100vh;
  height: 100%;
  width: 100%;
  max-width: 100vh;
}
.room-type-block .modal-container .overlay > div:not(.modal-bg) figure img {
  max-height: 100%;
  max-width: 100%;
}

body.modalOpen {
  overflow: hidden;
}

.wideimg {
  width: 100%;
  position: relative;
}
.wideimg img {
  aspect-ratio: 2.2;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .wideimg img {
    aspect-ratio: 1.2;
  }
}

/*# sourceMappingURL=style-lp.css.map */