@charset "utf-8";
/* ------------------------------------------------------------------
  roomplan top CSS

  2018/05/09 326_sakaguchi 
------------------------------------------------------------------ */
body {
  -webkit-text-size-adjust: 100%;
}

/* -------------------------------
  common
---------------------------------- */
#contents .con_roomplan .view_pc {
  display: inline-block;
}

@media screen and (max-width: 736px) {
  #contents .con_roomplan .view_pc {
    display: none;
  }
}

#contents .con_roomplan .txt_price {
  font-size: 130%;
  color:red;
  font-weight: bold;
}
#contents .con_roomplan ul li p span.txt_price_suffix {
  color:red;
  display: inline-block;
}

#contents .con_roomplan ul li p .txt_price .txt_space_price {
  margin: 0 0.2em;
}

.con_roomplan .attention {
  display: block;
  font-size: 90%;
  margin-bottom: 1em;
  text-align: right;
}

@media screen and (max-width: 1024px) {
  #contents .con_roomplan ul li p .txt_price .txt_space_price {
    display: inline-block;
    font-weight: lighter;
    transform: scale(1.3, 1);
  }
}

@media screen and (max-width: 1000px) {
  #contents .con_roomplan .txt_price {
    font-size: 2vw;
  }
}

@media screen and (max-width: 736px) {
  #contents .con_roomplan .txt_price {
    font-size: 3.8vw;
  }

  #contents .con_roomplan ul li p .txt_price .txt_space_price {
    margin: 0;
    transform: none;
  }

  #contents .con_roomplan ul li p span.txt_price_suffix {
    display: block;
    text-align: right;
    line-height: 1em;
  }

  #contents .con_roomplan .txt_center {
    display: block;
    text-align: center;
  }
}

h1 {
  margin: 0 auto 0.5%;
  max-width: 1000px;
  width: 100%;
}


.view_pc {
  display: block;
}

.view_sp {
  display: none;
}

@media screen and (max-width: 736px) {
  .view_pc {
    display: none;
  }

  .view_sp {
    display: block;
  }
}

/* -------------------------------
  .con_lead
---------------------------------- */
.wrp_lead {
  background: url("../image/bg-lead.png") repeat-x;
  background-size: 58%;
  margin-top: 0.5%;
  padding: 1% 0 0;
}

.con_lead {
  margin: 2% auto 0;
  max-width: 865px;
  overflow: hidden;
  width: 86.5%;
}

@media screen and (max-width: 736px) {
  .wrp_lead {
    background-size: 130%;
  }
  .con_lead {
    margin: 2% auto 0;
    width: 95%;
  }
}

.con_lead .box_building {
  float: left;
  margin-bottom: 3%;
  margin-left: 6%;
  width: 23%;
}

.con_lead .box_right {
  float: right;
  margin: 0 4% 3% 0;
  width: 60%;
}

.con_lead .box_right .txt_large {
  color: #2B4920;
  font-family: 'Noto Serif TC', serif;
  font-size: 175%;
  font-weight: bold;
  margin-bottom: 3.5%;
}

.con_lead .box_right p:nth-of-type(2) {
  line-height: 1.5em;
  margin-bottom: 1.5%;
  text-align: justify;
}

.con_lead .box_right p:nth-of-type(3) {
  line-height: 1.5em;
  margin-bottom: 6%;
  text-align: justify;
}

.con_lead .box_right figure {
  margin: 0 auto;
  width: 95%;
}

.con_lead .box_right figure a {
  display: block;
}

.con_lead .box_right figure a:hover {
  opacity: 0.8;
  transition: .5s;
}

.con_lead .box_right figure figcaption {
  margin: 1% auto 0;
  width: 90%;
}

@media screen and (max-width: 1000px) {
  .con_lead .box_right .txt_large {
    font-size: 2.7vw;
  }

  .con_lead .box_right figure figcaption {
    width: 95%;
  }
}

@media screen and (max-width: 736px) {
  .con_lead .box_right {
    float: none;
    margin: 0 auto 6%;
    width: 100%;
  }

  .con_lead .box_right .txt_large {
    font-size: 5.5vw;
    margin-bottom: 2%;
  }

  .con_lead .box_right figure {
    width: 95%;
  }

  .con_lead .box_right figure figcaption {
    width: 95%;
  }
}

.con_lead .box_facilities {
  background: #fff;
  border-radius: 10px;
  clear: both;
  margin: 0 auto 3%;
  padding: 2% 1%;
  width: 93%;
}

.con_lead .box_facilities .txt_large {
  color: #9c2626;
  font-family: 'Noto Serif TC', serif;
  font-size: 160%;
  font-weight: bold;
  margin-bottom: 1%;
  position: relative;
  text-align: center;
}

