@charset "UTF-8";

.read_wrap {
  padding: clamp(59px, 80 / 1600 * 100vw, 80px) 0;
  background: rgba(187, 266, 221, .2);
  margin-top: clamp(111px, 150 / 1600 * 100vw , 150px);
}

.read_inner {
  width: min(1406px, 96%);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: clamp(69px, 92 / 1600 * 100vw, 92px);
}

.read_text_warp {
  width: 551px;
  width: clamp(463px, 551 / 1600 * 100vw, 551px);
}

.read_heading {
  font-size: 26px;
  font-family: var(--web-font-heading-jp);
  font-weight: 500;
  color: var(--color-dark-blue);
}

.read_text {
  margin-top: 40px;
  margin-left: 1em;
}

/* .read_image_warp {
  width:  clamp(605px, 655 / 1600 * 100vw, 655px);
} */

.read_image_warp p {
  font-size: 14px;
  margin-top: 1em;
}

.read_image_warp img {
  border-radius: var(--image-radius);
}


.room_heading_bb {
  font-size: 26px;
  font-family: var(--web-font-heading-jp);
  font-weight: 500;
  text-align: center;
  padding-bottom: 27px;
  position: relative;
}

.room_heading_bb::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  background: linear-gradient(to right, var(--color-green) 0%, var(--color-green) 28.88889%, #707070 28.88889%, #707070 100%);
}

.room_type_wrap {
  padding: clamp(119px, 160 / 1600 * 100vw, 160px) 0 clamp(59px, 80 / 1600 * 100vw, 80px);
}

.room_type_inner {
  width: min(1190px, 96%);
  margin: 0 auto;
}

.tab_wrap {
  margin-top: clamp(59px, 80 / 1600 * 100vw, 80px);
}

.tab {
  display: flex;
  justify-content: space-between;
  gap: clamp(21px, 30 / 1600 * 100vw, 30px);
  text-align: center;
  border-bottom: 1px solid #C9C9C9;
  padding-bottom: 60px;
}

.tab_item {
  position: relative;
  transition: all .5s ease;
}

.tab_item:hover {
  cursor: pointer;
  opacity: .6;
}

.tab_item p {
  font-size: 20px;
  padding-bottom: 8px;
}

.tab_item .img_shadow {
  position: relative;
}
.tab_item .img_shadow::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #333;
  opacity: .8;
  transition: all .5s ease;
  border-radius: var(--image-radius);
}

.tab_item.current .img_shadow::before {
  opacity: 0;
}

.tab_item img {
  border-radius: var(--image-radius);
}

.switch_contents {
  display: none;
  /* transition: all 1s ease;
  opacity: 0;
  height: 0;
  visibility: hidden; */
}

.switch_contents.current {
  display: block;
  /* opacity: 1;
  height: auto;
  visibility: visible; */
  padding-top: 47px;
}


.room_heading_secondary {
  font-size: 26px;
  font-family: var(--web-font-heading-jp);
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}

.room_heading_secondary span {
  display: block;
  font-size: 16px;
  font-family: var(--web-font-heading-en);
  font-weight: 500;
  color: var(--color-dark-blue);
  line-height: 1.5;
}

.room_type_read {
  text-align: center;
  margin-top: 3em;
}

.room_type_detail {
  display: flex;
  justify-content: space-between;
  /* gap: 42px; */
  gap: clamp(30px, 40 / 1600 * 100vw, 40px);
  max-width: 1190px;
  border-bottom: 1px solid #C9C9C9;
  padding: 28px 0 31px;
}

.room_type_detail:first-of-type {
  margin: 50px auto 0;
  border-top: 1px solid #C9C9C9;
}

.room_type_image {
  width: 340px;
}

.room_type_image img {
  border-radius: var(--image-radius);
}

.room_type_text_wrap {
  width: calc(100% - (340px + clamp(20px, 40 / 1600 * 100vw, 40px)));
}

.room_type_detail_col2 {
  display: flex;
  justify-content: space-between;
  /* gap: 44px; */
  gap: clamp(26px, 36 / 1600 * 100vw, 40px);
  margin-top: 10px;
  min-height: calc(100% - 30px - 10px);
}

.room_type_detail_left {
  /* width: 282px; */
  /* width: calc(100% - (470px + 50 / 1600 * 100vw)); */
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 9px;
}

