@charset "UTF-8";

.facilities .sub-mv {
  background: url(../image/facilities/mv@2x.webp) no-repeat center center / cover;
}

.facilities .subpage-head.ttl::after {
  background-image: url(../image/facilities/text_facilites.png);
}

.facilities .page-lead {
  margin-bottom: 0;
}

.facilities .page-lead a.underline {
  color: #167b88;
  font-weight: 500;
  text-decoration: underline;
}

.facilities .map {
  width: 100%;
  aspect-ratio: 1365 / 954;
  background: url(../image/facilities/image-map-pc-02@3x.webp) no-repeat center center / contain;
  max-width: 1366px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 80px;
  margin-top: 100px;
}

.facilities .map + .link-wrap {
  justify-content: center;
}

.facilities .step-wrap {
  display: flex;
  flex-direction: row-reverse;
  gap: 7.46%;
  flex-wrap: wrap;
  margin-right: auto;
  margin-left: auto;
  margin-top: 40px;
}

.facilities .step-wrap::before {
  flex: 0 0 100%;
}

.facilities .step-wrap + .step-wrap {
  margin-top: 60px;
}

.facilities .step-wrap .img {
  flex: 0 0 46.26%;
}

.facilities .step-wrap .text {
  flex: 0 0 46.28%;
}

.facilities .step-wrap h4 {
  margin-bottom: 20px;
  font-size: 24px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: bold;
}

.facilities .step-wrap p {
  line-height: 2;
}

.facilities .step-wrap .img {
  border-radius: 30px;
}

.facilities .checkout {
  margin-top: 80px;
}

.facilities .checkout .step-wrap {
  justify-content: flex-end;
  gap: 3.73%;
  margin-top: 40px;
}

.facilities .checkout .step-wrap .text {
  flex-basis: 50%;
}

.facilities .info {
  margin-top: 80px;
}

.facilities .info h2 {
  margin-bottom: 20px;
}

.facilities .info .inner {
  position: relative;
  top: -30px;
  padding-top: 0;
  padding-bottom: 0;
}

.facilities .info .info-area {
  grid-template: repeat(4, auto) / 532px 1fr;
  gap: 20px 6.4%;
  margin-top: 20px;
  max-width: initial;
}

.facilities .info-area + .info-area {
  margin-top: 60px;
}

.facilities .info-area:nth-of-type(2n) {
  grid-template: repeat(4, auto) / 1fr 532px;
}

.facilities .info-area:nth-of-type(2n-1) .picture {
  width: 100%;
  grid-row: 1 / 5;
  grid-column: 2/3;
}

.facilities .info .picture {
  grid-row: 1/5;
  max-width: 512px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 43px;
}

.facilities .info-area img {
  border-radius: 10px;
}

.facilities .info table {
  margin-top: -16px;
}

.facilities .info .info-area tr {
  padding-right: 10px;
}

.facilities .info table th {
  padding-right: 1em;
}

.facilities .info-area.coming-soon p {
  margin-top: 2em;
}

.facilities .info .link-wrap {
  justify-content: center;
  grid-row: 3/4;
  justify-content: flex-start;
}

.facilities .figure-area {
  margin-top: 40px;
}

/* 基本情報 */
.clock-3 {
  width: 100px;
  aspect-ratio: 100 / 100;
  background: url(../image/guestroom/icon_clock-15.svg) no-repeat center center / contain;
  margin: 0 auto;
}

.clock-10 {
  width: 100px;
  aspect-ratio: 100 / 100;
  background: url(../image/guestroom/icon_clock-10.svg) no-repeat center center / contain;
  margin: 0 auto;
}

.facilities .about p {
  line-height: 2;
}

.facilities .about table {
  margin-top: 14px;
}

.facilities .about tr {
  padding-top: 20px;
  padding-bottom: 20px;
}

.facilities .about .link-wrap {
  justify-content: center;
  margin-top: 80px;
}

.facilities .about td > span {
  display: inline-block;
  max-width: 764px;
}

/* フロント棟 */
.front .subpage-head::after {
  background-image: url(../image/facilities/text_front.png);
}

.facilities .picture-area .front-01 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background: url(../image/facilities/img_front_01.webp) no-repeat center center / cover;
}

.facilities .picture-area {
  display: grid;
  grid-template: auto auto / 58.5% 1fr 1fr;
  gap: 1.54vw;
  margin-top: 40px;
  padding-right: 20px;
}

.facilities .picture-area > .pic {
  aspect-ratio: 270 / 271;
  overflow: hidden;
}

.front-02 {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: url(../image/facilities/img_front_02.webp) no-repeat center center / cover;
}