.con_lead .box_facilities .txt_large:after {
  background-image: -webkit-linear-gradient(left, transparent, #9c2626 25%, #9c2626 75%, transparent);
  background-image: linear-gradient(to right, transparent, #9c2626 25%, #9c2626 75%, transparent);
  background-position: center;
  background-repeat: no-repeat;
  bottom: 0;
  content: '';
  height: 1px;
  left: 0;
  margin: 0 auto;
  opacity: 1;
  position: absolute;
  right: 0;
  text-align: center;
  width: 100%;
}

.con_lead .box_facilities p:nth-of-type(2) {
  letter-spacing: -0.02em;
  margin: 0 auto;
  max-width: 675px;
  text-align: justify;
  width: 85%;
}

.con_lead .box_facilities small {
  display: block;
  font-size: 93%;
  letter-spacing: -0.02em;
  margin: 0 auto;
  max-width: 675px;
  width: 85%;
}

.con_lead .box_facilities figure {
  margin: 2% auto 0;
  width: 86.4%;
}

.con_lead .box_facilities figure a:hover {
  opacity: .8;
  transition: .5s;
}

@media screen and (max-width: 1000px) {
  .con_lead .box_facilities .txt_large {
    font-size: 2.5vw;
  }

  .con_lead .box_facilities p:nth-of-type(2) {
    width: 95%;
  }

  .con_lead .box_facilities small {
    width: 95%;
  }
}

@media screen and (max-width: 736px) {
  .con_lead .box_facilities {
    margin-bottom: 10%;
    padding: 3%;
    width: 100%;
  }

  .con_lead .box_facilities .txt_large {
    font-size: 5.5vw;
    margin-bottom: 2%;
    text-align: left;
  }

  .con_lead .box_facilities .txt_large:after {
    background-image: -webkit-linear-gradient(left, #9c2626 25%, #9c2626 75%, transparent);
    background-image: linear-gradient(to right, #9c2626 25%, #9c2626 75%, transparent);
  }

  .con_lead .box_facilities figure {
    width: 95%;
  }
}


.box_vr {
  margin: 0 auto 5%;
  width: 93%;
}

.bnr_vr {
  border: 3px solid #A08F40;
  margin: 0 auto;
  height: 157px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.bnr_vr:hover {
  opacity: 0.8;
  transition: .5s;
}

.bnr_vr iframe {
  margin-top: -140px;
}

.bnr_vr figure {
  height: 140px;
  position: absolute;
  top: 0;
}

.bnr_vr figure img {
  height: 110%;
  width: 100.5%!important;
}

.box_vr p {
  margin: 7px auto 0;
  width: 90%;
}

.bnr {
  margin: 0 auto 2%;
  text-align: center;
  width: 93%;
}

.bnr a {
  display: block;
}

.bnr a:hover {
  opacity: .8;
  transition: .5s;
}

.bnr figcaption {
  margin-top: 7px;
  text-align: center;
}
/* -------------------------------
  .con_pagenave
---------------------------------- */
.wrp_pagenavi {
  background: url("../image/bg-pagenave.png") repeat;
  background-size: 5%;
  margin-bottom: 2%;
  padding: 1% 0 2.5%;
}

.con_pagenavi {
  margin: 0 auto;
  max-width: 950px;
  overflow: hidden;
  width: 95%;
}

.con_pagenavi p {
  line-height: 1.5em;
  margin: 1% auto 2%;
  text-align: center;
  width: 100%;
}

.con_pagenavi .txt_ttl {
  font-family: 'Noto Serif TC', serif;
  font-size: 160%;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin: 0 auto;
  position: relative;
  width: 80%;
}

.con_pagenavi p.txt_ttl span {
  color: #AD1717;
  font-size: 130%;
}

.con_pagenavi p.txt_ttl:before {
  background: #84632d; /* Old browsers */
  background: -moz-linear-gradient(left, #84632d 0%, #ded099 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #84632d 0%,#ded099 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #84632d 0%,#ded099 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  content: '';
  display: inline-block;
  height: 1px;
  position: absolute;
  top: 50%;
  width: 20%;
}

.con_pagenavi p.txt_ttl:after {
  background: #84632d; /* Old browsers */
  background: -moz-linear-gradient(left, #ded099 0%, #84632d 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #ded099 0%,#84632d 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #ded099 0%,#84632d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  content: '';
  display: inline-block;
  height: 1px;
  position: absolute;
  top: 50%;
  width: 20%;
}

.con_pagenavi p.txt_ttl:before {
  left: 0;
}
.con_pagenavi p.txt_ttl:after {
  right: 0;
}

@media screen and (max-width: 1000px) {
  .con_pagenavi .txt_ttl {
    font-size: 2.7vw;
  }
}

.con_pagenavi ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.con_pagenavi ul li {
  background: #ccc;
  font-family: 'Noto Serif TC', serif;
  font-size: 130%;
  padding: 0.5% 0 2%;
  position: relative;
  text-align: center;
  width: 19.57%;
}

.con_pagenavi ul li:hover {
  opacity: .8;
  transition: .5s;
}

.con_pagenavi ul li:after {
  background: url(../image/ico-arrow.png) center center no-repeat;
  background-size: 0.4em;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 85%;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 1em;
}

@media screen and (max-width: 1000px) {
  .con_pagenavi ul li {
    font-size: 2vw;
  }
}

.con_pagenavi ul li:first-child {
  background: #3b4d89; /* Old browsers */
  background: -moz-linear-gradient(top, #3b4d89 1%, #1c2c62 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #3b4d89 1%,#1c2c62 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #3b4d89 1%,#1c2c62 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.con_pagenavi ul li:nth-child(2) {
  background: #1F5D1C; /* Old browsers */
  background: -moz-linear-gradient(top, #1F5D1C 1%, #0B3109 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1F5D1C 1%,#0B3109 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1F5D1C 1%,#0B3109 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.con_pagenavi ul li:nth-child(3) {
  background: #7A1B88; /* Old browsers */
  background: -moz-linear-gradient(top, #7A1B88 1%, #3D0B44 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #7A1B88 1%,#3D0B44 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #7A1B88 1%,#3D0B44 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.con_pagenavi ul li:nth-child(4) {
  background: #BA7424; /* Old browsers */
  background: -moz-linear-gradient(top, #BA7424 1%, #8A470C 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #BA7424 1%,#8A470C 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #BA7424 1%,#8A470C 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.con_pagenavi ul li:last-child {
  background: #B4962C; /* Old browsers */
  background: -moz-linear-gradient(top, #B4962C 1%, #8A711A 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #B4962C 1%,#8A711A 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #B4962C 1%,#8A711A 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  letter-spacing: -0.1em;
}

.con_pagenavi ul li a {
  color: #fff;
  display: block;
  text-decoration: none;
}

.con_pagenavi ul li a .txt_room_price {
  background: #fff;
  border-radius: 14px;
  color: #000;
  display: block;
  /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  font-size: 65%;
  font-weight: normal;
  letter-spacing: -0.05em;
  margin: 0 auto 5%;
  padding: 2.5% 0 2%;
  width: 93%;
}

.con_pagenavi ul li a .txt_room_price:first-of-type {
  margin: 1% auto 5%;
  padding: 2% 0;
}

.con_pagenavi ul li:last-child a .txt_room_price {
  letter-spacing: 0.01em;
  margin-top: 10%;
  padding: 6.5% 0 6%;
}

.con_pagenavi ul li a .txt_indent {
  text-indent: -0.65em;
}

.con_pagenavi ul li a .txt_room_price span {
  color: red;
}

.con_pagenavi ul li a .txt_room_price .txt_space {
  color: #000;
  margin: 0!important;
}

@media screen and (max-width: 1024px) {
  .con_pagenavi ul li a .txt_room_price .txt_space {
    margin: 0 0.2em!important;
  }
}

.con_pagenavi .box_table {
  margin: 0 auto;
  width: 95%;
}

.con_pagenavi .box_table .ttl_table {
  border-left: solid 7px #84632d;/*左線*/
  font-family: 'Noto Serif TC', serif;
  font-size: 140%;
  font-weight: bold;
  margin: 0;
  padding: 0.1em 0.5em;/*上下 左右の余白*/
  text-align: left;
}

.con_pagenavi table {
  width: 100%;
}

.con_pagenavi td,
.con_pagenavi th {
  border: 1px solid #84632d;
  border-collapse: collapse;
}

.con_pagenavi th {
  color: #fff;
  font-weight: normal;
  line-height: 1.3em;
  padding: 0.2% 0;
  vertical-align: middle;
  width: 15%;
}

.con_pagenavi tr:first-of-type th:first-of-type {
  background: #3b4d89;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.con_pagenavi tr:first-of-type th:nth-of-type(2) {
  background: #1F5D1C;
  border-right: 1px solid #fff;
}

.con_pagenavi tr:first-of-type th:nth-of-type(3) {
  background: #7A1B88;
  border-right: 1px solid #fff;
}

.con_pagenavi tr:first-of-type th:nth-of-type(4) {
  background: #BA7424;
  border-right: 1px solid #fff;
}

.con_pagenavi tr:first-of-type th:last-of-type {
  background: #B4962C;
}

.con_pagenavi td {
  background: #fff;
  overflow: hidden;
  text-align: center;
}

.con_pagenavi .tb_rw {
  background: #e4dac0;
  padding: 1% 0;
  text-align: center;
  width: 15%;
}

.con_pagenavi td .diagonal {
  border-top: 1px solid #84632d;
  transform: matrix(4, 1.1, 0, 1, 26, 2);
}

.con_pagenavi .cell_non {
  background: #84632d;
  border: none;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 130%;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}


/* -------------------------------
  .con_roomplan
---------------------------------- */
.con_roomplan {
  margin: 0 auto;
  max-width: 984px;
  width: 98.4%;
}

/* #confort */
.con_roomplan #comfort {
  margin-top: -70px;
  margin-bottom: 6%;
  padding-top: 70px;
}

.con_roomplan #comfort .ttl_grade {
  margin-bottom: 3.5%;
  position: relative;
}

.con_roomplan #comfort .ttl_grade .box_ttl {
  background: url("../image/bg-ttl-confort.png") repeat;
  padding: 1%;
  position: absolute;
  left: 3.5%;
  top: 15%;
  z-index: 1;
  width: 425px;
}

.con_roomplan #comfort .ttl_grade .box_ttl h2 {
  border: solid 1px #E3D9A8;
  -webkit-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  -moz-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  -o-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  border-image: url("../image/border.jpg") 1 stretch;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 210%;
  font-weight: normal;
  letter-spacing: 0.1em;
  padding: 1px;
  text-align: center;
}

.con_roomplan #comfort .ttl_grade .box_ttl h2 span {
  display: block;
  padding: 5%;
}

.con_roomplan #comfort .ttl_grade .box_ttl h2 span span {
  background: none;
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 60%;
  letter-spacing: 0;
  padding: 0;
}

@media screen and (max-width: 1000px) {
 .con_roomplan #comfort .ttl_grade .box_ttl {
  top: 10%;
  width: calc( 425 / 984 * 100% );
 }
}

@media screen and (max-width: 736px) {
  .con_roomplan #comfort .ttl_grade {
    margin-bottom: 7%;
  }

  .con_roomplan #comfort .ttl_grade .box_ttl {
    margin-bottom: 3%; 
    position: static;
    width: 100%;
  }
  .con_roomplan #comfort .ttl_grade .box_ttl h2 {
    font-size: 7vw;
    padding: 0;
  }
  .con_roomplan #comfort .ttl_grade .box_ttl h2 span {
    padding: 0;
  }

  .con_roomplan #comfort .ttl_grade .box_ttl h2 span span {
    font-size: 4vw;
  }

  .con_roomplan #comfort .ttl_grade img {
    display: block;
    margin: 0 auto;
    width: 95%;
  }
}

