@charset "UTF-8";
/* ===================================================================
CSS information

file name  : rooms.css
author     : Abilive
style info : 客室
=================================================================== */
/* ===================================================================
CSS information

file name  : _settings.scss
author     : Abilive
style info : 汎用設定
=================================================================== */
@property --1vw {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
:root {
  --1vw: 1vw;
  --vw-to-px: calc(tan(atan2(var(--1vw), 1px)));
}

@media only screen and (min-width: 768px) {
  .c-intro__inner {
    column-gap: min(2.604vw, 2.778rem);
  }
}
@media only screen and (min-width: 768px) {
  .c-intro__text {
    width: 40.625%;
    margin-top: min(7.292vw, 7.778rem);
  }
}
@media only screen and (min-width: 768px) {
  .c-intro__text .text-container {
    width: 84.615%;
    padding-left: 10.769%;
  }
}
.c-intro__text .image-sub {
  display: flex;
  flex-direction: row;
  column-gap: 0.556rem;
  margin-top: min(7.76vw, 8.278rem);
}
@media only screen and (max-width: 767px) {
  .c-intro__text .image-sub {
    margin-top: -1.111rem;
  }
}

.c-anchor .note {
  margin-top: 2.222rem;
}
@media only screen and (min-width: 768px) {
  .c-anchor .note {
    text-align: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .c-anchor .note {
    margin-top: 1.889rem;
  }
}
@media only screen and (max-width: 767px) {
  .c-anchor .note {
    width: 89.744%;
    margin-inline: auto;
    margin-top: 1.556rem;
  }
}

.p-rooms {
  padding-block: 5.556rem 6.667rem;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms {
    padding-block: 4.722rem 5.667rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms {
    padding-block: 3.889rem 4.667rem;
  }
}
.p-rooms.u-bg {
  padding-block: 6.667rem 7.778rem;
  background: #FBF8EF;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms.u-bg {
    padding-block: 5.667rem 6.611rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms.u-bg {
    padding-block: 4.667rem 5.444rem;
  }
}
.p-rooms.u-bg .p-rooms__item .text-bottom {
  position: relative;
}
.p-rooms.u-bg .p-rooms__item .text-bottom:before {
  content: "";
  display: block;
  position: absolute;
  width: min(14.219vw, 15.167rem);
  aspect-ratio: 273/111;
  background: url("../images/common/bg_deco1.webp") no-repeat center/contain;
  pointer-events: none;
}
@media only screen and (max-width: 767px) {
  .p-rooms.u-bg .p-rooms__item .text-bottom:before {
    width: 70vw;
  }
}
.p-rooms.u-bg .p-rooms__item .text-bottom:before {
  left: min(-8.854vw, -9.444rem);
  top: 100%;
  margin-top: min(-2.708vw, -2.889rem);
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms.u-bg .p-rooms__item .text-bottom:before {
    left: min(-4.427vw, -4.722rem);
    margin-top: min(-1.302vw, -1.389rem);
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms.u-bg .p-rooms__item .text-bottom:before {
    left: min(-4.427vw, -4.722rem);
    width: 48.974%;
    margin-top: min(-1.302vw, -1.389rem);
  }
}
.p-rooms > .c-heading2 {
  margin-bottom: 2.222rem;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms > .c-heading2 {
    margin-bottom: 1.889rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms > .c-heading2 {
    margin-bottom: 1.667rem;
  }
}
.p-rooms__list {
  width: 89.744%;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-rooms__list {
    max-width: 1400px;
  }
}
@media only screen and (min-width: 768px) {
  .p-rooms__item {
    display: grid;
    grid-template-columns: 71.429% 1fr;
    grid-template-areas: "img txt";
    align-items: start;
    column-gap: 5.714%;
    width: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .p-rooms__item {
    align-items: center;
  }
}
@media print {
  .p-rooms__item {
    align-items: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms__item {
    grid-template-columns: 62.857% 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__item {
    display: flex;
    flex-direction: column;
    row-gap: 1.111rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-rooms__item.u-reverse {
    grid-template-columns: 1fr 71.429%;
    grid-template-areas: "txt img";
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms__item.u-reverse {
    grid-template-columns: 1fr 62.857%;
  }
}
.p-rooms__item + .p-rooms__item {
  margin-top: 6.667rem;
}
@media only screen and (max-width: 767px) {
  .p-rooms__item + .p-rooms__item {
    margin-top: 3.333rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-rooms__item .text {
    grid-area: txt;
    display: flex;
    flex-direction: column;
    row-gap: 2.222rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__item .text {
    display: contents;
  }
}
.p-rooms__item .text-top {
  display: flex;
  flex-direction: column;
  row-gap: 1.111rem;
}
@media only screen and (max-width: 767px) {
  .p-rooms__item .text-top {
    order: 1;
    align-items: center;
    row-gap: 0.556rem;
  }
}
.p-rooms__item .text-top .c-heading4 {
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media only screen and (max-width: 767px) {
  .p-rooms__item .text-top .c-heading4 {
    align-items: center;
  }
}
.p-rooms__item .text-top .smoking {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.556rem;
}
@media only screen and (min-width: 1200px) {
  .p-rooms__item .text-top .smoking {
    font-size: 0.833rem;
  }
}
@media print {
  .p-rooms__item .text-top .smoking {
    font-size: 0.833rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms__item .text-top .smoking {
    font-size: 0.778rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__item .text-top .smoking {
    font-size: 0.933rem;
  }
}
.p-rooms__item .text-top .smoking:before {
  content: "";
  display: block;
  width: 0.889rem;
  height: 0.889rem;
  background-color: currentColor;
  -webkit-mask: url("../images/common/icon-no-smoking.svg") no-repeat center/contain;
  mask: url("../images/common/icon-no-smoking.svg") no-repeat center/contain;
  pointer-events: none;
}
.p-rooms__item .text-bottom {
  display: flex;
  flex-direction: column;
  row-gap: 1.667rem;
}
@media only screen and (max-width: 767px) {
  .p-rooms__item .text-bottom {
    order: 3;
    row-gap: 1.111rem;
    width: 89.744%;
    margin-inline: auto;
  }
}
.p-rooms__item .text-bottom .note {
  margin-top: -1.111rem;
}
@media only screen and (min-width: 1200px) {
  .p-rooms__item .text-bottom .note {
    font-size: 0.833rem;
  }
}
@media print {
  .p-rooms__item .text-bottom .note {
    font-size: 0.833rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms__item .text-bottom .note {
    font-size: 0.778rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__item .text-bottom .note {
    font-size: 0.933rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__item .text-bottom .note {
    margin-top: -0.556rem;
  }
}
.p-rooms__item .text-bottom .info {
  display: flex;
  flex-direction: column;
  row-gap: 0.556rem;
  padding-top: 1.667rem;
  border-top: 1px solid #D7D7D7;
}
@media only screen and (max-width: 767px) {
  .p-rooms__item .text-bottom .info {
    padding-top: 1.111rem;
  }
}
.p-rooms__item .text-bottom .info-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.556rem;
}
.p-rooms__item .text-bottom .info-item.u-bed:before {
  content: "";
  display: block;
  width: 1.278rem;
  height: 0.833rem;
  background-color: #D9539C;
  -webkit-mask: url("../images/common/icon-bed.svg") no-repeat center/contain;
  mask: url("../images/common/icon-bed.svg") no-repeat center/contain;
  pointer-events: none;
}
.p-rooms__item .text-bottom .info-item.u-people:before {
  content: "";
  display: block;
  width: 1.333rem;
  height: 0.889rem;
  background-color: #D9539C;
  -webkit-mask: url("../images/common/icon-people.svg") no-repeat center/contain;
  mask: url("../images/common/icon-people.svg") no-repeat center/contain;
  pointer-events: none;
}
.p-rooms__item .text-bottom .c-btn3 {
  margin-top: 0.556rem;
}
@media only screen and (min-width: 768px) {
  .p-rooms__item .text-bottom .c-btn3 {
    width: 100%;
    max-width: 17.778rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__item .text-bottom .c-btn3 {
    margin-inline: auto;
  }
}
.p-rooms__item .image {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .p-rooms__item .image {
    grid-area: img;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__item .image {
    order: 2;
  }
}
.p-rooms__item .image img {
  aspect-ratio: 1000/660;
  object-fit: cover;
}
@media only screen and (min-width: 768px) {
  .p-rooms__item .image img {
    border-radius: 1.667rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__item .image img {
    border-radius: 1.111rem;
  }
}
.p-rooms__item .image .c-swiper .c-swiper-controls {
  z-index: 3;
}
.p-rooms__item .image .c-label {
  position: absolute;
  right: min(1.563vw, 1.667rem);
  top: min(1.563vw, 1.667rem);
  z-index: 4;
}
.p-rooms__sub {
  margin-top: 4.444rem;
  width: 89.744%;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-rooms__sub {
    max-width: 1200px;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__sub {
    width: 79.487%;
  }
}
@media only screen and (min-width: 768px) {
  .p-rooms__sub {
    display: grid;
    grid-template-columns: 48.333% 1fr;
    grid-template-areas: "img txt";
    align-items: start;
    column-gap: 5.833%;
  }
}
@media only screen and (min-width: 1200px) {
  .p-rooms__sub {
    align-items: center;
  }
}
@media print {
  .p-rooms__sub {
    align-items: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms__sub {
    margin-top: 3.778rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__sub {
    display: flex;
    flex-direction: column-reverse;
    row-gap: 1.111rem;
    margin-top: 3.111rem;
  }
}
.p-rooms__sub + .p-rooms__sub {
  margin-top: 3.333rem;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms__sub + .p-rooms__sub {
    margin-top: 2.833rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__sub + .p-rooms__sub {
    margin-top: 2.333rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-rooms__sub .text {
    grid-area: txt;
  }
}
.p-rooms__sub .text .heading {
  font-weight: 500;
}
@media only screen and (min-width: 1200px) {
  .p-rooms__sub .text .heading {
    font-size: 1.222rem;
  }
}
@media print {
  .p-rooms__sub .text .heading {
    font-size: 1.222rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms__sub .text .heading {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__sub .text .heading {
    font-size: 1.2rem;
  }
}
.p-rooms__sub .text .heading:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 0.556rem;
  background: linear-gradient(26deg, #A81D69, #4C48B4);
}
.p-rooms__sub .text .list {
  display: flex;
  flex-direction: column;
  row-gap: 0.278rem;
  margin-top: 1.111rem;
}
.p-rooms__sub .text .list li {
  position: relative;
  padding-left: 1rem;
}
.p-rooms__sub .text .list li:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0.611rem;
  width: 0.444rem;
  aspect-ratio: 1;
  border-radius: 100%;
  background: #383493;
}
.p-rooms__sub .text .list.u-column2 {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.278rem min(1.563vw, 1.667rem);
}
@media only screen and (max-width: 767px) {
  .p-rooms__sub .text .list.u-column2 {
    column-gap: 5.128vw;
  }
}
@media only screen and (min-width: 1200px) {
  .p-rooms__sub .text .list.u-column2 li {
    width: 12.778rem;
  }
}
@media print {
  .p-rooms__sub .text .list.u-column2 li {
    width: 12.778rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms__sub .text .list.u-column2 li {
    width: 10rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__sub .text .list.u-column2 li {
    width: 35.897vw;
  }
}
@media only screen and (min-width: 768px) {
  .p-rooms__sub .image {
    grid-area: img;
  }
}
.p-rooms__sub .image img {
  aspect-ratio: 580/430;
  object-fit: cover;
}
@media only screen and (min-width: 768px) {
  .p-rooms__sub .image img {
    border-radius: 1.667rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__sub .image img {
    border-radius: 1.111rem;
  }
}
.p-rooms__link {
  display: flex;
  margin-top: 4.444rem;
  width: 89.744%;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .p-rooms__link {
    max-width: 1200px;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__link {
    width: 79.487%;
  }
}
@media only screen and (min-width: 768px) {
  .p-rooms__link {
    flex-direction: row;
    justify-content: center;
    column-gap: 0.833%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms__link {
    margin-top: 3.778rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-rooms__link {
    flex-direction: column;
    row-gap: 0.556rem;
    margin-top: 3.111rem;
  }
}
.p-rooms__link [class*=c-btn] {
  width: 100%;
}
@media only screen and (min-width: 1200px) {
  .p-rooms__link [class*=c-btn] {
    width: 20.778rem;
  }
}
@media print {
  .p-rooms__link [class*=c-btn] {
    width: 20.778rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-rooms__link [class*=c-btn] {
    width: 17.667rem;
  }
}

.p-amenity__content + .p-amenity__content {
  margin-top: min(3.646vw, 3.889rem);
}
@media only screen and (max-width: 767px) {
  .p-amenity__content + .p-amenity__content {
    margin-top: 12.821%;
  }
}
.p-amenity__content .heading {
  font-weight: 500;
}
@media only screen and (min-width: 1200px) {
  .p-amenity__content .heading {
    font-size: 1.222rem;
  }
}
@media print {
  .p-amenity__content .heading {
    font-size: 1.222rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-amenity__content .heading {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-amenity__content .heading {
    font-size: 1.2rem;
  }
}
.p-amenity__content .heading:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 0.556rem;
  background: linear-gradient(26deg, #A81D69, #4C48B4);
}
.p-amenity__content .list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.833rem min(1.563vw, 1.667rem);
  margin-top: min(1.563vw, 1.667rem);
}
@media only screen and (max-width: 767px) {
  .p-amenity__content .list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.556rem 2.564vw;
    margin-top: 5.128vw;
  }
}
.p-amenity__content .list li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "img txt";
  align-items: center;
  column-gap: 0.833rem;
}
@media only screen and (max-width: 767px) {
  .p-amenity__content .list li {
    column-gap: 0.556rem;
  }
}
.p-amenity__content .list li .text {
  grid-area: txt;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media only screen and (min-width: 1200px) {
  .p-amenity__content .list li .text {
    font-size: 1rem;
  }
}
@media print {
  .p-amenity__content .list li .text {
    font-size: 1rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-amenity__content .list li .text {
    font-size: 0.833rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-amenity__content .list li .text {
    font-size: 0.867rem;
  }
}
.p-amenity__content .list li .icon {
  grid-area: img;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min(3.125vw, 3.333rem);
  aspect-ratio: 1;
  border-radius: 100%;
  background: #F0F0F0;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-amenity__content .list li .icon {
    width: min(4.688vw, 5rem);
  }
}
@media only screen and (max-width: 767px) {
  .p-amenity__content .list li .icon {
    width: 10.256vw;
  }
}
.p-amenity__content .list li .icon:before {
  content: "";
  display: block;
  width: 43.333%;
  height: 43.333%;
  background-color: #383493;
  -webkit-mask: url("../images/common/icon-bed.svg") no-repeat center/contain;
  mask: url("../images/common/icon-bed.svg") no-repeat center/contain;
  pointer-events: none;
}
@media only screen and (max-width: 767px) {
  .p-amenity__content .list li .icon:before {
    width: 50%;
  }
}
.p-amenity__content .list li .icon.u-tv:before {
  -webkit-mask-image: url("../images/common/icon-tv.svg");
  mask-image: url("../images/common/icon-tv.svg");
}
.p-amenity__content .list li .icon.u-towel:before {
  -webkit-mask-image: url("../images/common/icon-towel.svg");
  mask-image: url("../images/common/icon-towel.svg");
}
.p-amenity__content .list li .icon.u-kettle:before {
  -webkit-mask-image: url("../images/common/icon-kettle.svg");
  mask-image: url("../images/common/icon-kettle.svg");
}
.p-amenity__content .list li .icon.u-cold:before {
  -webkit-mask-image: url("../images/common/icon-cold.svg");
  mask-image: url("../images/common/icon-cold.svg");
}
.p-amenity__content .list li .icon.u-safe:before {
  -webkit-mask-image: url("../images/common/icon-safe.svg");
  mask-image: url("../images/common/icon-safe.svg");
}
.p-amenity__content .list li .icon.u-bath:before {
  -webkit-mask-image: url("../images/common/icon-bath.svg");
  mask-image: url("../images/common/icon-bath.svg");
}
.p-amenity__content .list li .icon.u-toilet:before {
  -webkit-mask-image: url("../images/common/icon-toilet.svg");
  mask-image: url("../images/common/icon-toilet.svg");
}
.p-amenity__content .list li .icon.u-tooth:before {
  -webkit-mask-image: url("../images/common/icon-tooth.svg");
  mask-image: url("../images/common/icon-tooth.svg");
}
.p-amenity__content .list li .icon.u-single:before {
  -webkit-mask-image: url("../images/common/icon-single.svg");
  mask-image: url("../images/common/icon-single.svg");
}
.p-amenity__content .list li .icon.u-dryer:before {
  -webkit-mask-image: url("../images/common/icon-dryer.svg");
  mask-image: url("../images/common/icon-dryer.svg");
}
.p-amenity .note {
  margin-top: min(1.563vw, 1.667rem);
}
@media only screen and (min-width: 1200px) {
  .p-amenity .note {
    font-size: 1rem;
  }
}
@media print {
  .p-amenity .note {
    font-size: 1rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .p-amenity .note {
    font-size: 0.833rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-amenity .note {
    font-size: 0.867rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-amenity .note {
    margin-top: 6.897%;
  }
}

/*# sourceMappingURL=rooms.css.map */