.front-03 {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: url(../image/facilities/img_front_03.webp) no-repeat center center / cover;
}

.front-04 {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: url(../image/facilities/img_front_04.webp) no-repeat center center / cover;
}

.front-05 {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: url(../image/facilities/img_front_05.webp) no-repeat center center / cover;
}

.read-box {
  margin-top: 40px;
}

.read-box p {
  line-height: 2;
}

/* チェックイン / アウト */
.inout .subpage-head::after {
  background-image: url(../image/facilities/text_check_in_out.png);
}

.inout .column2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: 2.42%;
}

.inout .img-area {
  width: 65.59%;
}

.inout .text-area {
  width: 31.99%;
  margin-top: 0;
  padding: 30px;
}

.inout-01 {
  width: 100%;
  aspect-ratio: 896 / 548;
  background: url(../image/facilities/img_checkin_out_01.webp) no-repeat center center / cover;
}

.inout .text-area {
  max-width: 100%;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 30px;
  padding-left: 30px;
}

.inout .text-area p {
  line-height: 2;
}

/* チェックイン方法 */
.checkin .subpage-head::after {
  background-image: url(../image/facilities/text_check_in.png);
}

.checkin-01 {
  width: 100%;
  aspect-ratio: 1042 / 630;
  background: url(../image/facilities/step-1@2x.webp) no-repeat center center / contain;
}

.checkin-02 {
  width: 100%;
  aspect-ratio: 1042 / 630;
  background: url(../image/facilities/step-2@2x.webp) no-repeat center center / contain;
}

.checkin-03 {
  width: 100%;
  aspect-ratio: 1042 / 630;
  background: url(../image/facilities/step-3@2x.webp) no-repeat center center / contain;
}

.checkin-04 {
  width: 100%;
  aspect-ratio: 1042 / 630;
  background: url(../image/facilities/step-4@2x.webp) no-repeat center center / contain;
}

.checkin-05 {
  width: 100%;
  aspect-ratio: 1042 / 630;
  background: url(../image/facilities/step-5@2x.webp) no-repeat center center / contain;
}

.checkin-06 {
  width: 100%;
  aspect-ratio: 1042 / 630;
  background: url(../image/facilities/step-6@2x.webp) no-repeat center center / contain;
}

.checkin-07 {
  width: 100%;
  aspect-ratio: 1042 / 630;
  background: url(../image/facilities/step-7@2x.webp) no-repeat center center / contain;
}

/* チェックアウト方法 */
.checkout .subpage-head::after {
  background-image: url(../image/facilities/text_how_to_check_out.png);
}

.checkout-01 {
  width: 100%;
  aspect-ratio: 1042 / 630;
  background: url(../image/facilities/self-checkout@x2.webp) no-repeat center center / contain;
}

/* 共有スペース */
.info .subpage-head::after {
  background-image: url(../image/facilities/text_shared_space_information.png);
}

.info .info-01 {
  width: 100%;
  aspect-ratio: 1042 / 684;
  background: url(../image/facilities/facility-01@2x.webp) no-repeat center center / cover;
}

.info .flex-box {
  display: flex;
  gap: 0;
  justify-content: flex-start;
}

.info-02 {
  width: 100%;
  aspect-ratio: 752 / 512;
  background: url(../image/facilities/img_space_02.webp) no-repeat center center / cover;
}

.info-03 {
  width: 100%;
  aspect-ratio: 752 / 512;
  background: url(../image/facilities/img_space_03.webp) no-repeat center center / cover;
}

.info-04 {
  width: 100%;
  aspect-ratio: 752 / 512;
  background: url(../image/facilities/img_space_04.webp) no-repeat center center / cover;
}

/* bbq */
#bbq .subpage-head::after {
  background-image: url(../image/facilities/text_barbecue_information.png);
}

#bbq .bbq-01 {
  width: 100%;
  aspect-ratio: 1042 / 684;
  background: url(../image/facilities/facility-02@2x.webp) no-repeat center center / cover;
}

#bbq .flex-box {
  margin-top: 20px;
}

.facilities .info .link-wrap {
  grid-column: 3 / 2;
}

#bbq .info-area .picture {
  margin-top: 0;
  grid-row: 1/5;
  grid-column: 1 / 2;
}

.bbq-02 {
  width: 100%;
  aspect-ratio: 752 / 512;
  background: url(../image/facilities/img_bbq_02.webp) no-repeat center center / cover;
}

.bbq-03 {
  width: 100%;
  aspect-ratio: 752 / 512;
  background: url(../image/facilities/img_bbq_03.webp) no-repeat center center / cover;
}

