@charset "UTF-8";
/* CSS Document */
#billboard {overflow: hidden;position: relative;padding-top: 16em;}
#billboard::after {display: block;content: '';width: 100%;height: 100%;background: teal url("../img/common/bg01_pc.webp") no-repeat 100% 0 / cover;background-blend-mode: soft-light;position: absolute;top: 0;left: 0;z-index: 1;pointer-events: none;}
#billboard h2 {position: absolute;bottom: 1.5em;left: 0;right: 0;z-index: 2;text-align: center;font-weight: 600;font-size: 150%;letter-spacing: 0.15em;color: #fff;}
#billboard h2 small {display: block;font-weight: 500;font-size: 133.33%;opacity: 0.5;}
#billboard .section-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}

.block-room-01 {background: aliceblue url("../img/common/bg01_pc.webp") no-repeat center / cover;background-blend-mode: soft-light;}
.block-room-01 h3 {margin-bottom: 1em;padding: 0.5em;background: cadetblue url("../img/common/bg03_pc.webp") no-repeat 100% 0 / cover;background-blend-mode: screen;border-radius: 5px;text-align: center;font-weight: 600;font-size: 150%;color: #fff;}
.block-room-01 .data h4 {position: relative;border-bottom: 1px solid #006463;margin-bottom: 0.5em;padding-bottom: 0.5em;font-size: 200%;font-weight: 800;line-height: 1;letter-spacing: 0.1em;color: #006463;}
.block-room-01 .data h4 span {position: absolute;bottom: 0.5em;right: 0;padding: 0.25em 0;width: 5em;background-color: #66a2a1;border-radius: 5px;text-align: center;font-size: 75%;line-height: 1;color: #fff;}
.block-room-01 .data h4 small {margin-left: 1em;font-size: 40%;font-weight: 500;opacity: 0.5;}
.block-room-01 .data h5 {font-size: 150%;color: #006463;}
.block-room-01 .data h5 span {position: relative;border: 1px solid #006463;border-radius: 5px;margin-right: 0.5em;padding: 0.15em 0.5em 0.25em 2em;font-weight: 600;font-size: 75%;}
.block-room-01 .data h5 span::before {content: "";position: absolute;top: 50%;left: 0.25em;width: 1.5em;height: 1em;background: transparent url("../img/room/icon_guest.svg") no-repeat 50% / contain;transform: translateY(-50%);}
.block-room-01 .data h5 strong {display: inline-block;transform: translateY(0.1em);font-size: 125%;}
.block-room-01 .data h5 br {display: none;}
.block-room-01 .data h6 {border-top: 1px solid #006463;margin: 1em 0 -0.8em;padding-top: 0.8em;font-size: 100%;font-weight: 600;color: #006463;}
.block-room-01 .data ul {display: flex;flex-wrap: wrap;margin-top: 1em;}
.block-room-01 .data ul li {margin: 0.1em 1.5em 0.1em 0;white-space: nowrap;}
.block-room-01 .data .feature li {position: relative;padding-left: 1.25em;font-weight: 600;color: #006463;}
.block-room-01 .data .feature li::before {content: "";position: absolute;top: 50%;left: 0;width: 1em;height: 1em;transform: translateY(-50%);}
.block-room-01 .data .equipment li {position: relative;padding-left: 1.25em;}
.block-room-01 .data .equipment li::before {content: "";position: absolute;top: 50%;left: 0;width: 1em;height: 1em;transform: translateY(-50%);}
.block-room-01 .data .amenities li {position: relative;padding-left: 1.25em;font-size: 87.5%;}
.block-room-01 .data .amenities li::before {content: "●";position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
.block-room-01 .data .bed::before {background: transparent url("../img/room/icon_bed.svg") no-repeat 50% / contain;}
.block-room-01 .data .wifi::before {background: transparent url("../img/room/icon_wifi.svg") no-repeat 50% / contain;}
.block-room-01 .data .ac::before {background: transparent url("../img/room/icon_ac.svg") no-repeat 50% / contain;}
.block-room-01 .data .bath::before {background: transparent url("../img/room/icon_bath.svg") no-repeat 50% / contain;}
.block-room-01 .data .balcony::before {background: transparent url("../img/room/icon_balcony.svg") no-repeat 50% / contain;}
.block-room-01 .data .kitchen::before {background: transparent url("../img/room/icon_kitchen.svg") no-repeat 50% / contain;}
.block-room-01 .data .ruby {border-top: 1px solid #006463;margin: 1em 0 0;padding-top: 0.8em;font-size: 87.5%;}
.block-room-01 .data .ruby strong {font-weight: 600;color: #006463;}
.block-room-01 .container {width: calc(100% - 4em);max-width: 1200px;margin: 0 auto;padding: 5em 0;}
.block-room-01 .cv a {position: relative;background: #006463 url(../img/common/bg03_pc.webp) no-repeat 0 0 / cover;background-blend-mode: soft-light;margin-top: 2em;padding: 1em;text-align: center;font-weight: 600;font-size: 125%;color: #fff;}
.block-room-01 .cv a small {margin-left: 1em;font-size: 75%;opacity: 0.6;}
.block-room-01 .cv a::after {content: '';position: absolute;bottom: calc(50% - 2px);right: 1em;width: 2em;height: 0.8em;background: url("../img/common/icon_arrow.svg") no-repeat 100% 100%/contain;filter: brightness(0) invert(1);transition: 0.4s;}
.block-room-01 .swiper-wrapper::before {content: attr(data-caps)"";position: absolute;bottom: 0;right: 0;z-index: 2;padding: 1em;line-height: 1;font-weight: 600;color: #fff;}
.block-room-01 .swiper-pagination-bullet {background-color: #fff;}
.block-room-01 .swiper-pagination-bullet-active {background-color: #fff;}
.block-room-01 .caps {margin-top: 0.5em;font-size: 87.5%;}

.block-room-02 h3 {margin-bottom: 1em;padding: 0.5em;background: cadetblue url("../img/common/bg03_pc.webp") no-repeat 100% 0 / cover;background-blend-mode: luminosity;border-radius: 5px;text-align: center;font-weight: 600;font-size: 150%;color: #fff;}
.block-room-02 h4 {margin: 1em 0 0.25em;padding-bottom: 0.25em;border-bottom: 1px solid #006463;font-weight: 600;font-size: 125%;color: #006463;}
.block-room-02 ul li strong {font-weight: 500;font-size: 125%;color: #006463;}
.block-room-02 .container {width: calc(100% - 4em);max-width: 1200px;margin: 0 auto;padding: 5em 0;}
.block-room-02 .caps {margin-top: 0.5em;font-size: 87.5%;}
.block-room-02 .column > div p span {display: inline-block;white-space: nowrap;}

@media only screen and (min-width: 768px) {
  .block-room-01 article {background-color: #fff;border-radius: 1em;box-shadow: 0 0 1em rgb(0 0 0 / 10%);padding: 2em;}
  .block-room-01 article + article {margin-top: 2em;}
  .block-room-01 .column {display: flex;justify-content: space-between;gap: 2em;}
  .block-room-01 .column > div {width: calc(50% - 1em);}
  .block-room-01 .column .swiper {height: 100%;}
  .block-room-01 .column .swiper img {object-fit: cover;height: 100%;}

  .block-room-02 table {width: 100%;border: 1px solid #006463;font-size: 125%;}
  .block-room-02 table th,
  .block-room-02 table td {padding: 1.5em 0;width: 1%;font-weight: 600;text-align: center;}
  .block-room-02 table td:nth-child(n+2) {border-left: 1px solid #006463;}
  .block-room-02 table tr:nth-child(even) td {background-color: #e5efef;}
  .block-room-02 table thead tr th {background: #006463;font-weight: 800;color: #fff;;vertical-align: middle;}
  .block-room-02 table thead tr td {background: #66a2a1;font-weight: 800;color: #fff;vertical-align: middle;}
  .block-room-02 table thead tr td small {display: block;font-weight: 500;font-size: 75%;}
  .block-room-02 table tbody tr td:nth-child(1) {vertical-align: middle;color: #006463;}
  .block-room-02 table tbody tr td:nth-child(1) small {display: block;font-weight: 500;font-size: 75%;}
  .block-room-02 table tbody tr td:nth-child(n+2) {vertical-align: middle;font-weight: 500;font-size: 125%;}
  .block-room-02 .column {display: flex;justify-content: space-between;gap: 2em;margin-top: 2em;}
  .block-room-02 .column > div {width: calc(50% - 1em);}
}
@media only screen and (min-width: 901px) and (max-width: 1150px) {
  .block-room-01 .data h4 small {position: absolute;right: 100%;top: 1em;z-index: 2;opacity: 1;margin-right: 2.5em;font-size: 60%;letter-spacing: 0.05em;white-space: nowrap;color: #fff;}
  .block-room-01 .data h5 br {display: block;}
  .block-room-01 .column .swiper {height: calc(100% - 5em);}
  .block-room-01 .cv a {width: calc(50% - 0.8em);margin-top: -3.5em;}
}
@media only screen and (max-width: 900px) {
  .block-room-01 .column {display: block;}
  .block-room-01 .column > div {width: 100%;}
  .block-room-01 .column .swiper {margin-bottom: 2em;}
}
@media only screen and (max-width: 767px) {
  .block-room-01 {background: aliceblue;}
  .block-room-01 h3 {font-size: 125%;}
  .block-room-01 article:nth-child(odd) {position: relative;z-index: 2;margin: 3em 0;padding: 3em 0;}
  .block-room-01 article:nth-child(odd)::after {content: "";position: absolute;top: 0;left: -2em;right: -2em;bottom: 0;background-color: #fff;z-index: -1;}
  .block-room-01 .data h4 small {position: absolute;top: -1.25em;left: 0;margin-left: 0.25em;}
  .block-room-01 .data h4 span {padding: 0.6em 0;}
  .block-room-01 .data h5 {text-align: center;}
  .block-room-01 .data h5 span {display: block;margin-right: 0;}

  .block-room-02 h3 {font-size: 125%;}
  .block-room-02 table,
  .block-room-02 table tbody,
  .block-room-02 table tr,
  .block-room-02 table th,
  .block-room-02 table td {display: block;}
  .block-room-02 table thead {display: none;}
  .block-room-02 table tbody td {padding: 0 0 1.5em;text-align: center;}
  .block-room-02 table tbody td::before {content: attr(data-title)"";display: block;background-color: #006463;margin-bottom: 0.5em;padding: 0.5em;border-radius: 5px;font-weight: 600;font-size: 100%;text-align: center;color: #fff;}
  .block-room-02 table tbody td:nth-child(n+2)::before {background-color: #66a2a1;}
  .block-room-02 table tbody tr {padding: 1em;border-radius: 5px;box-shadow: 0 0 1em rgb(0 0 0 / 10%);}
  .block-room-02 table tbody tr + tr {margin-top: 1.5em;}
  .block-room-02 .column > div {margin-top: 1.5em;}
}
@media only screen and (max-width: 767px) and (orientation: landscape) {}