@charset "UTF-8";

.bg_area01 {
  background: url(../images/top_bg01.png) no-repeat center top / cover;
  margin: 0px 0 0px;
  position: relative;
  padding: 0 0 120px;
}

.bg_area01::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 300px;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.bg_area02 {
  background: url(../images/top_bg03.png) no-repeat center top / cover;
  padding: 120px 0 166px;
}

.bg_area02::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  z-index: 1;
}

.bg_area02::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  z-index: 1;
}

.bg_area03 {
  background: url(../images/top_bg04.png) no-repeat center top / cover;
  padding: 30px 0 80px;
}

.bg_area03::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 160px;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  z-index: 0;
}

.bg_area04 {
  padding: 80px 0;
}

.bg_area05 {
  background: url(../images/top_bg05.png) no-repeat center top / cover;
  padding: 80px 0 120px;
  position: relative;
}

.base_style_wrap .bg_area05::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 130px;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.head_area .head_imgarea {
  display: flex;
  margin-top: 70px;
  position: relative;
  padding-bottom: clamp(140px, 17.70834vw, 320px);
  gap: 40px;
}

.base_style_wrap .head_imgarea ul {
  display: flex;
  gap: 24px;
  max-width: 737px;
}

.head_area .logo_img {
  max-width: 558px;
  margin-left: clamp(-160px, -8.33334vw, 0px);
}

.head_imgarea::after {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background: url(../images/logo.svg) no-repeat center / contain;
  height: 173px;
  width: 129px;
  z-index: 3;
}

/*エリア共通*/
.head_imgarea .head_text {
  width: 34.2%;
  padding-top: min(20.87629vw, 405px);
  position: relative;
}

.head_imgarea .head_text::after {
  content: "";
  position: absolute;
  background: url(../images/concept_logo.svg) no-repeat center / contain;
  top: -20px;
  width: min(30.9375vw, 594px);
  height: min(21.09375vw, 405px);
  right: 0;
}

.head_text h2 {
  font-size: 20px;
  font-family: "TsukuBRdGothic-Regular", "Zen Maru Gothic", sans-serif;
}

.head_text p {
  margin-top: 30px;
  white-space: nowrap;
}

.area_title .no_text,
.area_title h2 {
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.1em;
}

.base_style_wrap .contents_line {
  position: relative;
  padding-top: 128px;
}

.contents_line::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  width: 1px;
  height: 128px;
  background: #00479d;
  z-index: 1;
}

.bg_area02::before {
  top: 0px;
}

.base_style_wrap .area_title {
  text-align: center;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.area_title .no_text {
  font-size: 65px;
  color: #fff;
  -webkit-text-stroke: 2px #00479d;
  text-stroke: 2px #00479d;
}

.area_title h2 {
  font-size: 65px;
  position: relative;
  text-decoration: underline;
  text-decoration-color: #f5f5ed;
  text-decoration-thickness: 20px;
  text-underline-offset: -10px;
  text-decoration-skip-ink: none;
}

.area_title h2 span {
  font-size: 18px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  font-weight: bold;
}

section .images {
  display: flex;
  justify-content: center;
  margin: 40px 0 0;
}

.area_title p.title_text {
  margin-top: 16px;
  font-size: 18px;
}

/* ROOM */
.room_area {
  position: relative;
  width: 1190px;
  /* padding-left: 240px; */
  margin: 0px auto 0;
  box-sizing: border-box;
  z-index: 1;
}

.room_area .area_title {
  /* padding-right: 240px; */
  margin-bottom: 30px;
}

.room_area .room_btn {
  margin: 40px 180px 0 auto;
  width: 230px;
  text-align: center;
}

.room_area .room_btn a {
  position: relative;
  background: #00479d;
  border-radius: 36px;
  color: #ffffff;
  padding: 10px;
  font-size: 16px;
  text-decoration: none;
  display: flex;
  justify-content: space-around;
  transition: 0.3s ease-in-out;
  font-family: "Oswald", sans-serif;
}

.room_area .room_btn a:before {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  right: -2.2em;
  transform: translateY(calc(-50% - 1px)) rotate(30deg);
  width: 18px;
  height: 1px;
  background-color: #00479d;
  transition: 0.3s;
}

.room_area .room_btn a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2em;
  transform: translateY(-50%);
  width: 60px;
  height: 1px;
  background-color: #00479d;
  transition: 0.3s;
}