.room_heading_third {
  font-size: 20px;
  /* font-family: var(--web-font-heading-jp); */
  font-weight: 500;
  line-height: 1.5;
  padding-left: .5em;
  border-left: 18px solid var(--color-light-blue);
}

.room_type_detail_left p {
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.modal-button {
  display: grid;
  place-content: center;
  min-height: 28px;
  border-radius: 30px;
  transition: all .2s ease;
  background: var(--color-light-blue);
  border: none;
  color: #fff;
  width: 180px;
  margin-top: auto;
  min-height: 50px;
}
.modal-button:hover {
  background: var(--color-dark-blue);
  color: #fff;
}


/* モーダル */
.modal {
  display: none;
  position: fixed;
  z-index: 8887;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 1s ease-in-out;
}

.modal-content {
  background: #FFF;
  overflow-y: auto;
  padding: 20px 25px;
  width: min(800px, 90%);
  max-height: 650px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: show 0.6s linear 0s;
  filter: drop-shadow(0px 2px 6px #777);
  text-align: center;
}

.modal-top {
  display: inline-block;
  position: absolute;
  right: 5px;
  top: 5px;
}

.modal-close {
  background: url(../images/room/Icon_close.svg) 0 0 no-repeat;
  width: 36px;
  height: 32px;
  display: block;
}

.modal-close:hover, .modal-close:focus {
  text-decoration: none;
  cursor: pointer;
}

.modal-content img {
  width: auto;
  max-width: 100%;
}

@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.room_type_detail_right {
  width: 470px;
  /* width: min(470px, 470 / 1600 * 100vw); */
}

/* 画像アニメーション */
.img_scale {
  overflow: hidden;
  position: relative;
  margin: auto;
  width: 470px;
}

.img_scale img {
  transition: all 2s ease;
}

.img_scale img:hover {
  scale: 1.5;
}

.img_scale.std_single_courtyard img:hover {
  transform: translate(-10px, 30px);
}

.img_scale.std_double_courtyard img:hover {
  transform: translate(-10px, 30px);
}

.img_scale.dx_double_highfloor img:hover {
  transform: translate(-70px, 40px);
}

.img_scale.yukuru img:hover {
  transform: translate(-60px, 15px);
}

.img_scale.nagomi img:hover {
  transform: translate(-90px, 20px);
}

.img_scale.ikoi img:hover {
  transform: translate(-110px, 50px);
}


.amenity_wrap {
  padding: clamp(59px, 80 / 1600 * 100vw, 80px) 0;
}

.amenity_inner {
  width: min(854px, 96%);
  margin: auto;
  border: 1px solid var(--color-light-blue);
  border-radius: 10px;
  padding: 47px 50px 30px;
}

.amenity_heading {
  font-size: 26px;
  font-family: var(--web-font-heading-jp);
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}

.amenity_heading span {
  display: block;
  font-size: 16px;
  font-family: var(--web-font-heading-en);
  font-weight: 500;
  color: var(--color-dark-blue);
  line-height: 1.5;
}

.amenity_list {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 40px;
  margin-top: 30px;
}

.amenity_item {
  width: calc((100% / 5) - ((40px / 5) * 4));
  text-align: center;
  position: relative;
}

.amenity_item img {
  width: fit-content ;
}

.amenity_item p {
  font-size: 14px;
  line-height: 1.5;
  margin: 10px auto 0;
  width: max-content;
}

.amenity_item sup {
  font-size: 10px;
  vertical-align: super;
  display: inline-block;
  margin-top: -4px;
}

.amenity_item .amenity_note {
  font-size: 12px;
  line-height: 1.5;
  color: #787B7F;
  text-align: left;
  width: max-content;
  position: absolute;
  left: 50%;
  bottom: -3.5em;
  transform: translateX(-50%);
  margin-left: 1em;
  text-indent: -1em;
}

.amenity_info {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-top: 20px;
}

.icon_circle {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: var(--color-green);
  border-radius: 50%;
  margin-right: 7px;
}

.request_inner {
  width: min(854px, 96%);
  margin: auto;
  border: 1px solid var(--color-light-blue);
  border-radius: 10px;
  padding: 47px 60px 30px;
}

.request_head {
  display: flex;
  gap: 48px;
}

.request_text_wrap {
  width: 396px;
}

.request_text_wrap p {
  font-size: 14px;
  line-height: 1.75;
  margin-top: 1em;
}

.request_text_wrap .request_heading {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-green);
  line-height: 1.75;
  margin-top: 0;
}

.request_text_wrap .request_text {
  margin-left: 14px;
  margin-top: 2em;
}

.request_text_wrap .num_list {
  margin-top: 2em;
}

.request_text_wrap .num_list li,
.request_text_wrap .num_list li span {
  font-size: 14px;
}

.request_text_wrap .request_note {
  font-size: 12px;
  color: #787B7F;
  margin-left: 14px;
}
.request_text_image {
  width: 288px;
}
.request_text_image img {
  border-radius: var(--image-radius);
}

.request_foot {
  margin-top: 30px;
}

.request_foot .num_list {
  /* max-width: 600px; */
  margin: 0 auto;
  padding-left: 2em;
}

.request_foot .num_list li,
.request_foot .num_list span {
  font-size: 14px;
  line-height: 1.75;
}

.request_foot .request_text_image {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 20px;
  width: auto;
}
.request_foot .request_text_image img {
  width: fit-content;
}

.travel_type_wrap {
  margin-top: clamp(59px, 80 / 1600 * 100vw, 80px);
}
.travel_type_read {
  width: min(1920px, 100%);
  margin: clamp(59px, 80 / 1600 * 100vw, 80px) auto 0;
  padding: 80px 0 100px;
  background: url(../images/room/bg_wave.png) center bottom no-repeat;
  background-size: contain;
}
.travel_type_read_inner {
  width: min(1555px, 98%);
  display: flex;
  gap: clamp(70px, 89 / 1600 * 100vw, 89px);
}

.travel_type_image_warp {
  width: clamp(778px, 946 / 1600 * 100vw, 946px);
  /* width: min(946px, 946 / 1600 * 100vw); */
  position: relative;
}

.travel_type_image_warp img {
  border-radius: 0 10px 10px 0;
}

.travel_type_image_warp .pos_img {
  position: absolute;
  top: clamp(-63px, -63 / 1600 * 100vw, -49px);
  right: clamp(-65px, -65 / 1600 * 100vw, -48px);
  width: clamp(96px, 130 / 1600 * 100vw, 130px);
  height: clamp(96px, 130 / 1600 * 100vw, 130px);
  /* width: 143px;
  height: 128px; */
}

.travel_type_text_warp {
  width: 520px;
  width: clamp(363px, 520 / 1600 * 100vw, 520px);
}

.travel_type_reading {
  font-size: 26px;
  font-family: var(--web-font-heading-jp);
  font-weight: 500;
  color: var(--color-dark-blue);
  padding-bottom: 16px;
  position: relative;
}

.travel_type_reading::after {
  content: "";
  position: absolute;
  width: 52px;
  height: 1px;
  left: 0;
  bottom: 0;
  background: var(--color-green);
}

.travel_type_text {
  margin-top: 60px;
  margin-left: 1em;
  line-height: 2.5625;
}

.travel_type_wrap .travel_type_item:nth-of-type(even) .travel_type_read_inner {
  flex-direction: row-reverse;
  margin-left: auto;
}

.travel_type_wrap .travel_type_item:nth-of-type(even) .travel_type_image_warp img {
  border-radius: 10px 0 0 10px;
}

.travel_type_wrap .travel_type_item:nth-of-type(even) .travel_type_image_warp .pos_img {
  left: clamp(-66px, -66 / 1600 * 100vw, -49px);
}


.plan_list {
  width: min(1190px, 96%);
  margin: 0 auto;
}

.plan_item {
  display: flex;
  gap: 37px;
  padding: 50px 90px 40px 115px;
  border-bottom: 1px solid #C9C9C9;
}

.plan_item img {
  border-radius: var(--image-radius);
}

.plan_image_wrap {
  width: 329px;
  /* width: min(329px, 329 / 1600 * 100vw); */
}

.plan_text_wrap {
  flex: 1;
  /* width: 627px; */
  /* width: min(627px, 627 / 1600 * 100vw); */
}

.plan_heading_sub {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-dark-blue);
}

.plan_text {
  font-size: 14px;
  margin-left: 1.5em;
  margin-top: 1em;
}

.plan_text_wrap .button {
  margin: 30px auto 0;
}