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

// file name  :  roomplan.css
// style info :  スタイル指定
=================================================================== */

/* -----------------------------------------------------
planDetailWrap
----------------------------------------------------- */
.layoutpdf {
  text-align: center;
  padding: 0 15px;
}

.layoutpdf img {
  max-width: 1000px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .planDetailWrap {
    margin-bottom: 120px;
  }
}

/* -----------------------------------------------------
equipmentlWrap
----------------------------------------------------- */
.equipmentWrap .ttl {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e5e5e5;
  font-size: 36px;
  font-family: "Bellefair", serif !important;
  font-weight: 400;
}

.equipmentWrap .icnWrap {
  margin-bottom: 5px;
  padding: 15px;
  background: #eeefef;
  text-align: center;
}

.equipmentWrap .icnWrap + p {
  font-size: 13px;
  text-align: center;
}

/* -----------------------------------------------------
slider
----------------------------------------------------- */
#roomplanPage .linkTab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  margin-top: 100px;
}

#roomplanPage .linkTab li a {
  display: block;
  width: 240px;
  font-size: 30px;
  text-align: center;
  color: #006655;
  font-weight: normal;
  position: relative;
}

#roomplanPage .linkTab li a::after {
  content: " ";
  display: block;
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: auto;
  width: 240px;
  height: 2px;
  background: #eeeeee;
  transition: 0.2s;
}

#roomplanPage .linkTab li a:hover::after {
  background: #006655;
}

@media screen and (max-width: 767px) {
  #roomplanPage .linkTab {
    flex-direction: column;
    align-items: center;
    gap: 50px;
    margin-top: 50px;
  }

  #roomplanPage .linkTab li a {
    font-size: 24px;
  }
}

#roomplanPage .contents .slider {
  position: relative;
  /* インナー幅から片側をはみ出させる */
  /* width: calc(100% + (80vw - 100%) / 2); */
}

#roomplanPage .contents .slider img {
  text-align: center;
  margin: 0 auto;
}

#roomplanPage .slick-prev:before,
#roomplanPage .slick-next:before {
  font-family: unset;
  z-index: 999;
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 20px;
  border-bottom: 1px solid #333;
  border-width: 0 1px 1px 0;
  transform-origin: center;
  z-index: 9999;
  cursor: pointer;
}

#roomplanPage .slick-prev:before {
  left: -80px;
}

#roomplanPage .slick-prev:after,
#roomplanPage .slick-next:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  height: 20px;
}

#roomplanPage .slick-prev:after {
  border-left: 1px solid #333;
  left: -80px;
  transform-origin: bottom left;
  transform: rotate(45deg);
}

#roomplanPage .slick-next:after {
  border-right: 1px solid #333;
  left: 110px;
  transform-origin: bottom right;
  transform: rotate(-45deg);
}

@media screen and (max-width: 1400px) {
  #roomplanPage .slick-prev {
    top: unset;
    bottom: -30px;
    left: 100px;
  }
  #roomplanPage .slick-next {
    top: unset;
    bottom: -30px;
    right: 100px;
  }
}

#roomplanPage .slick-list {
  padding: 20px 0;
}

#roomplanPage .planDetailWrap h3 {
  padding-bottom: 15px;
  border-bottom: 3px solid #eeeeee;
  font-size: 18px;
  font-weight: 400;
}

.pageCaption {
  margin: 50px 0;
  padding: 0;
}

@media screen and (max-width: 1200px) {
  .pageCaption {
    margin: 100px 0;
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .equipmentWrap .ttl {
    font-size: 30px;
  }

  .pageCaption {
    margin: 50px 0;
    padding: 0;
  }
}

@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 991px) {
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 420px) {
}

/* -----------------------------------------------------
modal
----------------------------------------------------- */
/* モーダル・リスト共通 */
.modal_common .type,
.modal_common .ldk {
  margin-bottom: 10px;
  font-size: 24px;
  font-family: "Bellefair", serif !important;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .modal_common .ldk.ex {
    font-size: 3vw;
  }
}
.modal_common .type small {
  font-size: 0.5em;
}
.modal_common .type.ex small {
  letter-spacing: -0.05em;
}