.room_area .room_btn :hover:before,
.room_area .room_btn :hover:after {
  right: -3em;
}

.room_area .room_btn a:hover {
  background: #e5ebf3;
  color: #00479d;
}

.room_container {
  position: relative;
}

.room_area .room_images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  max-width: 896px;
  background: url(../images/rooms_bg.png) no-repeat center / cover;
  margin: 0 auto;
}

.room_container .inner_text {
  text-align: center;
  background-color: #f5f5ed;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 36px;
  font-weight: bold;
}

/* checkin */
.base_style_wrap .check-in_area {
  padding: 0px 0 0px;
  position: relative;
}

.check-in_area .area_title::after {
  content: "";
  position: absolute;
  top: -76px;
  right: -194px;
  background: url(../images/icon_umigame01.png) no-repeat center / contain;
  width: 343px;
  height: 193px;
  z-index: 3;
}

.check-in_area .check_images {
  margin: 20px auto;
  max-width: 950px;
  width: 100%;
  height: 336px;
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  padding-top: 198px;
  z-index: 0;
}

.check-in_area .check_images::before {
  content: "";
  position: absolute;
  bottom: -82px;
  right: clamp(68%, 46vw, 100% - 261px);
  background: url(../images/icon_whaleshark.png) no-repeat center / contain;
  width: clamp(442px, 39.68vw, 512px);
  height: clamp(221px, 20.78vw, 291px);
  z-index: 1;
  pointer-events: none;
}

.check-in_area .check_images::after {
  content: "";
  position: absolute;
  top: -80px;
  right: clamp(-326px, -16vw, -280px);
  background: url(../images/top_area02_2.png) no-repeat center / contain;
  width: clamp(306px, 24.53vw, 406px);
  height: clamp(424px, 22.62vw, 514px);
  z-index: 3;
}

.check-in_area .check_images ul {
  display: flex;
  justify-content: center;
  gap: 64px;
}

.check-in_area .check_inner {
  padding-right: 75px;
}

.check-in_area .check_images li {
  text-align: center;
  padding: 10px 25px;
  font-size: 16px;
  background-color: #f5f5ed;
  border: 1px solid #00479d;
  border-radius: 30px;
  position: relative;
}