.con_roomplan #comfort h3 {
  background: #132056;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 180%;
  font-weight: normal;
  letter-spacing: 0.2em;
  margin: 0 auto 0.5em;
  max-width: 923px;
  text-align: center;
  width: 100%;
}

.con_roomplan #comfort h3 span {
  display: inline-block;
  font-size: 75%;
  padding-top: 0.6%;
  vertical-align: top;
}

.con_roomplan #comfort h3 span .txt_space {
  font-size: 100%;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 1024px) {
  .con_roomplan #comfort h3 span .txt_space {
    display: inline-block;
    font-size: 100%;
    font-weight: lighter;
    transform: scale(1.3, 1);
  }
}

@media screen and (max-width: 736px) {
  .con_roomplan #comfort h3 {
    font-size: 4.7vw;
    line-height: 1.3em;
    padding: 2% 0;
  }

  .con_roomplan #comfort h3 span {
    padding-top: 0;
  }
}

.con_roomplan #comfort .box_floor {
  max-width: 925px;
  margin: 0 auto 5%;
  overflow: hidden;
  width: 94%;
}

.con_roomplan #comfort .box_floor figure:first-of-type {
  float: left;
  margin-left: 10%;
  width: 17%;
}

.con_roomplan #comfort .box_floor figure:last-of-type {
  float: right;
  margin-right: 6%;
  margin-top: 1%;
  width: 60.43%;
}

@media screen and (max-width: 736px) {
  .con_roomplan #comfort .box_floor {
    width: 98%;
  }
}

.con_roomplan #comfort .box_plan {
  max-width: 925px;
  margin: 0 auto;
  width: 94%;
}

.con_roomplan #comfort ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 925px;
  overflow: hidden;
}

.con_roomplan #comfort ul li {
  background: #fff;
  border: 1px solid #BCC4DE;
  margin: 0 0 2em 0;
  padding: 0.5em;
  width: 32.43%;
}

.con_roomplan #comfort ul li figure {
  box-shadow:0px 1px 6px 0px #a3a3a3;
  position: relative;
}

.con_roomplan #comfort ul li figure a {
  display: block;
}

.con_roomplan #comfort ul li figure:after {
  bottom: -1px;
  content: url("../image/ico_mag_glass_index.png");
  display: block;
  height: 25px;
  position: absolute;
  right: 0;
  width: 25px;
}

.con_roomplan #comfort ul li figure img:nth-of-type(2) {
    position: absolute;
    right: 0;
    bottom: 0;
}

.con_roomplan #comfort ul li figure:hover {
  opacity: 0.8;
  transition: .5s;
}

.con_roomplan #comfort ul li h4 {
  color: #000;
  border-bottom: 1px solid #BCC4DE;
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 315%;
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 0.9em;
  margin-bottom: 3%;
  padding-bottom: 1%;
  text-align: center;
}

.con_roomplan #comfort ul li h4 span {
  font-size: 60%;
}

.con_roomplan #comfort ul li h4 .txt_madori {
  font-family: 'Noto Serif TC', serif;
  font-size: 38%;
  margin-right: 0.25em;
}

.con_roomplan #comfort ul li h4 .icon {
  align-items: flex-start;
  display: flex;
  margin: 0.3em auto 0;
  width: 9.66%;
}

@media screen and (max-width: 1000px) {
  .con_roomplan #comfort ul li h4 {
    font-size: 5vw;
  }

  .con_roomplan #comfort ul li h4 span {
    font-size: 4vw;
  }

  .con_roomplan #comfort ul li h4 .txt_madori {
    font-size: 2vw;
  }
}

.con_roomplan #comfort ul li p {
  line-height: 1.7em;
  margin: 0 0.5em 3%;
}

.con_roomplan #comfort ul li p .txt_serif {
  display: inline-block;
  font-family: 'Noto Serif TC', serif;
  font-size: 175%;
  margin-right: 1em;
}

@media screen and (max-width: 1000px) {
  .con_roomplan #comfort ul li p {
    font-size: 1.7vw;
    padding: 3% 0;
  }
  .con_roomplan #comfort ul li p .txt_serif {
    display: block;
    font-size: 3vw;
    margin-bottom: 1%;
  }
}