.bbq-04 {
  width: 100%;
  aspect-ratio: 752 / 512;
  background: url(../image/facilities/img_bbq_04.webp) no-repeat center center / cover;
}

/* その他施設情報 */
.other-facility .subpage-head::after {
  background-image: url(../image/facilities/text_other_facility_information.png);
}

.other-facility .column2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: 2.42%;
}

.other-facility .img-area {
  width: 65.59%;
}

.other-facility .text-area {
  width: 31.99%;
  margin-top: 0;
  padding: 30px;
}

.other-01 {
  width: 100%;
  aspect-ratio: 1042 / 684;
  background: url(../image/facilities/img_other_facility_01.webp) no-repeat center center / cover;
}

.other-facility .column2__inner.text-area {
  max-width: 100%;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 30px;
  padding-left: 30px;
}

.other-facility .column2__inner.text-area p {
  line-height: 2;
}

/* マリン体験 */
.marine-experience .subpage-head::after {
  margin: 30px auto;
  background-image: url(../image/facilities/text_marine_experience.png);
}

.marine-experience .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.marine-experience .inner {
  margin-top: 40px;
}

.marine-experience .grid-02 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 80px;
  align-items: center;
  padding-right: 20px;
}

.marine-experience .grid-02 .grid__text {
  max-width: 100%;
  order: 3;
  grid-column: auto;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 40px;
  padding: 30px 60px 30px 30px;
}

.marine-experience .grid-02 picture:nth-of-type(1) {
  order: 1;
}
.marine-experience .grid-02 picture:nth-of-type(2) {
  order: 2;
}

.marine-experience p {
  line-height: 2;
}

.marine-01 {
  width: 100%;
  aspect-ratio: 912 / 600;
  background: url(../image/facilities/img_marine_01.webp) no-repeat center center / cover;
}

.marine-02 {
  width: 100%;
  aspect-ratio: 912 / 600;
  background: url(../image/facilities/img_marine_02.webp) no-repeat center center / cover;
}

.marine-03 {
  width: 100%;
  aspect-ratio: 912 / 600;
  background: url(../image/facilities/img_marine_03.webp) no-repeat center center / cover;
}

.marine-04 {
  width: 100%;
  aspect-ratio: 912 / 600;
  background: url(../image/facilities/img_marine_04.webp) no-repeat center center / cover;
}

.marine-05 {
  width: 100%;
  aspect-ratio: 912 / 600;
  background: url(../image/facilities/img_marine_05.webp) no-repeat center center / cover;
}

.marine-06 {
  width: 100%;
  aspect-ratio: 912 / 600;
  background: url(../image/facilities/img_marine_06.webp) no-repeat center center / cover;
}

/* リバーサイドエリアでの体験 */
.riverside-experience .subpage-head {
  font-size: 40px;
  padding: 0;
}

.riverside-experience .subpage-head span {
  font-size: 16px;
}

.riverside-experience .subpage-head::after {
  background-image: url(../image/facilities/text_marine_experience.png);
}

.marine-07 {
  width: 100%;
  aspect-ratio: 960 / 680;
  background: url(../image/facilities/img_marine_07.webp) no-repeat center center / cover;
}

.marine-08 {
  width: 100%;
  aspect-ratio: 960 / 680;
  background: url(../image/facilities/img_marine_08.webp) no-repeat center center / cover;
}

/* 東村Travel Pay */
.travel-pay {
  margin-top: 80px;
}

.travel-pay .grid {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  grid-template-rows: auto auto;
  grid-column-gap: 20px;
  grid-row-gap: 0px;
  align-items: stretch;
}

.travel-pay .grid .picture {
  margin-bottom: 20px;
}

.travel-pay .grid .picture:nth-of-type(1) {
  grid-area: 1 / 1 / 2 / 2;
}

.travel-pay .grid .picture:nth-of-type(2) {
  grid-area: 1 / 2 / 2 / 3;
}

.travel-pay .grid .picture:nth-of-type(3) {
  grid-area: 2 / 1 / 3 / 3;
}

.facilities .travel-pay {
  padding-bottom: 80px;
}

.travel-01 {
  width: 100%;
  aspect-ratio: 462 / 306;
  background: url(../image/facilities/img_travel_pay_01.png) no-repeat center center / cover;
}

.travel-02 {
  width: 100%;
  aspect-ratio: 648 / 286;
  background: url(../image/facilities/img_travel_pay_02.png) no-repeat center center / contain;
}

.travel-03 {
  width: 100%;
  aspect-ratio: 1126 / 377;
  background: url(../image/facilities/img_travel_pay_03.png) no-repeat center center / contain;
}