/* ----------------- Onsen Rooms -----------------------*/
/* container */
#cus_contents .container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Serif JP", sans-serif;
}

/* rooms_intro */
.rooms_intro .guest_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rooms_intro .guest_cont {
  position: absolute;
}
.rooms_intro .guest_inner {
  padding-top: 32px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rooms_intro .guest_inner h3 {
  font-size: 32px;
  font-weight: 400;
  line-height: 44.80px;
  word-wrap: break-word;
  letter-spacing: 9px;
}
.rooms_intro .guest_inner h3 span.highlight {
  text-combine-upright: none;
  display: block;
  margin-top: 43px;
  line-height: 44.80px;
  height: auto;
  width: auto;
  text-align: left;
}
.rooms_intro .guest_inner h3 span.highlight span {
  text-combine-upright: all;
  display: inline-block;
  line-height: 44.80px;
  height: 44.80px;
  vertical-align: middle;
  text-align: center;
  margin: 0 0 10px 0;
  width: .4em;
}
.rooms_intro .guest_inner h4 {
  font-size: 20px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 1px;
}
.rooms_intro .guest_inner .desc {
  display: flex;
  flex-direction: column;
  gap: 20px;
  line-height: 28px;
  padding-top: 41px;
  letter-spacing: 5px;
}
.rooms_intro .guest_inner .desc p {
  letter-spacing: 7px;
}

/* rooms_design */
.rooms_design {
  margin-top: 80px;
  margin-bottom: 140px;
}
.design_heading {
  text-align: center;
}
.design_heading h3 {
  font-size: 32px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 1.60px;
  margin-bottom: 16px;
}
.design_heading p {
  font-size: 16px;
  line-height: 28.80px;
  letter-spacing: 0.80px;
}
.design_heading h4 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 36px;
  letter-spacing: 1px;
}

.design_info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.design_info h4 {
  font-size: 20px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 1px;
}
.design_info h4 span {
  font-size: 16px;
  line-height: 28.80px;
  letter-spacing: 0.80px;
}
.design_info_lf {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.design_info_lf h5 {
  font-size: 18px;
  font-weight: 700;
  line-height: 28.80px;
}
.design_info_lf p {
  font-size: 14px;
  font-weight: 500;
  line-height: 30.80px;
}

/* rooms_bed */
.rooms_bed {
  overflow: unset;
  margin-bottom: 140px;
}
.bed_slide {
  position: relative;
}
.rooms_bed_slide {
  margin-bottom: 16px;
  overflow: unset;
}
.rooms_bed_slide .swiper-wrapper {
  width: 60%;
  justify-self: end;
  max-height: 480px;
  overflow-y: clip;
}
.rooms_bed_slide::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: -1px;
  z-index: 1;
  background: linear-gradient(90deg, white 0%, white 50%, rgba(255,255,255,1.8) 50%, transparent 70%);
}
.rooms_bed_slide .swiper-pagination {
  text-align: left;
  bottom: -16px;
  left: 50%;
}
.rooms_bed_slide .swiper-pagination .swiper-pagination-bullet {
  width: 80px;
  height: 4px;
  border-radius: unset;
  margin: 0;
  margin-right: 7px;
  background-color: #E4E4E4;
  opacity: 1;
}
.rooms_bed_slide .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #303030;
}

.bed_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 115px;
  /* position: relative; */
}
/* .bed_grid::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.75) 46%, white 53%)
} */
.rooms_bed .bed_cont {
  display: flex;
  flex-direction: column;
  align-items: end;
  position: relative;
  z-index: 2;
}
.rooms_bed .bed_cont .desc {
  max-width: 481px;
  font-size: 20px;
  line-height: 36px;
  letter-spacing: 1px;
}