@media screen and (max-width: 736px) {
  .con_roomplan #comfort .box_plan {
    margin: 0 auto;
    width: 98%;
  }

  .con_roomplan #comfort ul {
    width: 98%;
  }

  .con_roomplan #comfort ul li {
    width: 49%;
  }

  .con_roomplan #comfort ul li h4 {
    font-size: 10vw;
  }

  .con_roomplan #comfort ul li h4 span {
    font-size: 6vw;
  }

  .con_roomplan #comfort ul li h4 .txt_madori {
    font-size: 4vw;
  }

  .con_roomplan #comfort ul li h4 .icon {
    width: 13%;
  }

  .con_roomplan #comfort ul li p {
    font-size: 3.5vw;
  }

  .con_roomplan #comfort ul li p .txt_serif {
    display: block;
    font-size: 6vw;
  }
}

/* #deluxe */
.con_roomplan #deluxe {
  margin-top: -70px;
  margin-bottom: 6%;
  padding-top: 70px;
}

.con_roomplan #deluxe .ttl_grade {
  margin-bottom: 3.5%;
  position: relative;
}

.con_roomplan #deluxe .ttl_grade .box_ttl {
  background: url("../image/bg-ttl-deluxe.png") repeat;
  left: 3.5%;
  padding: 1%;
  position: absolute;
  top: 15%;
  z-index: 1;
  width: 425px;
}

.con_roomplan #deluxe .ttl_grade .box_ttl h2 {
  border: solid 1px #E3D9A8;
  -webkit-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  -moz-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  -o-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  border-image: url("../image/border.jpg") 1 stretch;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 210%;
  font-weight: normal;
  letter-spacing: 0.1em;
  padding: 1px;
  text-align: center;
}

.con_roomplan #deluxe .ttl_grade .box_ttl h2 span {
  display: block;
  padding: 5%;
}

.con_roomplan #deluxe .ttl_grade .box_ttl h2 span span {
  background: none;
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 60%;
  letter-spacing: 0;
  padding: 0;
}

@media screen and (max-width: 1000px) {
 .con_roomplan #deluxe .ttl_grade .box_ttl {
  top: 10%;
  width: calc( 425 / 984 * 100% );
 }
}

@media screen and (max-width: 736px) {
  .con_roomplan #deluxe .ttl_grade {
    margin-bottom: 7%;
  }

  .con_roomplan #deluxe .ttl_grade .box_ttl {
    margin-bottom: 3%; 
    position: static;
    width: 100%;
  }
  .con_roomplan #deluxe .ttl_grade .box_ttl h2 {
    font-size: 7vw;
    padding: 0;
  }
  .con_roomplan #deluxe .ttl_grade .box_ttl h2 span {
    padding: 0;
  }

  .con_roomplan #deluxe .ttl_grade .box_ttl h2 span span {
    font-size: 4vw;
  }

  .con_roomplan #deluxe .ttl_grade img {
    display: block;
    margin: 0 auto;
    width: 95%;
  }
}

.con_roomplan #deluxe h3 {
  background: #0B300A;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 180%;
  font-weight: normal;
  letter-spacing: 0.2em;
  margin: 0 auto 0.5em;
  max-width: 923px;
  text-align: center;
  width: 100%;
}

.con_roomplan #deluxe h3 span {
  display: inline-block;
  font-size: 75%;
  padding-top: 0.6%;
  vertical-align: top;
}

.con_roomplan #deluxe h3 span .txt_space {
  font-size: 100%;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 1024px) {
  .con_roomplan #deluxe h3 span .txt_space {
    display: inline-block;
    font-size: 100%;
    font-weight: lighter;
    transform: scale(1.3, 1);
  }
}

@media screen and (max-width: 736px) {
  .con_roomplan #deluxe h3 {
    font-size: 4.7vw;
    line-height: 1.3em;
    padding: 2% 0;
  }

  .con_roomplan #deluxe h3 span {
    padding-top: 0;
  }
}

.con_roomplan #deluxe .box_floor {
  max-width: 925px;
  margin: 0 auto 5%;
  overflow: hidden;
  width: 94%;
}

.con_roomplan #deluxe .box_floor figure:first-of-type {
  float: left;
  margin-left: 10%;
  width: 17%;
}

.con_roomplan #deluxe .box_floor figure:last-of-type {
  float: right;
  margin-right: 6%;
  margin-top: 1%;
  width: 60.43%;
}

@media screen and (max-width: 736px) {
  .con_roomplan #deluxe .box_floor {
    width: 98%;
  }
}

.con_roomplan #deluxe .box_plan {
  max-width: 925px;
  margin: 0 auto;
  width: 94%;
}

.con_roomplan #deluxe ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 925px;
  overflow: hidden;
}

.con_roomplan #deluxe ul li {
  background: #fff;
  border: 1px solid #C1D4C4;
  margin: 0 0 2em 0;
  padding: 0.5em;
  width: 32.43%;
}

.con_roomplan #deluxe ul li figure {
  box-shadow:0px 1px 6px 0px #a3a3a3;
  position: relative;
}

.con_roomplan #deluxe ul li figure a {
  display: block;
}

.con_roomplan #deluxe ul li figure:after {
  bottom: 0;
  content: url("../image/ico_mag_glass_index.png");
  display: block;
  height: 25px;
  position: absolute;
  right: 0;
  width: 25px;
}

.con_roomplan #deluxe ul li figure img:nth-of-type(2) {
    position: absolute;
    right: 0;
    bottom: 0;
}

.con_roomplan #deluxe ul li figure:hover {
  opacity: 0.8;
  transition: .5s;
}

.con_roomplan #deluxe ul li h4 {
  color: #000;
  border-bottom: 1px solid #C1D4C4;
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 315%;
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 0.9em;
  margin-bottom: 3%;
  padding-bottom: 1%;
  text-align: center;
}

.con_roomplan #deluxe ul li h4 span {
  font-size: 70%;
}

.con_roomplan #deluxe ul li h4 .txt_madori {
  font-family: 'Noto Serif TC', serif;
  font-size: 38%;
  margin-right: 0.25em;
}

.con_roomplan #deluxe ul li h4 .icon {
  display: block;
  margin: 0 auto 2%;
  width: 9.66%;
}

@media screen and (max-width: 1000px) {
  .con_roomplan #deluxe ul li h4 {
    font-size: 5vw;
  }

  .con_roomplan #deluxe ul li h4 span {
    font-size: 4vw;
  }

  .con_roomplan #deluxe ul li h4 .txt_madori {
    font-size: 2vw;
  }
}

.con_roomplan #deluxe ul li p {
  margin: 0 0.5em 3%;
  line-height: 1.7em;
}

.con_roomplan #deluxe ul li p .txt_serif {
  display: inline-block;
  font-family: 'Noto Serif TC', serif;
  font-size: 175%;
  margin-right: 1em;
}

@media screen and (max-width: 1000px) {
  .con_roomplan #deluxe ul li p {
    font-size: 1.7vw;
    padding: 3% 0;
  }
  .con_roomplan #deluxe ul li p .txt_serif {
    display: block;
    font-size: 3vw;
    margin-bottom: 1%;
  }
}