.modal_common .type {
  padding-bottom: 10px;
  border-bottom: 2px solid #e5e5e5;
}

.modal_common .type span {
  font-size: 45px;
}

.modal_common .ldk span {
  font-size: 36px;
}

.modal_common .ldk span.small {
  font-size: 18px;
}

.modal_common .area {
  margin-bottom: 10px;
  font-size: 14px;
  font-family: "Bellefair", serif !important;
  font-weight: 300;
}

.modal_common .area span {
  font-size: 24px;
}

.modal_common .area span.big {
  font-size: 36px;
}

/* 共通ボタン */
.modal_btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  width: 90%;
  margin: 20px auto 0;
}

.modal_btn li {
  width: 100%;
  text-align: center;
  background: #ccc;
}

.modal_btn li a {
  display: block;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  font-family: YakuHanMP, "Noto Serif JP", "游明朝", YuMincho, "HG明朝B", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.modal_btn .vacant {
  background: #006655;
}

.modal_btn .layout {
  background: #4d4d4d;
}

.modal_btn .virtual {
  background: #262626;
  display: none;
}

/* リストのみ */
.list_box {
  display: block;
  padding: 40px 30px;
  background: #fff;
  box-shadow: 0px 0px 5px 0px #c9c9c9;
  transition: 0.3s all ease-in-out;
  position: relative;
  cursor: pointer;
}

.list_box:hover {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  transform: scale(0.97);
}

.list_box .ldk {
  position: absolute;
  top: 50px;
  right: 30px;
}
.list_box .ldk.ex {
  font-size: 0.8em;
}
@media screen and (max-width: 1200px) {
  .list_box .ldk.ex {
    font-size: 1em;
  }
}

@media screen and (max-width: 991px) {
  .list_box .ldk.ex {
    font-size: 0.5em;
  }
}

@media screen and (max-width: 767px) {
  .list_box .ldk.ex {
    font-size: 3vw;
  }
}

.list_box figure img {
  width: auto;
  max-height: 250px;
  margin-bottom: 100px;
}

.list_box .modal_btn {
  flex-direction: column;
  align-items: center;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .list_box figure img {
    max-height: 50vh;
  }
}

/* モーダルのみ */
.modal_bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 88888;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal_box {
  position: fixed;
  display: none;
  max-width: 1000px;
  width: 100%;
  height: 80%;
  margin: 0;
  padding: 20px 20px;
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  overflow-y: scroll;
}

.modal_box .inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal_box .ldk {
  display: inline-block;
  margin-right: 10px;
}

.modal_box .area {
  display: inline-block;
}

.modal_box figure img {
  width: auto;
  max-height: 500px;
  height: 100%;
}

.modal_box .modal_btn {
  padding-bottom: 20px;
}

.modal_link .modal_close {
  position: fixed;
  top: 20px;
  right: 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.modal_link .modal_close::before,
.modal_link .modal_close::after {
  content: " ";
  width: 2px;
  height: 50px;
  position: absolute;
  background-color: #ccc;
}

.modal_link .modal_close::before {
  transform: rotate(45deg);
}

.modal_link .modal_close::after {
  transform: rotate(-45deg);
}

.modal_link .modal_prev,
.modal_link .modal_next {
  content: "";
  width: 36px;
  height: 36px;
  border-top: 2px solid #ccc;
  cursor: pointer;
}

.modal_link .modal_prev {
  position: fixed;
  top: 50%;
  left: 30px;
  border-left: 2px solid #ccc;
  transform: rotate(-45deg);
}

.modal_link .modal_next {
  position: fixed;
  top: 50%;
  right: 30px;
  border-right: 2px solid #ccc;
  transform: rotate(45deg);
}

.modal_switch {
  display: block;
  width: 50px;
  height: 50px;
}