/* roooma guest */
.guest {
  display: flex;
  flex-direction: column;
  position: relative;
}
.guest_cont {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 1080px;
  height: 100%;
  margin: 0 auto;
  text-align: left;
  display: flex;
  justify-content: flex-end;
  z-index: 1;
}
.rooms_bed_slide .guest_cont {
  justify-content: unset;
  z-index: 2;
}
.guest_inner {
  max-width: 502px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.guest_inner h3 {
  color: #303030;
  font-size: 32px;
  font-family: Noto Serif JP;
  font-weight: 400;
  line-height: 57.60px;
  letter-spacing: 1.60px;
  word-wrap: break-word;
}
.guest_inner h4 {
  color: #303030;
  font-size: 20px;
  font-family: Noto Serif JP;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 1px;
  word-wrap: break-word;
  margin-bottom: 40px;
}
.guest_inner .desc {
  font-size: 20px;
  line-height: 36px;
  letter-spacing: 1px;
}

/* rooms_img_slide */
.rooms {
  margin-bottom: 240px;
}
.rooms_img_slide {
  margin-top: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.5vw;
}
.rooms_img_slide {
  width: 100%;
  overflow: hidden;
}
.rooms_img_slide .swiper-wrapper {
  transition-timing-function: linear !important;
  -webkit-transition-timing-function: linear !important;
}
.rooms_img_slide .swiper-slide {
  width: 18.1770833333vw;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.rooms_img_slide .swiper-slide img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ----------------- Onsen spa -----------------------*/
/* rooms_intro reverse */
.rooms_intro.reverse {
  margin-top: 218px;
}
.rooms_intro.reverse .guest_cont {
  justify-content: flex-start;
}
.rooms_intro.reverse .guest_inner {
  max-width: 502px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rooms_intro .guest_img img {
  min-height: 622px;
}
/* rooms_other */
.rooms_other {
  margin: 52px 0 160px;
  padding: 24px 0;
  background-color: #FFFAF6;
}
.rooms_other_cont {
  text-align: center;
}
.rooms_other_cont h3 {
  font-size: 32px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 1.60px;
  margin-bottom: 10px;
}
/* rooms_beauty */
.rooms_beauty {
  margin-bottom: 100px;
}
.beauty_grid,
.relax_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.beauty_grid-img {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
}
.beauty_grid-img li img:not(:last-child) {
  margin-bottom: 16px;
}

.beauty_grid-cont {
  display: flex;
  justify-self: start;
}
.cont_txt {
  max-width: 549px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.beauty_grid-cont h3,
.relax_grid-cont h3 {
  font-size: 32px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 1.60px;
  margin-bottom: 10px;
}
.beauty_grid-cont h4.sub_title,
.relax_grid-cont h4.sub_title {
  font-size: 20px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 1px;
}
.beauty_grid-cont p,
.relax_grid-cont p {
  font-size: 20px;
}
.btn_link a {
  display: inline-block;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  color: #303030 !important;
}
.btn_link a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: 97px;
  height: 100%;
  border: none;
  background: url(../img/icon-arrow.png) center no-repeat;
  transition: .3s;
}
.btn_link a:hover::after {
  position: absolute;
  top: 0;
  left: 100%;
  width: 157px;
  height: 100%;
  background: url(../img/icon-arrow-hover.png) center no-repeat;
}

/* rooms_relax */
.rooms_relax {
  margin-bottom: 130px;
}
.relax_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.relax_grid-img {
  margin-left: 60px;
}
.relax_grid-cont {
  display: flex;
  flex-direction: column;
  align-items: end;
}
.rooms_relax_slide {
  padding-bottom: 16px;
}
.rooms_relax_slide .swiper-slide {
  display: flex;
}
.rooms_relax_slide .swiper-pagination {
  text-align: left;
  bottom: 0;
}
.rooms_relax_slide .swiper-pagination .swiper-pagination-bullet {
  width: 80px;
  height: 4px;
  border-radius: unset;
  margin: 0;
  margin-right: 7px;
  background-color: #E4E4E4;
  opacity: 1;
}
.rooms_relax_slide .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #303030;
}