@media screen and (max-width: 736px) {
  .con_roomplan #deluxe .box_plan {
    margin: 0 auto;
    width: 98%;
  }

  .con_roomplan #deluxe ul {
    width: 98%;
  }

  .con_roomplan #deluxe ul li {
    width: 49%;
  }

  .con_roomplan #deluxe ul li h4 {
    font-size: 10vw;
  }

  .con_roomplan #deluxe ul li h4 span {
    font-size: 6vw;
  }

  .con_roomplan #deluxe ul li h4 .txt_madori {
    font-size: 4vw;
  }

  .con_roomplan #deluxe ul li h4 .icon {
    width: 13%;
  }

  .con_roomplan #deluxe ul li p {
    font-size: 3.5vw;
    line-height: 1.5em;
  }

  .con_roomplan #deluxe ul li p .txt_serif {
    display: block;
    font-size: 6vw;
  }
}


/* #high_deluxe */
.con_roomplan #high_deluxe {
  margin-top: -70px;
  margin-bottom: 6%;
  padding-top: 70px;
}

.con_roomplan #high_deluxe .ttl_grade {
  margin-bottom: 3.5%;
  position: relative;
}

.con_roomplan #high_deluxe .ttl_grade .box_ttl {
  background: url("../image/bg-ttl-high.png") repeat;
  padding: 1%;
  position: absolute;
  left: 3.5%;
  top: 15%;
  z-index: 1;
  width: 425px;
}

.con_roomplan #high_deluxe .ttl_grade .box_ttl h2 {
  border: solid 1px #E3D9A8;
  -webkit-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  -moz-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  -o-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  border-image: url("../image/border.jpg") 1 stretch;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 210%;
  font-weight: normal;
  letter-spacing: 0.1em;
  padding: 1px;
  text-align: center;
}

.con_roomplan #high_deluxe .ttl_grade .box_ttl h2 span {
  display: block;
  padding: 5%;
}

.con_roomplan #high_deluxe .ttl_grade .box_ttl h2 span span {
  background: none;
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 60%;
  letter-spacing: 0;
  padding: 0;
}

@media screen and (max-width: 1000px) {
 .con_roomplan #high_deluxe .ttl_grade .box_ttl {
  top: 10%;
  width: calc( 425 / 984 * 100% );
 }
}

@media screen and (max-width: 736px) {
  .con_roomplan #high_deluxe .ttl_grade {
    margin-bottom: 7%;
  }

  .con_roomplan #high_deluxe .ttl_grade .box_ttl {
    margin-bottom: 3%; 
    position: static;
    width: 100%;
  }
  .con_roomplan #high_deluxe .ttl_grade .box_ttl h2 {
    font-size: 7vw;
    padding: 0;
  }
  .con_roomplan #high_deluxe .ttl_grade .box_ttl h2 span {
    padding: 0;
  }

  .con_roomplan #high_deluxe .ttl_grade .box_ttl h2 span span {
    font-size: 4vw;
  }

  .con_roomplan #high_deluxe .ttl_grade img {
    display: block;
    margin: 0 auto;
    width: 95%;
  }
}

.con_roomplan #high_deluxe .ttl_hierarchy {
  background: url(../image/bg-ttl-hierarchy.png) repeat;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 205%;
  font-weight: bold;
  margin: 0 3% 2%;
  padding: 1% 0;
  text-align: center;
}

.con_roomplan #high_deluxe .ttl_hierarchy .txt_space {
  margin: 0 0.3em;
}

@media screen and (max-width: 1024px) {
  .con_roomplan #high_deluxe .ttl_hierarchy .txt_space {
    display: inline-block;
    font-weight: lighter;
    transform: scale(1.5, 1);
  }
}

@media screen and (max-width: 736px) {
  .con_roomplan #high_deluxe .ttl_hierarchy {
    margin: 0 auto 2%;
    width: 98%;
  }
}

.con_roomplan #high_deluxe h3 {
  background: #31174C;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 180%;
  font-weight: normal;
  letter-spacing: 0.2em;
  margin: 0 auto 0.5em;
  max-width: 923px;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 736px) {
  .con_roomplan #high_deluxe h3 {
    font-size: 4.7vw;
    line-height: 1.3em;
    padding: 2% 0;
  }

  .con_roomplan #high_deluxe h3 span {
    padding-top: 0;
  }
}

.con_roomplan #high_deluxe .box_floor {
  max-width: 925px;
  margin: 0 auto 5%;
  overflow: hidden;
  width: 94%;
}

.con_roomplan #high_deluxe .box_floor figure:first-of-type {
  float: left;
  margin-left: 10%;
  width: 17%;
}

.con_roomplan #high_deluxe .box_floor figure:last-of-type {
  float: right;
  margin-right: 6%;
  margin-top: 1%;
  width: 60.43%;
}

@media screen and (max-width: 736px) {
  .con_roomplan #high_deluxe .box_floor {
    width: 98%;
  }
}

.con_roomplan #high_deluxe .box_plan {
  max-width: 925px;
  margin: 0 auto;
  width: 94%;
}

.con_roomplan #high_deluxe ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 925px;
  overflow: hidden;
}

.con_roomplan #high_deluxe ul:first-of-type {
  margin-bottom: 5%;
}

.con_roomplan #high_deluxe ul li {
  background: #fff;
  border: 1px solid #B6A8BD;
  float: left;
  margin: 0 0 2em;
  padding: 0.5em;
  width: 32.43%;
}

.con_roomplan #high_deluxe ul li figure {
  box-shadow:0px 1px 6px 0px #a3a3a3;
  position: relative;
}

.con_roomplan #high_deluxe ul li figure:after {
  bottom: 0;
  content: url("../image/ico_mag_glass_index.png");
  display: block;
  height: 25px;
  position: absolute;
  right: 0;
  width: 25px;
}

.con_roomplan #high_deluxe ul li figure:hover {
  opacity: 0.8;
  transition: .5s;
}

.con_roomplan #high_deluxe ul li h4 {
  color: #000;
  border-bottom: 1px solid #B6A8BD;
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 315%;
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 0.9em;
  margin-bottom: 3%;
  padding-bottom: 3%;
  text-align: center;
}

.con_roomplan #high_deluxe ul li h4 span {
  font-size: 70%;
}

.con_roomplan #high_deluxe ul li h4 .txt_madori {
  font-family: 'Noto Serif TC', serif;
  font-size: 38%;
  margin-right: 0.25em;
}

.con_roomplan #high_deluxe ul li h4 .icon {
  display: block;
  margin: 0 auto;
  width: 9.66%;
}

@media screen and (max-width: 1000px) {
  .con_roomplan #high_deluxe ul li h4 {
    font-size: 5vw;
  }

  .con_roomplan #high_deluxe ul li h4 span {
    font-size: 4vw;
  }

  .con_roomplan #high_deluxe ul li h4 .txt_madori {
    font-size: 2vw;
  }
}

.con_roomplan #high_deluxe ul li p {
  line-height: 1.7em;
  margin: 0 0.5em 3%;
}