.check-in_area .check_images li::before {
  content: "";
  position: absolute;
  width: 146px;
  height: 146px;
  border-radius: 50%;
  z-index: -1;
  top: -120%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.check-in_area .check_images .check_01::before {
  background: url(../images/icon_umigame.svg) no-repeat center #00479d;
}

.check-in_area .check_images .check_02 {
  margin-right: 30px;
}

.check-in_area .check_images .check_02::before {
  background: url(../images/icon_front.svg) no-repeat center 30px #00479d;
}

.check-in_area .check_images .check_03::before {
  background: url(../images/icon_bed.svg) no-repeat center #00479d;
}

.check-in_area .check_images .check_01::after,
.check-in_area .check_images .check_02::after {
  content: "";
  position: absolute;
  width: 104px;
  height: 12px;
  top: -120%;
  left: 100%;
  transform: translate(0%, -50%);
}

.check-in_area .check_images .check_01::after {
  background: url(../images/arrow01.svg) no-repeat center;
}

.check-in_area .check_images .check_02::after {
  background: url(../images/arrow02.svg) no-repeat center;
  left: 84%;
}

/* facility */
.facility_area {
  position: relative;
}

.facility_area .area_title::after {
  content: "";
  position: absolute;
  background: url(../images/icon_umigame02.png) no-repeat center / contain;
  top: 40px;
  left: -232px;
  width: 343px;
  height: 193px;
  z-index: 3;
}

.facility_area .facility_box {
  display: flex;
  width: clamp(1190px, 98%, 1228px);
  margin: 64px auto 0;
  gap: 28px;
  align-items: center;
  position: relative;
}

.facility_area .lastbox {
  align-items: last baseline;
}

.facility_area .facility_box img {
  border-radius: 10px;
  margin-bottom: 28px;
}

.facility_area .lastbox::after {
  content: "";
  position: absolute;
  top: -9%;
  left: calc(100% - 246px);
  background: url(../images/icon_umigame03.png) no-repeat center / contain;
  width: clamp(218px, 28.56vw, 318px);
  height: clamp(153px, 16.13vw, 253px);
  z-index: 3;
}

.facility_area .lastbox p {
  position: relative;
}

.facility_area .lastbox p::after {
  content: "";
  position: absolute;
  top: 40px;
  right: 24px;
}

.facility_area .facility_box .box_01::after {
  background: url(../images/facility_cap01.png) no-repeat center / contain;
  width: 242px;
  height: 86px;
}

.facility_area .facility_box .box_02::after {
  background: url(../images/facility_cap02.png) no-repeat center / contain;
  width: 253px;
  height: 89px;
}

.facility_area .facility_box .box_03::after {
  background: url(../images/facility_cap03.png) no-repeat center / contain;
  width: 371px;
  height: 210px;
  top: -180px;
  right: 204px;
}

.facility_area .facility_box .box_04::after {
  background: url(../images/facility_cap04.png) no-repeat center / contain;
  width: 253px;
  height: 89px;
}

/* information */
.information_area {
  position: relative;
}

.information_area .area_title::after {
  content: "";
  position: absolute;
  background: url(../images/icon_shamisen.png) no-repeat center / contain;
  top: 0px;
  left: -210px;
  width: 157px;
  height: 281px;
  z-index: 3;
}

.information_area .infor_slider {
  margin: 64px auto 0;
  max-width: 1680px;
}

.information_area .slider_box {
  max-width: 540px;
  width: 32vw;
  margin-right: 30px;
}

.information_area .infor_textbox {
  box-sizing: border-box;
  width: 360px;
  margin: -46px 0 0px auto;
  background: #f5f5ed url(../images/room/deco01.png) no-repeat 0 0;
  padding: 36px 20px 20px 40px;
  position: relative;
}

.information_area .infor_textbox h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}

.information_area .infor_textbox ul {
  margin-top: 20px;
}

.information_area .slick-list {
  border-radius: 10px 10px 0 0;
}

/* チラつき対策 */
.information_area .slick-slide {
  height: auto !important;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

.information_area .prev-arrow {
  position: absolute;
  top: 25%;
  left: 1%;
  cursor: pointer;
  z-index: 3;
}

.information_area .next-arrow {
  position: absolute;
  top: 25%;
  right: 1%;
  cursor: pointer;
  z-index: 3;
}

/* slickの子要素の高さを揃える */
.information_area .slick-track {
  display: flex;
}

.information_area .slick-slide {
  height: auto !important;
}

.information_area .slider_box {
  display: flex;
  flex-direction: column;
}

.information_area .infor_textbox {
  flex-grow: 1;
}

/* Access */
.access_area {
  position: relative;
}

.access_area .area_title::after {
  content: "";
  position: absolute;
  background: url(../images/icon_manta.png) no-repeat center / contain;
  top: -60px;
  right: -108px;
  width: 216px;
  height: 178px;
  z-index: 3;
}

.access_area .access_images {
  margin: 40px auto;
  width: 1190px;
  padding: 18px 0 45px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}

.access_area .google_map {
  box-sizing: border-box;
  max-width: 1190px;
  width: minclamp(980px, 61.24vw, 1190px);
  margin: 50px auto;
  border: 10px #00479d solid;
}

.access_area .google_map iframe {
  width: 100%;
  height: clamp(340px, 19.58vw, 380px);
}

/* エリアの境界 */
.base_style_wrap .contents_grad::after {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  z-index: 2;
}