@charset "utf-8";
/* CSS Document */
ul.list-column2.btn-lb li a, #article a.btn-lb {
  max-width: 275px;
  margin-left: auto;
  margin-right: auto;
}
.slider-container {
  margin: 0 auto 0 auto;
  max-width: 300px;
  width: 100%;
}
.slider-container img {
  height: auto;
  width: 100%;
}
.slider-list1, .slider-list2, .slider-list3, .slider-list4, .slider-list5, .slider-list6, .slider-list7, .slider-list8, .slider-list9, .slider-list10, .slider-list11, .slider-list12, .slider-list13, .slider-list14, .slider-list15, .slider-list16, .slider-list17, .slider-list18, .slider-list19, .slider-list20 {
  width: 300px;
  height: 200px;
  margin: 0 auto 0 auto;
}
.slide-item img {
  width: 100%;
}
.thumbnail-list1 .slick-track, .thumbnail-list2 .slick-track, .thumbnail-list3 .slick-track, .thumbnail-list4 .slick-track, .thumbnail-list5 .slick-track, .thumbnail-list6 .slick-track, .thumbnail-list7 .slick-track, .thumbnail-list8 .slick-track, .thumbnail-list9 .slick-track, .thumbnail-list10 .slick-track, .thumbnail-list11 .slick-track, .thumbnail-list12 .slick-track, .thumbnail-list13 .slick-track, .thumbnail-list14 .slick-track, .thumbnail-list15 .slick-track, .thumbnail-list16 .slick-track, .thumbnail-list17 .slick-track, .thumbnail-list18 .slick-track, .thumbnail-list19 .slick-track, .thumbnail-list20 .slick-track {
  width: 300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: auto;
}
.thumbnail-item {
  width: calc(100% / 4.4) !important;
  box-sizing: border-box;
  position: relative;
  height: auto;
  opacity: 0.4;
  transition: opacity .3s linear;
  min-width: 69px !important;
}
.thumbnail-item:hover {
  opacity: 1;
}
.thumbnail-list1 .slick-track:before, .thumbnail-list1 .slick-track:after, .thumbnail-list2 .slick-track:before, .thumbnail-list2 .slick-track:after, .thumbnail-list3 .slick-track:before, .thumbnail-list3 .slick-track:after, .thumbnail-list4 .slick-track:before, .thumbnail-list4 .slick-track:after, .thumbnail-list5 .slick-track:before, .thumbnail-list5 .slick-track:after, .thumbnail-list6 .slick-track:before, .thumbnail-list6 .slick-track:after, .thumbnail-list7 .slick-track:before, .thumbnail-list7 .slick-track:after, .thumbnail-list8 .slick-track:before, .thumbnail-list8 .slick-track:after, .thumbnail-list9 .slick-track:before, .thumbnail-list9 .slick-track:after, .thumbnail-list10 .slick-track:before, .thumbnail-list10 .slick-track:after, .thumbnail-list11 .slick-track:before, .thumbnail-list11 .slick-track:after, .thumbnail-list12 .slick-track:before, .thumbnail-list12 .slick-track:after, .thumbnail-list13 .slick-track:before, .thumbnail-list13 .slick-track:after, .thumbnail-list14 .slick-track:before, .thumbnail-list14 .slick-track:after, .thumbnail-list15 .slick-track:before, .thumbnail-list15 .slick-track:after, .thumbnail-list16 .slick-track:before, .thumbnail-list16 .slick-track:after, .thumbnail-list17 .slick-track:before, .thumbnail-list17 .slick-track:after, .thumbnail-list18 .slick-track:before, .thumbnail-list18 .slick-track:after, .thumbnail-list19 .slick-track:before, .thumbnail-list19 .slick-track:after, .thumbnail-list20 .slick-track:before, .thumbnail-list20 .slick-track:after {
  content: "";
  display: block;
  width: 23%;
  height: 0;
}
.thumbnail-list1 .slick-track:before, .thumbnail-list2 .slick-track:before, .thumbnail-list3 .slick-track:before, .thumbnail-list4 .slick-track:before, .thumbnail-list5 .slick-track:before, .thumbnail-list6 .slick-track:before, .thumbnail-list7 .slick-track:before, .thumbnail-list8 .slick-track:before, .thumbnail-list9 .slick-track:before, .thumbnail-list10 .slick-track:before, .thumbnail-list11 .slick-track:before, .thumbnail-list12 .slick-track:before, .thumbnail-list13 .slick-track:before, .thumbnail-list14 .slick-track:before, .thumbnail-list15 .slick-track:before, .thumbnail-list16 .slick-track:before, .thumbnail-list17 .slick-track:before, .thumbnail-list18 .slick-track:before, .thumbnail-list19 .slick-track:before, .thumbnail-list20 .slick-track:before {
  order: 1;
}
.thumbnail-item.thumbnail-current:after {
  opacity: 0;
}
.thumbnail-item img {
  width: 100%;
  margin: 0 auto;
}
.thumbnail-list1 .slick-track, .thumbnail-list2 .slick-track, .thumbnail-list3 .slick-track, .thumbnail-list4 .slick-track, .thumbnail-list5 .slick-track, .thumbnail-list6 .slick-track, .thumbnail-list7 .slick-track, .thumbnail-list8 .slick-track, .thumbnail-list9 .slick-track, .thumbnail-list10 .slick-track, .thumbnail-list11 .slick-track, .thumbnail-list12 .slick-track, .thumbnail-list13 .slick-track, .thumbnail-list14 .slick-track, .thumbnail-list15 .slick-track, .thumbnail-list16 .slick-track, .thumbnail-list17 .slick-track, .thumbnail-list18 .slick-track, .thumbnail-list19 .slick-track, .thumbnail-list20 .slick-track {
  transform: unset !important;
  width: 300px !important;
  margin: 10px 0 0 0 !important;
}
.thumbnail-list1 .slick-current, .thumbnail-list2 .slick-current, .thumbnail-list3 .slick-current, .thumbnail-list4 .slick-current, .thumbnail-list5 .slick-current, .thumbnail-list6 .slick-current, .thumbnail-list7 .slick-current, .thumbnail-list8 .slick-current, .thumbnail-list9 .slick-current, .thumbnail-list10 .slick-current, .thumbnail-list11 .slick-current, .thumbnail-list12 .slick-current, .thumbnail-list13 .slick-current, .thumbnail-list14 .slick-current, .thumbnail-list15 .slick-current, .thumbnail-list16 .slick-current, .thumbnail-list17 .slick-current, .thumbnail-list18 .slick-current, .thumbnail-list19 .slick-current, .thumbnail-list20 .slick-current {
  opacity: 1;
}
.slide-item.slick-slide.slick-current.slick-active:after {
  content: "";
  width: 28px;
  height: 28px;
  background-image: url("/cmn/js/modaal/icon-zoom.png");
  background-repeat: no-repeat;
  position: absolute;
  z-index: 10000;
  right: 5px;
  top: 165px;
  opacity: 0;
}
.slide-item.slick-slide.slick-current.slick-active:after {
  content: "";
  width: 28px;
  height: 28px;
  background-image: url("/cmn/js/modaal/icon-zoom.png");
  background-repeat: no-repeat;
  position: absolute;
  z-index: 10000;
  right: 0;
  top: 163px;
  opacity: 0;
}
.slide-item.slick-slide.slick-current.slick-active:hover:after {
  opacity: 1;
}
.connectingSuiteBox {
  padding: 10px 10px 10px 10px;
  margin: 0 0 40px 0;
  background: linear-gradient(45deg, rgba(225, 197, 124, 0.2) 0%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(225, 197, 124, 0.2) 100%), url("/route/osaka-beppu/cabin/img/kurenai_murasaki/bg-gold.png");
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}
.connectingSuiteBox > div {
  background: rgba(255, 255, 255, 0.4);
  padding: 13px;
  border: 1px solid #fff;
}
.connectingDeluxeBox {
  padding: 10px 10px 10px 10px;
  margin: 0 0 40px 0;
  background: linear-gradient(45deg, rgba(117, 117, 117, 0.2) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.3) 60%, rgba(117, 117, 117, 0.2) 100%), url("/route/osaka-beppu/cabin/img/kurenai_murasaki/bg-silver.png");
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}
.connectingDeluxeBox > div {
  background: rgba(255, 255, 255, 0.4);
  padding: 13px;
  border: 1px solid #fff;
}
.connectingSuiteBox > div a, .connectingDeluxeBox > div a {
  display: block;
}
.connectingSuiteBox > div a:hover, .connectingDeluxeBox > div a:hover {
  opacity: 0.7;
}
.connectingSuiteBox > div > div.room, .connectingDeluxeBox > div > div.room {
  display: flex;
  margin-top: 15px;
  flex-wrap: nowrap;
}
a.icon-zoom {
  position: relative;
}
a.icon-zoom:before {
  content: "";
  width: 28px;
  height: 28px;
  background-image: url(/cmn/js/modaal/icon-zoom.png);
  background-repeat: no-repeat;
  position: absolute;
  z-index: 10000;
  right: 0;
  bottom: 15%;
  opacity: 0;
}
a.icon-zoom:hover:before {
  opacity: 1;
}
@media only screen and (max-width: 750px) { /*sp*/
  .thumbnail-list1, .thumbnail-list2, .thumbnail-list3, .thumbnail-list4, .thumbnail-list5, .thumbnail-list6, .thumbnail-list7, .thumbnail-list8, .thumbnail-list9, .thumbnail-list10, .thumbnail-list11, .thumbnail-list12, .thumbnail-list13, .thumbnail-list14, .thumbnail-list15, .thumbnail-list16, .thumbnail-list17, .thumbnail-list18, .thumbnail-list19, .thumbnail-list20 {
    margin-top: 20px;
  }
  .thumbnail-list1 .slick-track, .thumbnail-list2 .slick-track, .thumbnail-list3 .slick-track, .thumbnail-list4 .slick-track, .thumbnail-list5 .slick-track, .thumbnail-list6 .slick-track, .thumbnail-list7 .slick-track, .thumbnail-list8 .slick-track, .thumbnail-list9 .slick-track, .thumbnail-list10 .slick-track, .thumbnail-list11 .slick-track, .thumbnail-list12 .slick-track, .thumbnail-list13 .slick-track, .thumbnail-list14 .slick-track, .thumbnail-list15 .slick-track, .thumbnail-list16 .slick-track, .thumbnail-list17 .slick-track, .thumbnail-list18 .slick-track, .thumbnail-list19 .slick-track, .thumbnail-list20 .slick-track {
    margin-top: 0;
  }
  .thumbnail-list {
    padding: 0 1%;
  }
  #contents #article .r-photo .thumbnail-item img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .slider-container {
    margin-bottom: 10px;
  }
  .connectingSuiteBox > div > div.room, .connectingDeluxeBox > div > div.room {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .connectingSuiteBox > div > div.room a:nth-child(1), .connectingDeluxeBox > div > div.room a:nth-child(1) {
    width: 45%;
  }
  .connectingSuiteBox > div > div.room a:nth-child(2), .connectingDeluxeBox > div > div.room a:nth-child(2) {
    width: 45%;
  }
  .connectingSuiteBox > div > div.room a:nth-child(3), .connectingDeluxeBox > div > div.room a:nth-child(3) {
    width: 100%;
    margin-top: 10px;
  }
  .connectingSuiteBox > div > div.room img, .connectingDeluxeBox > div > div.room img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}