.con_roomplan #high_deluxe ul li p .txt_serif {
  display: inline-block;
  font-family: 'Noto Serif TC', serif;
  font-size: 175%;
  margin-right: 1em;
}

.con_roomplan #high_deluxe ul li.li_space {
  background: url("../image/img-space_pc.png") no-repeat;
  background-size: cover;
  border: none;
  width: 66.16%;
}

@media screen and (max-width: 1000px) {
  .con_roomplan #high_deluxe ul li p {
    font-size: 1.7vw;
    padding: 3% 0;
  }
  .con_roomplan #high_deluxe ul li p .txt_serif {
    display: block;
    font-size: 3vw;
    margin-bottom: 1%;
  }
}

@media screen and (max-width: 736px) {
  .con_roomplan #high_deluxe .box_plan {
    margin: 0 auto;
    width: 98%;
  }

  .con_roomplan #high_deluxe ul {
    width: 98%;
  }

  .con_roomplan #high_deluxe ul li {
    width: 49%;
  }

  .con_roomplan #high_deluxe ul li h4 {
    font-size: 10vw;
  }

  .con_roomplan #high_deluxe ul li h4 span {
    font-size: 6vw;
  }

  .con_roomplan #high_deluxe ul li h4 .txt_madori {
    font-size: 4vw;
  }

  .con_roomplan #high_deluxe ul li h4 .icon {
    width: 13%;
  }

  .con_roomplan #high_deluxe ul li p {
    font-size: 3.5vw;
  }

  .con_roomplan #high_deluxe ul li p .txt_serif {
    display: block;
    font-size: 6vw;
  }

  .con_roomplan #high_deluxe ul li.li_space {
    background: url("../image/img-space_sp.png") no-repeat;
    width: 49%;
  }
}



/* #premium */
.con_roomplan #premium {
  margin-top: -70px;
  margin-bottom: 6%;
  padding-top: 70px;
}

.con_roomplan #premium .ttl_grade {
  margin-bottom: 3.5%;
  position: relative;
}

.con_roomplan #premium .ttl_grade .box_ttl {
  background: url("../image/bg-ttl-premium.png") repeat;
  left: 3.5%;
  padding: 1%;
  position: absolute;
  top: 15%;
  z-index: 1;
  width: 425px;
}

.con_roomplan #premium .ttl_grade .box_ttl h2 {
  border: solid 1px #E3D9A8;
  -webkit-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  -moz-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  -o-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  border-image: url("../image/border.jpg") 1 stretch;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 210%;
  font-weight: normal;
  letter-spacing: 0.1em;
  padding: 1px;
  text-align: center;
}

.con_roomplan #premium .ttl_grade .box_ttl h2 span {
  display: block;
  padding: 5%;
}

.con_roomplan #premium .ttl_grade .box_ttl h2 span span {
  background: none;
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 60%;
  letter-spacing: 0;
  padding: 0;
}

@media screen and (max-width: 1000px) {
 .con_roomplan #premium .ttl_grade .box_ttl {
  top: 10%;
  width: calc( 425 / 984 * 100% );
 }
}

@media screen and (max-width: 736px) {
  .con_roomplan #premium .ttl_grade {
    margin-bottom: 7%;
  }

  .con_roomplan #premium .ttl_grade .box_ttl {
    margin-bottom: 3%; 
    position: static;
    width: 100%;
  }
  .con_roomplan #premium .ttl_grade .box_ttl h2 {
    font-size: 7vw;
    padding: 0;
  }
  .con_roomplan #premium .ttl_grade .box_ttl h2 span {
    padding: 0;
  }

  .con_roomplan #premium .ttl_grade .box_ttl h2 span span {
    font-size: 4vw;
  }

  .con_roomplan #premium .ttl_grade img {
    display: block;
    margin: 0 auto;
    width: 95%;
  }
}

.con_roomplan #premium h3 {
  background: #913E0A;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 180%;
  font-weight: normal;
  letter-spacing: 0.2em;
  margin: 0 auto 0.5em;
  max-width: 923px;
  text-align: center;
  width: 100%;
}

.con_roomplan #premium h3 span {
  display: inline-block;
  font-size: 75%;
  padding-top: 0.6%;
  vertical-align: top;
}

.con_roomplan #premium h3 span .txt_space {
  font-size: 100%;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 1024px) {
  .con_roomplan #premium h3 span .txt_space {
    display: inline-block;
    font-size: 100%;
    font-weight: lighter;
    transform: scale(1.3, 1);
  }
}

@media screen and (max-width: 736px) {
  .con_roomplan #premium h3 {
    font-size: 4.7vw;
    line-height: 1.3em;
    padding: 2% 0;
  }

  .con_roomplan #premium h3 span {
    padding-top: 0;
  }
}

.con_roomplan #premium .box_floor {
  max-width: 925px;
  margin: 0 auto 5%;
  overflow: hidden;
  width: 94%;
}

.con_roomplan #premium .box_floor figure:first-of-type {
  float: left;
  margin-left: 10%;
  width: 17%;
}

.con_roomplan #premium .box_floor figure:last-of-type {
  float: right;
  margin-right: 6%;
  margin-top: 1%;
  width: 60.43%;
}

@media screen and (max-width: 736px) {
  .con_roomplan #premium .box_floor {
    width: 98%;
  }
}

.con_roomplan #premium .box_plan {
  max-width: 925px;
  margin: 0 auto;
  width: 94%;
}

.con_roomplan #premium ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 925px;
  overflow: hidden;
}

.con_roomplan #premium ul li {
  background: #fff;
  border: 1px solid #CAB8A7;
  margin: 0 0 2em 0;
  padding: 0.5em;
  width: 32.43%;
}

.con_roomplan #premium ul li:first-child,
.con_roomplan #premium ul li:nth-child(3n+1) {
  margin-left: 0;
}

.con_roomplan #premium ul li figure {
  box-shadow:0px 1px 6px 0px #a3a3a3;
  position: relative;
}

.con_roomplan #premium ul li figure:after {
  bottom: 0;
  content: url("../image/ico_mag_glass_index.png");
  display: block;
  height: 25px;
  position: absolute;
  right: 0;
  width: 25px;
}

.con_roomplan #premium ul li figure:hover {
  opacity: 0.8;
  transition: .5s;
}

.con_roomplan #premium ul li h4 {
  color: #000;
  border-bottom: 1px solid #CAB8A7;
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 315%;
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 0.9em;
  margin-bottom: 3%;
  padding-bottom: 3%;
  text-align: center;
}

.con_roomplan #premium ul li h4 span {
  font-size: 70%;
}

.con_roomplan #premium ul li h4 .txt_madori {
  font-family: 'Noto Serif TC', serif;
  font-size: 38%;
  margin-right: 0.25em;
}

.con_roomplan #premium ul li h4 .icon {
  display: block;
  margin: 0 auto;
  width: 9.66%;
}

@media screen and (max-width: 1000px) {
  .con_roomplan #premium ul li h4 {
    font-size: 5vw;
  }

  .con_roomplan #premium ul li h4 span {
    font-size: 4vw;
  }

  .con_roomplan #premium ul li h4 .txt_madori {
    font-size: 2vw;
  }
}

.con_roomplan #premium ul li p {
  line-height: 1.7em;
  margin: 0 0.5em 3%;
}

.con_roomplan #premium ul li p .txt_serif {
  display: inline-block;
  font-family: 'Noto Serif TC', serif;
  font-size: 175%;
  margin-right: 1em;
}

@media screen and (max-width: 1000px) {
  .con_roomplan #premium ul li p {
    font-size: 1.7vw;
    padding: 3% 0;
  }
  .con_roomplan #premium ul li p .txt_serif {
    display: block;
    font-size: 3vw;
    margin-bottom: 1%;
  }
}

@media screen and (max-width: 736px) {
  .con_roomplan #premium .box_plan {
    margin: 0 auto;
    width: 98%;
  }

  .con_roomplan #premium ul {
    width: 98%;
  }

  .con_roomplan #premium ul li {
    width: 49%;
  }

  .con_roomplan #premium ul li h4 {
    font-size: 10vw;
  }

  .con_roomplan #premium ul li h4 span {
    font-size: 6vw;
  }

  .con_roomplan #premium ul li h4 .txt_madori {
    font-size: 4vw;
  }

  .con_roomplan #premium ul li h4 .icon {
    width: 13%;
  }

  .con_roomplan #premium ul li p {
    font-size: 3.5vw;
  }

  .con_roomplan #premium ul li p .txt_serif {
    display: block;
    font-size: 6vw;
  }

  .con_roomplan #premium ul li.li_space {
    background: url("../image/img-space_sp.png") no-repeat;
    background-size: cover;
    border: none;
    width: 49%;
  }
}


/* #suite_premium */
.con_roomplan #suite_premium {
  margin-top: -70px;
  margin-bottom: 6%;
  padding-top: 70px;
}

.con_roomplan #suite_premium .ttl_grade {
  margin-bottom: 3.5%;
  position: relative;
}

.con_roomplan #suite_premium .ttl_grade .box_ttl {
  background: url("../image/bg-ttl-suite.png") repeat;
  padding: 1%;
  position: absolute;
  left: 3.5%;
  top: 15%;
  z-index: 1;
  width: 425px;
}

.con_roomplan #suite_premium .ttl_grade .box_ttl h2 {
  border: solid 1px #E3D9A8;
  -webkit-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  -moz-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  -o-border-image: url("../image/border.jpg") 1 1 1 1 stretch;
  border-image: url("../image/border.jpg") 1 stretch;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 210%;
  font-weight: normal;
  letter-spacing: 0.1em;
  padding: 1px;
  text-align: center;
}

.con_roomplan #suite_premium .ttl_grade .box_ttl h2 span {
  display: block;
  padding: 5%;
}

.con_roomplan #suite_premium .ttl_grade .box_ttl h2 span span {
  background: none;
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 60%;
  letter-spacing: 0;
  padding: 0;
}

@media screen and (max-width: 1000px) {
 .con_roomplan #suite_premium .ttl_grade .box_ttl {
  top: 10%;
  width: calc( 425 / 984 * 100% );
 }
}

@media screen and (max-width: 736px) {
  .con_roomplan #suite_premium .ttl_grade {
    margin-bottom: 7%;
  }

  .con_roomplan #suite_premium .ttl_grade .box_ttl {
    margin-bottom: 3%; 
    position: static;
    width: 100%;
  }
  .con_roomplan #suite_premium .ttl_grade .box_ttl h2 {
    font-size: 7vw;
    padding: 0;
  }
  .con_roomplan #suite_premium .ttl_grade .box_ttl h2 span {
    padding: 0;
  }

  .con_roomplan #suite_premium .ttl_grade .box_ttl h2 span span {
    font-size: 4vw;
  }

  .con_roomplan #suite_premium .ttl_grade img {
    display: block;
    margin: 0 auto;
    width: 95%;
  }
}

.con_roomplan #suite_premium h3 {
  background: #8A711A;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 180%;
  font-weight: normal;
  letter-spacing: 0.2em;
  margin: 0 auto 0.5em;
  max-width: 923px;
  text-align: center;
  width: 100%;
}

.con_roomplan #suite_premium .attention {
  margin: 0 2em 1em;
}

.con_roomplan #suite_premium h3 span {
  display: inline-block;
  font-size: 75%;
  padding-top: 0.6%;
  vertical-align: top;
}

@media screen and (max-width: 1024px) {
  .con_roomplan #suite_premium h3 span .txt_space {
    display: inline-block;
    font-size: 100%;
    font-weight: lighter;
    transform: scale(1.3, 1);
  }
}

@media screen and (max-width: 736px) {
  .con_roomplan #suite_premium h3 {
    font-size: 4.7vw;
    line-height: 1.3em;
    padding: 2% 0;
    width: 98%;
  }

  .con_roomplan #suite_premium .attention {
    margin: 0 0 1em;
  }

  .con_roomplan #suite_premium h3 span {
    padding-top: 0;
  }
}

.con_roomplan #suite_premium .box_floor {
  max-width: 925px;
  margin: 0 auto 5%;
  overflow: hidden;
  width: 94%;
}

@media screen and (max-width: 736px) {
  .con_roomplan #suite_premium .box_floor {
    width: 98%;
  }
}

.con_roomplan #suite_premium .box_floor figure:first-of-type {
  float: left;
  margin-left: 10%;
  width: 17%;
}

.con_roomplan #suite_premium .box_floor figure:last-of-type {
  float: right;
  margin-right: 6%;
  margin-top: 1%;
  width: 60.43%;
}

.con_roomplan #suite_premium .box_plan {
  background: #fff;
  border: 1px solid #A59887;
  margin: 0 auto;
  max-width: 925px;
  padding: 2%;
  overflow: hidden;
  width: 94%;
}

.con_roomplan #suite_premium .box_plan figure {
  box-shadow:0px 1px 6px 0px #a3a3a3;
  float: left;
  position: relative;
  width: 47.56%;
}

.con_roomplan #suite_premium .box_plan figure:after {
  bottom: 0;
  content: url("../image/ico_mag_glass_index.png");
  display: block;
  height: 25px;
  position: absolute;
  right: 0;
  width: 25px;
}

.con_roomplan #suite_premium .box_plan figure:hover {
  opacity: 0.8;
  transition: .5s;
}

.con_roomplan #suite_premium .box_plan .area_right {
  float: right;
  margin: 1% 3% 0 0;
  width: 42.16%;
}

.con_roomplan #suite_premium .box_plan .area_right h4 {
  color: #000;
  border-bottom: 1px solid #A59887;
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 315%;
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 1em;
  margin-bottom: 3%;
  text-align: center;
}

.con_roomplan #suite_premium .box_plan .area_right h4 span {
  display: inline-block;
  font-size: 70%;;
}

.con_roomplan #suite_premium .box_plan .area_right h4 .txt_madori {
  font-family: 'Noto Serif TC', serif;
  font-size: 38%;
  margin-right: 0.25em;
}

.con_roomplan #suite_premium .box_plan .area_right h4 .icon {
  display: block;
  margin: 0 auto;
  width: 7.5%;
}

@media screen and (max-width: 1000px) {
  .con_roomplan #suite_premium .area_right h4 {
    font-size: 5vw;
  }

  .con_roomplan #suite_premium .area_right h4 span {
    font-size: 4vw;
  }

  .con_roomplan #suite_premium .area_right h4 .txt_madori {
    font-size: 2vw;
  }
}

.con_roomplan #suite_premium .box_plan .area_right p {
  line-height: 1.7em;
  margin: 0 0.5em 7%;
}

.con_roomplan #suite_premium .box_plan .area_right p.txt_serif {
  display: inline-block;
  font-family: 'Noto Serif TC', serif;
  font-size: 175%;
  margin: 0 0.3em;
}

.con_roomplan #suite_premium .box_plan .area_right span.txt_price_suffix {
  color:red;
  display: inline-block;
}

.con_roomplan #suite_premium .box_plan .area_right .txt_price .txt_space_price {
  margin: 0 0.2em;
}

.con_roomplan #suite_premium .box_plan .area_right .btn {
  background: #8c1010;
  background: -moz-linear-gradient(top, #d43131 1%, #8c1010 100%);
  background: -webkit-linear-gradient(top, #d43131 1%,#8c1010 100%);
  background: linear-gradient(to bottom, #d43131 1%,#8c1010 100%);
  border-radius: 5px;
  color: #fff;
  display: block;
  font-weight: bold;
  line-height: 1.3em!important;
  margin: 0 auto!important;
  padding: 3% 0!important;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 70%;
}

.con_roomplan #suite_premium .box_plan .area_right .btn:after {
  background: url("../image/ico-arrow.png") center center no-repeat;
  background-size: 0.4em;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  right: 0.5em;
  top: 0;
  width: 1em;
}

.con_roomplan #suite_premium .box_plan .area_right .btn:hover {
  opacity: 0.8;
  transition: .5s;
}

.con_roomplan #suite_premium .box_plan .area_right .btn a {
  color: #fff;
  display: block;
  font-family: 'Noto Serif TC', serif;
  font-size: 100%;
  font-weight: normal;
  text-decoration: none;
  vertical-align: middle;
}

@media screen and (max-width: 736px) {
  .con_roomplan #suite_premium .box_plan .area_right .btn {
    font-size: 4vw!important;
    padding: 3% 0 !important;
    width: 70%;
  }
}

@media screen and (max-width: 736px) {
  .con_roomplan #suite_premium .box_plan {
    margin: 0 auto;
    padding-bottom: 3%;
    width: 85%;
  }

  .con_roomplan #suite_premium .box_plan figure {
    float: none;
    width: 100%;
  }

  .con_roomplan #suite_premium .box_plan .area_right {
    float: none;
    margin: 0 auto;
    width: 95%;
  }

  .con_roomplan #suite_premium .box_plan .area_right h4 {
    font-size: 10vw;
  }

  .con_roomplan #suite_premium .box_plan .area_right h4 span {
    font-size: 6vw;
    margin-bottom: 0;
  }

  .con_roomplan #suite_premium .box_plan .area_right h4 .txt_madori {
    font-size: 4vw;
  }

  .con_roomplan #suite_premium .box_plan .area_right h4 .icon {
    width: 8%;
  }

  .con_roomplan #suite_premium .box_plan .area_right p {
    font-size: 3.5vw;
    margin-bottom: 3%;
  }

  .con_roomplan #suite_premium .box_plan .area_right p.txt_serif {
    display: block;
    font-size: 6vw;
  }
}

/* 各グレードタイトル部分 一覧へのボタン */
.con_roomplan .ttl_grade .box_btn {
  background: #fff;
  left: 9%;
  position: absolute;
  top: 65%;
  width: 30%;
}

.con_roomplan .ttl_grade .box_btn a {
  display: block;
  height: 65px;
}

.con_roomplan .ttl_grade .box_btn a:hover {
  opacity: .8;
  transition: .5s;
}

.con_roomplan .ttl_grade .box_btn a img {
  height: 100%;
}

@media screen and (max-width: 1000px) {
 .con_roomplan .ttl_grade .box_btn {
  top: 68%;
 }
}

@media screen and (max-width: 736px) {
  .con_roomplan .ttl_grade .box_btn {
    position: static;
    margin: 3% auto 0;
    width: 80%;
  }

  .con_roomplan .ttl_grade .box_btn a {
    height: auto;
  }

  .con_roomplan .ttl_grade .box_btn img {
    height: auto!important;
    width: 100%!important;
  }
}


/*　「家具・家電付き」「家具・家電なし」ボタン　*/
.con_roomplan ul li .btn {
  background: #8c1010;
  background: -moz-linear-gradient(top, #d43131 1%, #8c1010 100%);
  background: -webkit-linear-gradient(top, #d43131 1%,#8c1010 100%);
  background: linear-gradient(to bottom, #d43131 1%,#8c1010 100%);
  border-radius: 5px;
  color: #fff;
  display: block;
  font-weight: bold;
  line-height: 1.3em!important;
  margin: 0 auto!important;
  padding: 3% 0 3% 0;
  position: relative;
  vertical-align: middle;
  text-align: center;
  width: 49%;
  float: left;
}

@media screen and (max-width: 1024px) {
  .con_roomplan ul li .btn {
    padding: 3% 0 3% 0;
  }
}

.con_roomplan ul li .btn:last-of-type {
  background: #6b520f;
  background: -moz-linear-gradient(top, #a07d1c 1%, #6b520f 100%);
  background: -webkit-linear-gradient(top, #a07d1c 1%,#6b520f 100%);
  background: linear-gradient(to bottom, #a07d1c 1%,#6b520f 100%);
  float: right;
}

.con_roomplan ul li .btn:after {
  background: url("../image/ico-arrow.png") center center no-repeat;
  background-size: 0.4em;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  right: 0.1em;
  top: 0;
  width: 1em;
}

.con_roomplan ul li .btn:hover {
  opacity: 0.8;
  transition: .5s;
}

.con_roomplan ul li .btn a {
  color: #fff;
  display: block;
  font-family: 'Noto Serif TC', serif;
  font-size: 100%;
  font-weight: normal;
  text-decoration: none;
  vertical-align: middle;
}

@media screen and (max-width: 1000px) {
  .con_roomplan ul li .btn {
    float: none;
    margin-bottom: 3%!important;
    width: 80%;
  }

  .con_roomplan ul li .btn:last-of-type {
    float: none;
  }

  .con_roomplan ul li .btn a {
    text-align: center;
  }
}

@media screen and (max-width: 736px) {
  .con_roomplan ul li p.btn {
    font-size: 4vw!important;
    padding: 5% 0 !important;
    width: 95%;
  }
}