@charset "utf-8";
/* GATE HOTEL */
/*Setting for the PC*/
#headerSection.roomz {
  height: 695px !important;
  background-image: url(/sapporo/images/bg-rooms_.jpg) !important;
  background-position: center center;
}
#headerSection.pbath {
  height: 695px !important;
  background-image: url(/sapporo/images/bg-pbath.jpg) !important;
  background-position: center center;
}
#headerSection.terrace {
  height: 695px !important;
  background-image: url(/sapporo/images/bg-terrace_.jpg) !important;
  background-position: center center;
}
#headerSection.thegate {
  height: 695px !important;
  background-image: url(/sapporo/images/bg-thegate_.jpg) !important;
  background-position: center center;
}
#headerSection.luxe {
  height: 695px !important;
  background-image: url(/sapporo/images/bg-luxe_.jpg) !important;
  background-position: center center;
}
#headerSection.classy {
  height: 695px !important;
  background-image: url(/sapporo/images/bg-classy_.jpg) !important;
  background-position: center center;
}
#headerSection.scenic {
  height: 695px !important;
  background-image: url(/sapporo/images/bg-scenic_.jpg) !important;
  background-position: center center;
}
#headerSection.essential {
  height: 695px !important;
  background-image: url(/sapporo/images/bg-essential_.jpg) !important;
  background-position: center center;
}
#headerSection.bizluxe {
  height: 695px !important;
  background-image: url(/sapporo/images/bg-bizluxe_.jpg) !important;
  background-position: center center;
}
#headerSection.bizclassy {
  height: 695px !important;
  background-image: url(/sapporo/images/bg-bizclassy_.jpg) !important;
  background-position: center center;
}
#headerSection.bizmodest {
  height: 695px !important;
  background-image: url(/sapporo/images/bg-bizmodest_.jpg) !important;
  background-position: center center;
}
.innerImage.imgTheGate {
  background-image: url(/sapporo/images/img-rooms-the-gate_.jpg) !important;
}
.innerImage.imgLuxe {
  background-image: url(/sapporo/images/img-rooms-luxe_.jpg) !important;
  background-position: top center;
}
.innerImage.imgClassy {
  background-image: url(/sapporo/images/img-rooms-classy_.jpg) !important;
}
.innerImage.imgScenic {
  background-image: url(/sapporo/images/img-rooms-scenic_.jpg) !important;
}
.innerImage.imgEssential {
  background-image: url(/sapporo/images/img-rooms-essential_.jpg) !important;
}
.innerImage.imgBizLuxe {
  background-image: url(/sapporo/images/img-rooms-bizluxe_.jpg) !important;
}
.innerImage.imgBizClassy {
  background-image: url(/sapporo/images/img-rooms-bizclassy_.jpg) !important;
}
.innerImage.imgBizModest {
  background-image: url(/sapporo/images/img-rooms-bizmodest_.jpg) !important;
}
#globalMenuBar {
  /*margin-top: 458px;*/
}
.opentxt {
  text-align: center;
  padding: 250px 0;
}
.titleArea {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  position: absolute;
  top: 544px;
  left: 10px;/*color:#fff;
    font-size:36px;
    letter-spacing: 0.1em;
    padding-bottom:5px;
    border-bottom:solid 1px #fff;*/
}
h1.titleArea span {
  font-size: 24px;
}
/* entry area */
.pages {
  margin: 0 auto;
  padding: 60px;
}
#roomsFilter {
  position: relative;
  margin: 0;
  overflow: hidden;
}
#roomsFilter ul {
  display: block;
  text-align: left;
  float: left;
}
#roomsFilter ul li {
  display: inline-block;
  font-size: 16px;
  margin-right: 20px;
}
#roomsFilter ul li:after {
  margin-left: 20px;
  content: ' | ';
}
#roomsFilter ul li:last-child:after {
  margin-left: 0px;
  content: '';
}
#roomsFilter ul li a {
  text-decoration: none;
  padding: 1px 5px;
  background-color: #fff;
  color: #000;
}
#roomsFilter ul li a.hover, #roomsFilter ul li a.selected {
  padding: 1px 5px;
  background-color: #333;
  color: #fff;
}
#roomsFilter .submenu {
  text-align: right;
  float: right;
}
#roomsFilter .submenu a {
  margin-left: 30px;
  font-size: 12px;
  color: #000;
  text-decoration: none;
}
#roomsFilter .submenu a.hover {
  text-decoration: underline;
}
#roomsFilter .submenu a.hover {
  text-decoration: underline;
}
.roomsArticleArea {
  min-height: 720px;
}
#roomsArticleBox {
  padding-top: 0px;
  padding-bottom: 0px;
  overflow: hidden;
}
#roomsArticleBox .articleBox {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  display: block;
  width: 100%;
  height: 400px;
  display: block;
  float: left;
  color: #000;
  text-decoration: none;
  overflow: hidden;
  background-color: #E6E6E6;
  margin-bottom: 5px;
}
#roomsArticleBox .articleBox .roomsWrap {
  display: block;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
#roomsArticleBox .articleBox.selected {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  height: 400px;
}
#roomsArticleBox .articleBox.unSelected {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  height: 0px;
  margin: 0;
}
#roomsArticleBox .photoWrap {
  position: relative;
  width: 70%;
  height: 400px;
  overflow: hidden;
  float: right;
}
#roomsArticleBox .photoWrap .innerImage {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-position: center;
}
#roomsArticleBox .entryWrap {
  width: 30%;
  float: left;
  padding: 45px 0 60px 45px;
  overflow: auto;
}
#roomsArticleBox .entryWrap > span {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 15px;
  display: block;
}
#roomsArticleBox .entryWrap h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}
#roomsArticleBox .entryWrap hr.roomsTitle {
  width: 96px;
  text-align: left;
  margin-left: 0;
  background-color: #000;
  border: none;
  height: 1px;
}
#roomsArticleBox .entryWrap .rubys {
  font-size: 14px;
}
#roomsArticleBox .entryWrap p {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  margin: 10px 0 10px 0;
}
#roomsArticleBox .entryWrap dl {
  margin-bottom: 20px;
  line-height: 2;
  font-size: 13px;
  overflow: hidden;
}
#roomsArticleBox .entryWrap dl dt {
  width: 70px;
  float: left;
  clear: both;
}
#roomsArticleBox .entryWrap dl dd {
  width: 230px;
  float: left;
}
#roomsArticleBox .entryWrap dl dd span {
  font-size: 12px;
  display: block;
  line-height: 1;
}
#roomsArticleBox .articleBox a.more {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  display: inline-block;
  font-size: 10px;
  margin: 10px 0;
  color: #fff;
  background-color: #936D00;
  width: 230px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
}
#roomsArticleBox .photoWrap .innerImage.hover {
  -webkit-transform: scale(1.00);
  transform: scale(1.00);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  opacity: 0.8;
}
#roomsArticleBox .photoWrap .iconRoom {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
#roomsArticleBox .photoWrap .iconRoom span {
  display: inline-block;
  font-size: 10px;
  background-color: #fff;
  text-align: center;
  color: #000;
  width: 120px;
  height: 20px;
  line-height: 20px;
  margin-right: 10px;
}
/* breakFast */
#breakfast {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#breakfast .imageSliding.left .indexImage {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  margin-top: 50px;
  width: 100%;
  height: 500px;
  background-image: url(/sapporo/images/img-bg-breakfast_.jpg);
  background-size: cover;
  background-position: -350px center;
}
#breakfast .commentSliding.right .indexCommentCage {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  position: absolute;
  top: 0px;
  right: -500px;
  width: 500px;
  height: 500px;
  background-color: #fff;
}
#breakfastCont {
  padding-bottom: 60px;
  overflow: hidden;
}
.breakfastTime {
  width: 40%;
  float: left;
}
#breakfastCont dl {
  margin-top: 160px;
  margin-bottom: 20px;
  line-height: 2;
}
#breakfastCont dt {
  width: 80px;
  float: left;
}
#breakfastCont dd {
  font-weight: normal;
  margin-left: 80px;
  padding-right: 20px;
}
.breakfastImage {
  width: 60%;
  float: right;
}
.breakfastImage img {
  width: 100%;
  height: auto;
}
/* index commons */
.indexImageCage {
  width: 100%;
  height: 480px;
}
.indexSliding {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
}
.commentSliding {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 400px;
}
.imageSliding.left .target.on {
  transform: translateX(-10px);
}
.commentSliding.right .target.on {
  transform: translateX(-500px);
}
.imageSliding.right .target.on {
  transform: translateX(100px);
}
.commentSliding.left .target.on {
  transform: translateX(500px);
}
/* pbath */
#pbath {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 100px;
}
#pbath .imageSliding.right .indexImage {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  margin-top: 50px;
  width: 100%;
  height: 500px;
  background-image: url(/sapporo/images/img-bg-pbath.jpg);
  background-size: cover;
  background-position: center;
}
#pbath .commentSliding.left .indexCommentCage {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  position: absolute;
  top: 0px;
  left: -500px;
  width: 500px;
  height: 500px;
  background-color: #fff;
}
#pbath .btnContena a {
  margin: 30px 0 0 180px;
  display: block;
}
/* pLounge */
#pLounge {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 150px;
}
#pLounge .imageSliding.left .indexImage {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  margin-top: 50px;
  width: 100%;
  height: 500px;
  background-image: url(/sapporo/images/img-bg-plounge_.jpg);
  background-size: cover;
  background-position: -120px center;
}
#pLounge .commentSliding.right .indexCommentCage {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  position: absolute;
  top: 0px;
  right: -500px;
  width: 500px;
  height: 500px;
  background-color: #fff;
}
#pLounge .btnContena a {
  margin: 30px 0 0 180px;
  display: block;
}
h2.indexComment {
  /*color:#936D00;*/
  color: #000;
  margin-top: 50px;
  margin-left: 50px;
  font-size: 32px;
}
hr.indexComment {
  border: none;
  height: 1px;
  width: 80px;
  margin-left: 50px;
  margin-top: 15px;
  margin-bottom: 30px;
  /*background-color:#936D00;*/
  background-color: #000;
}
p.indexCommentRead {
  font-size: 16px;
  margin: .5em 40px .5em 50px;
  line-height: 1.5;
}
p.indexCommentRead + dl {
  font-size: 16px;
  margin: .8em 20px .5em 50px;
  padding: 20px 0 0;
  overflow: hidden;
  line-height: 1.5;
  width: 100%;
}
p.indexCommentRead + dl dt {
  float: left;
  width: 70px;
  clear: both;
}
p.indexCommentRead + dl dd {
  float: left;
  width: 300px;
  padding-bottom: 20px;
}
.btnContena.indexComment {
  padding-top: 20px;
}
/* facility */
#facility {
  overflow: hidden;
  padding-bottom: 0px;
}
#facility h2 {
  font-size: 32px;
  font-weight: normal;
  margin-bottom: 20px;
  text-align: center;
  color: #000;
}
#facility hr.facilityTitle {
  width: 96px;
  text-align: center;
  background-color: #000;
  border: none;
  height: 1px;
  margin-bottom: 40px;
}
.facilityBox {
  width: 360px;
  min-height: 380px;
  overflow: auto;
  float: left;
}
.facilityImage {
  width: 360px;
  height: 235px;
  text-align: center;
  background-color: #F2F2F2;
}
.facilityImage img {
  width: 100%;
  height: auto;
}
.facilityImage img.target {
  opacity: 0;
}
.facilityImage img.target.on {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  opacity: 1;
}
.facilityContents {
  padding: 10px 20px;
}
.facilityContents h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}
.facilityContents p {
  font-size: 14px;
  line-height: 1.75;
}
.facilityColumns {
  width: 45%;
  float: left;
}
.amenityColumns {
  width: 45%;
  float: right;
}
.facilityColumns h4, .amenityColumns h4 {
  width: 100%;
  background-image: url(/sapporo/images/img-bg-h4title.png);
  background-position: center;
  text-align: center;
  margin-bottom: 30px;
}
.facilityColumns h4 span, .amenityColumns h4 span {
  display: inline-block;
  background-color: #fff;
  padding: 0 30px;
}
.facilityColumns ul, .amenityColumns ul {
  line-height: 1.75;
}
.facilityColumns ul li, .amenityColumns ul li {
  font-size: 14px;
  list-style-type: disc;
  margin-left: 20px;
}
/* essential */
#essential .pages {
  overflow: hidden;
}
#essential .entry h2 {
  font-size: 32px;
  font-weight: bold;
  padding-bottom: 20px;
  letter-spacing: 0.05em;
}
#essential .entry hr.roomsTitle {
  width: 96px;
  text-align: left;
  margin-left: 0;
  background-color: #000;
  border: none;
  height: 1px;
}
#essential .entry .rubys {
  font-size: 14px;
}
.roomsTitleColumns {
  width: 30%;
  float: left;
}
.roomsReadColumns {
  width: 70%;
  float: right;
}
.roomsReadColumns h3 {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 30px;
  line-height: 1.5;
}
.roomsReadColumns p {
  font-size: 14px;
  line-height: 1.75;
}
/* tabs */
.tabs {
  position: relative;
  width: 100%;
}
.tabs ul.tabsMenu {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding-left: 100px;
}
.tabs ul.tabsMenu li {
  margin-right: 10px;
  float: left;
}
.tabs ul.tabsMenu li span {
  display: block;
  width: auto;
  min-width: 180px;
  height: 30px;
  background-color: #808080;
  color: #fff;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  text-decoration: none;
  font-weight: normal;
  cursor: pointer;
  padding: 0 10px;
}
.tabs ul.tabsMenu li.active span {
  color: #000;
  background-color: #e6e6e6;
}
.tabColumns {
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  position: absolute;
  top: 30px;
  left: 0;
  background-color: #e6e6e6;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 20px;
  opacity: 0;
}
.tabColumns.show {
  opacity: 1;
}
.tabWrap {
  background-color: #e6e6e6;
}
#tab1 {
  position: relative;
  top: 0;
  left: 0;
  background-color: #e6e6e6;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 20px;
}
.slick-images {
  width: 100%;
}
.slick-images .item {
  height: auto;
  padding-left: 70px;
  padding-right: 70px;
}
.slick-images .item img {
  width: 100%;
  height: auto;
}
.slick-prev {
  left: 9%;
}
.slick-next {
  right: 10%;
}
.slick-prev, .slick-next {
  z-index: 10000;
  top: 48%;
  width: 35px;
  height: 63px;
}
.slick-prev:before {
  content: url(/sapporo/images/btn-prev.png);
}
.slick-next:before {
  content: url(/sapporo/images/btn-ford.png);
}
.roomSpecArticle {
  background-color: #E6E6E6;
  /*overflow:hidden;*/
  padding: 0px 0px 60px;
}
dl.roomSpec {
  padding: 40px 0 0px;
  width: 100%;
  min-width: 1200px;
  font-size: 13px;
  line-height: 1.75;
  text-align: center;
  margin-bottom: 20px;
}
dl.roomSpec dt {
  font-weight: bold;
  display: inline-block;
  margin-right: 10px;
}
dl.roomSpec dt:first-child {
  margin-left: 10px;
}
dl.roomSpec dd {
  font-weight: normal;
  display: inline-block;
  margin-right: 30px;
}
dl.roomSpec img {
  width: auto;
  height: 32px;
  margin-left: 20px;
}
dl.roomSpec span.floorPlan {
  font-size: 12px;
  display: block;
  padding: 0 5px;
  color: #fff;
  background-color: #000;
  cursor: pointer;
  border-radius: 3px;
}
.equipmentSmallColumns {
  width: 46%;
  float: left;
  padding-top: 20px;
  margin-left: 2%;
}
.amenitySmallColumns {
  width: 46%;
  float: right;
  padding-top: 20px;
  margin-right: 2%;
}
.equipmentSmallColumns h3, .amenitySmallColumns h3 {
  width: 100%;
  text-align: center;
  background-image: url(/sapporo/images/img-bg-h4title.png);
  background-position: center;
  font-size: 12px;
  margin-bottom: 20px;
}
.equipmentSmallColumns h3 span, .amenitySmallColumns h3 span {
  display: inline-block;
  background-color: #e6e6e6;
  padding: 1px 20px;
}
.equipmentSmallColumns ul, .amenitySmallColumns ul {
  margin: 0 1%;
  float: left;
  width: 48%;
}
.equipmentSmallColumns ul li, .amenitySmallColumns ul li {
  list-style-type: disc;
  line-height: 1.5;
  font-size: 11px;
  margin-left: 20px;
}
.amenitySmallColumns ul li.att {
  list-style-type: none;
  margin-left: 10px;
}
/* booking */
.checkinFuncRoom {
  clear: both;
  padding-top: 60px;
  padding-left: 40px;
  z-index: 30000;
}
/*.checkInRoom .picker__header::before {
	content:'Arrival';
	display:block;
	font-size:14px;
	background-color:#000;
	color:#fff;
	width:200px;
	padding:3px 10px;
	margin:-10px auto 10px auto;
	border-radius:5px;
}
.checkOutRoom .picker__header::before {
	content:'Departure';
	display:block;
	font-size:14px;
	background-color:#000;
	color:#fff;
	width:200px;
	padding:3px 10px;
	margin:-10px auto 10px auto;
	border-radius:5px;
}*/
.checkInRoom {
  /*width:260px;*/
  display: block;
  margin-right: 20px;
  float: left;
}
.checkOutRoom {
  /*width:300px;*/
  display: block;
  margin-right: 20px;
  float: left;
}
.checkForRoom {
  width: 160px;
  display: block;
  margin-right: 20px;
  float: left;
}
.checkSelectRoom {
  display: block;
  margin-right: 20px;
}
.checkSelect {
  font-size: 16px;
}
#arrivalRoom {}
#departureRoom {}
.checkinFuncRoom span {
  font-size: 16px;
  color: #000;
  padding-right: 0px;
  margin-right: 10px;
}
.checkBtnRoom {
  margin-top: -5px;
  display: block;
  text-align: right;
}
.checkBtnRoom button {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  display: inline-block;
  width: 180px;
  padding: 5px;
  text-align: center;
  color: #fff;
  font-weight: normal;
  font-size: 16x;
  text-decoration: none;
  background-color: #936D00;
  border-style: none;
  letter-spacing: 1px;
}
.roomSelectLink {
  padding: 40px 0 40px 0;
}
.roomSelectLink ul {
  text-align: center;
}
.roomSelectLink ul li {
  display: inline-block;
  padding: 0 20px 0 0;
}
.roomSelectLink ul li::after {
  content: '|';
  margin-left: 20px;
}
.roomSelectLink ul li:last-child::after {
  content: '';
  margin-left: 0;
}
.roomSelectLink ul li a {
  color: #000;
  font-size: 14px;
  text-decoration: none;
}
.roomSelectLink ul li.active a {
  font-weight: bold;
  text-decoration: underline;
}
.roomSelectLink ul li a.hover {
  text-decoration: underline;
}
.checkBtnRoom em {
  font-weight: bold;
  font-style: normal;
  text-decoration: underline;
}
.checkBtnRoom button {
  width: 300px;
  font-size: 16px;
  line-height: 2;
  margin-top: -5px;
}
#bizclassy .checkBtnRoom button, #bizmodest .checkBtnRoom button {
  width: 320px;
}
.entry.section1200.pages {
  overflow: hidden;
  padding-bottom: 60px;
}
.roomsTitleColumns p {
  font-size: 16px;
  margin: 10px;
}
.gradeWrap {
  margin: 10px 0 20px 0;
}
.gradeWrap span {
  display: inline-block;
  font-size: 11px;
  border: solid 1px #936D00;
  color: #936D00;
  text-align: center;
  padding: 3px;
  margin-left: 2px;
}
.photoCopyright {
  width: 100%;
  display: block;
  font-size: 12px;
  text-align: right;
  margin-top: -20px;
  padding-right: 20px;
  color: #fff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
/* subpage */
.roomEntry {
  padding: 80px 0;
}
.roomEntry h2 {
  position: relative;
  text-align: center;
  font-weight: normal;
  color: #936D00;
  font-size: 18px;
}
.roomEntry h2 span {
  position: absolute;
  right: 250px;
  top: -20px;
  display: block;
  color: #936D00;
  border: solid 1px #936D00;
  width: 60px;
  height: 60px;
  line-height: 60px;
}
p.roomComment {
  margin-top: 80px;
  font-size: 14px;
  line-height: 1.75;
  text-align: center;
}
p.roomCommentCont {
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.75;
}
.roomArticle {
  padding: 100px 0 0;
  border-top: solid 1px #ddd;
}
.fourColumns {
  padding-bottom: 80px;
  overflow: hidden;
}
.fourColumns h3 {
  padding-left: 150px;
  width: 600px;
  font-weight: normal;
  font-size: 18px;
  color: #936D00;
  float: left;
}
.roomNote {
  margin-left: 600px;
}
.roomText {
  color: #000;
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 1em 0;
}
/****************************************************************************************************************/
@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5) {
  body {}
  #headerSection.roomz {
    background-image: url(/sapporo/images/_bg-rooms_.jpg) !important;
    background-position: center;
  }
  #headerSection.pbath {
    background-image: url(/sapporo/images/_bg-pbath.jpg) !important;
  }
  #headerSection.terrace {
    background-image: url(/sapporo/images/_bg-terrace_.jpg) !important;
  }
  #headerSection.thegate {
    background-image: url(/sapporo/images/_bg-thegate_.jpg) !important;
  }
  #headerSection.luxe {
    background-image: url(/sapporo/images/_bg-luxe_.jpg) !important;
  }
  #headerSection.classy {
    background-image: url(/sapporo/images/_bg-classy_.jpg) !important;
  }
  #headerSection.scenic {
    background-image: url(/sapporo/images/_bg-scenic_.jpg) !important;
  }
  #headerSection.essential {
    background-image: url(/sapporo/images/_bg-essential_.jpg) !important;
  }
  #headerSection.bizluxe {
    background-image: url(/sapporo/images/_bg-bizluxe_.jpg) !important;
  }
  #headerSection.bizclassy {
    background-image: url(/sapporo/images/_bg-bizclassy_.jpg) !important;
  }
  #headerSection.bizmodest {
    background-image: url(/sapporo/images/_bg-bizmodest_.jpg) !important;
  }
  .innerImage.imgTheGate {
    background-image: url(/sapporo/images/img-rooms-the-gate_.jpg) !important;
  }
  .innerImage.imgLuxe {
    background-image: url(/sapporo/images/img-rooms-luxe_.jpg) !important;
    background-position: top center;
  }
  .innerImage.imgClassy {
    background-image: url(/sapporo/images/img-rooms-classy_.jpg) !important;
  }
  .innerImage.imgScenic {
    background-image: url(/sapporo/images/img-rooms-scenic_.jpg) !important;
  }
  .innerImage.imgEssential {
    background-image: url(/sapporo/images/img-rooms-essential_.jpg) !important;
  }
  .innerImage.imgBizLuxe {
    background-image: url(/sapporo/images/img-rooms-bizluxe_.jpg) !important;
  }
  .innerImage.imgBizClassy {
    background-image: url(/sapporo/images/img-rooms-bizclassy_.jpg) !important;
  }
  .innerImage.imgBizModest {
    background-image: url(/sapporo/images/img-rooms-bizmodest_.jpg) !important;
  }
  #headerSection.thegate {
    background-position: center;
  }
  #headerSection.luxe {
    background-position: center;
  }
  #headerSection.classy {
    background-position: center;
  }
  #headerSection.canopy {
    background-position: center;
  }
  #headerSection.essential {
    background-position: center;
  }
  #headerSection.authentic {
    background-position: 70% center;
  }
  #headerSection.modest {
    background-position: center;
  }
  #globalMenuBar {
    margin-top: 0px;
  }
  .opentxt {
    text-align: center;
    padding: 320px 0;
  }
  .opentxt img {
    width: 80%;
  }
  .titleArea {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    position: absolute;
    top: 550px;
    left: 20px; /*color:#fff;
    font-size:36px;
    letter-spacing: 0.1em;
    padding-bottom:5px;
    border-bottom:solid 1px #fff;*/
  }
  .titleArea h1 span {
    font-size: 16px;
  }
  .pages {
    margin: 0 auto;
    padding: 0px;
  }
  #roomsFilter {
    margin: 20px 0;
  }
  #roomsFilter ul {
    display: block;
    text-align: left;
    width: 100%;
  }
  #roomsFilter ul li {
    width: 18%;
    height: 30px;
    display: block;
    font-size: 16px;
    float: left;
    margin: 1%;
  }
  #roomsFilter ul li a {
    display: block;
    font-size: 12px;
    width: 100%;
    height: 100%;
    text-decoration: none;
    padding: 1px 5px;
    background-color: #f0f0f0;
    color: #000;
    text-align: center;
    line-height: 1.5;
    overflow: hidden;
    line-height: 30px;
  }
  #roomsFilter ul li:after {
    margin: 0;
    content: '';
  }
  #roomsFilter .submenu {
    padding-top: 20px;
    clear: both;
    float: none;
    text-align: center;
    font-size: 14px;
  }
  .roomsArticleArea {
    min-height: 420px;
  }
  #roomsArticleBox {
    clear: both;
    width: 100%;
    padding-top: 20px;
    overflow: hidden;
  }
  #roomsArticleBox .articleBox {
    -webkit-transition: all .0s ease;
    transition: all .0s ease;
    display: block;
    width: 100%;
    height: 400px;
    display: block;
    float: left;
    color: #000;
    text-decoration: none;
    overflow: hidden;
  }
  #roomsArticleBox .articleBox.sp {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
  }
  #roomsArticleBox .articleBox .topicsWrap {
    display: block;
    width: 100%;
    height: 360px;
    overflow: hidden;
  }
  #roomsArticleBox .photoWrap {
    width: 100%;
    height: 180px;
    overflow: hidden;
  }
  #roomsArticleBox .articleBox.selected {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    width: 100%;
    height: 360px;
  }
  #roomsArticleBox .articleBox.unSelected {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    width: 100%;
    height: 0px;
  }
  #roomsArticleBox .entryWrap {
    width: 100%;
    float: none;
    padding: 20px;
    overflow: auto;
  }
  #roomsArticleBox .entryWrap > span {
    font-size: 14px;
    float: right;
  }
  #roomsArticleBox .entryWrap h2 {
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  #roomsArticleBox .articleBox a.more {
    width: 150px;
  }
  #roomsArticleBox .photoWrap .iconRoom {
    position: absolute;
    bottom: 0px;
    left: 0px;
  }
  #roomsArticleBox .entryWrap dl {
    width: 280px;
    margin-bottom: 0px;
    line-height: 2;
    font-size: 12px;
    float: left;
  }
  #roomsArticleBox .entryWrap dl dt {
    width: 70px;
    float: left;
    clear: both;
  }
  #roomsArticleBox .entryWrap dl dd {
    width: 200px;
    float: left;
  }
  #roomsArticleBox .photoWrap .iconRoom span {
    display: block;
    font-size: 10px;
    background-color: #fff;
    text-align: center;
    color: #000;
    width: auto;
    margin-right: 1px;
    padding: 0 7px;
    float: left;
    min-width: 80px;
  }
  #roomsArticleBox .photoWrap .iconRoom span.udt {
    font-size: 10px;
    white-space: nowrap;
    width: 115px;
  }
  #breakfast {
    margin-bottom: 0;
    height: 440px;
  }
  #breakfast .imageSliding.left .indexImage {
    -webkit-transition: all 0s ease;
    transition: all 0s ease;
    margin-top: 20px;
    width: 100%;
    height: 200px;
    background-image: url(/sapporo/images/img-bg-breakfast_.jpg);
    background-size: 130%;
    background-position: center 0;
  }
  #breakfast .commentSliding.right .indexCommentCage {
    -webkit-transition: all 0s ease;
    transition: all 0s ease;
    position: relative;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100px;
    background-color: #fff;
  }
  .breakfastImage {
    width: 100%;
    float: none;
  }
  .breakfastImage img {
    width: 80%;
    height: auto;
    margin: 0 10%;
  }
  .breakfastTime {
    width: 100%;
    float: none;
  }
  .breakfastTime .buttonContena {
    text-align: center;
    margin: 0 auto 50px;
  }
  #breakfastCont {
    padding-bottom: 0px;
  }
  #breakfastCont dl {
    padding: 0px 50px 40px;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 2;
  }
  #breakfastCont dt {
    clear: both;
  }
  #breakfastCont dd {
    padding: 0;
  }
  #pbath {
    overflow: visible;
    height: auto;
    margin-bottom: 30px;
  }
  #pbath .imageSliding.right .indexImage {
    -webkit-transition: all 0s ease;
    transition: all 0s ease;
    margin-top: 50px;
    width: 100%;
    height: 200px;
    background-image: url(/sapporo/images/img-bg-pbath.jpg);
    background-size: 180%;
    background-position: center -50px;
  }
  #pbath .commentSliding.left .indexCommentCage {
    -webkit-transition: all 0s ease;
    transition: all 0s ease;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 280px;
    background-color: #fff;
  }
  #pbath .btnContena a {
    text-align: center;
    margin: 30px auto;
  }
  #pLounge {
    overflow: visible;
    margin-bottom: 50px;
  }
  #pLounge .imageSliding.left .indexImage {
    -webkit-transition: all 0s ease;
    transition: all 0s ease;
    margin-top: 50px;
    width: 100%;
    height: 200px;
    background-image: url(/sapporo/images/img-bg-plounge_.jpg);
    background-size: 130%;
    background-position: center 0;
  }
  #pLounge .commentSliding.right .indexCommentCage {
    -webkit-transition: all 0s ease;
    transition: all 0s ease;
    position: relative;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100px;
    background-color: #fff;
  }
  .commentSliding.right .target.on {
    transform: translateX(0);
  }
  .imageSliding.left .target.on {
    transform: translateX(0);
  }
  .commentSliding {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
  .commentSliding.left .target.on {
    transform: translateX(0);
  }
  .imageSliding.right .target.on {
    transform: translateX(0);
  }
  #facility .pages {
    padding-top: 30px;
    overflow: hidden;
  }
  #facility {
    padding-bottom: 0;
  }
  .facilityBox {
    width: 50%;
    min-height: 310px;
    overflow: auto;
    float: left;
  }
  .facilityImage {
    width: 100%;
    height: auto;
    float: none;
  }
  .facilityContents {
    padding: 10px 10px;
  }
  .facilityColumns, .amenityColumns {
    clear: both;
    width: 100%;
    float: none;
    padding: 10px;
  }
  /***********/
  .roomsTitleColumns {
    width: 100%;
    float: none;
    padding: 20px 10px;
  }
  .roomsReadColumns {
    width: 100%;
    float: none;
    padding: 20px 10px;
  }
  .roomsReadColumns h3 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 10px;
  }
  .roomsReadColumns p {
    font-size: 14px;
    line-height: 1.75;
  }
  .entry h2 {
    font-weight: bold;
    margin-bottom: 0px !important;
    letter-spacing: 0.05em;
  }
  .entry hr.roomsTitle {
    width: 96px;
    text-align: left;
    margin-left: 0;
    background-color: #000;
    border: none;
    height: 1px;
    margin-bottom: 10px;
  }
  /***************/
  .tabs {}
  .tabs ul.tabsMenu {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding-left: .5%;
  }
  .tabs ul.tabsMenu li {
    margin-right: .5%;
    width: 19.5%;
    float: left;
  }
  .tabs ul.tabsMenu li span {
    display: block;
    width: 100%;
    min-width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    padding: 0;
  }
  #tab1, #tab2, #tab3, #tab4, #tab5, #tab6 {
    /*position: absolute;
    top: 40px;
    left: 0;*/
    background-color: #e6e6e6;
    width: 100%;
    min-height: 440px;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow: hidden;
  }
  .slick-prev, .slick-next {
    display: none !important;
  }
  .slick-images .item {
    height: auto;
    padding-left: 5px;
    padding-right: 5px;
  }
  /**************/
  dl.roomSpec {
    padding: 20px 0 0px;
    width: 100%;
    min-width: 100%;
    text-align: left;
    line-height: 2;
    overflow: hidden;
  }
  dl.roomSpec dt {
    width: 100px;
    font-weight: bold;
    display: block;
    margin-right: 0px;
    margin-left: 20px !important;
    float: left;
    font-size: 16px;
  }
  dl.roomSpec dd {
    font-weight: normal;
    display: block;
    margin-right: 0px;
    margin-left: 150px;
    font-size: 16px;
  }
  dl.roomSpec img {
    margin-top: 10px;
    width: auto;
    height: 48px;
  }
  .roomSpecArticle {
    clear: both;
    padding: 0;
  }
  .equipmentSmallColumns ul li, .amenitySmallColumns ul li {
    list-style-type: disc;
    line-height: 1.5;
    font-size: 14px;
    margin-left: 20px;
  }
  .equipmentSmallColumns {
    width: 100%;
    float: none;
    padding: 10px;
    margin-left: 0;
  }
  .equipmentSmallColumns ul, .amenitySmallColumns ul {
    margin: 0;
    float: none;
    width: 100%;
  }
  .amenitySmallColumns {
    width: 100%;
    float: none;
    padding: 10px;
    margin-right: 0;
  }
  .checkinFuncRoom {
    clear: both;
    padding: 20px 30px;
    z-index: 30000;
    text-align: left;
    background-color: #936D00;
    margin-top: 0px;
  }
  .checkinFuncRoom span {
    display: inline-block;
    width: 110px;
    font-size: 20px;
    color: #fff;
    padding-right: 0px;
    margin-right: 10px;
  }
  .checkInRoom {
    width: 100%;
    display: block;
    margin-right: 0;
    float: none;
    padding-bottom: 20px;
  }
  .checkOutRoom {
    width: 100%;
    display: block;
    margin-right: 0;
    float: none;
    padding-bottom: 20px;
  }
  .checkForRoom {
    width: 100%;
    display: block;
    margin-right: 0;
    float: none;
    padding-bottom: 20px;
  }
  .checkBtnRoom {
    margin-top: 10px;
    display: block;
    text-align: center;
  }
  input.datePickers {
    font-size: 24px;
    background-image: url(/sapporo/images/calendar.png);
    background-size: 24px 24px;
    background-position: right center;
    background-repeat: no-repeat;
  }
  #bookNowForRoom {
    width: 40%;
    padding: 5px;
    font-size: 24px;
    font-family: Arial, sans-serif;
    border: solid 1px #ccc;
    vertical-align: middle;
    line-height: 1;
    margin-bottom: 10px;
    background-color: #fff;
  }
  .checkBtnRoom button {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    display: inline-block;
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding: 0px;
    text-align: center;
    color: #fff;
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    background-color: #936D00;
    border-style: none;
    border: solid 1px #fff;
    letter-spacing: 1px;
  }
  .roomSelectLink ul {
    text-align: center;
    overflow: hidden;
  }
  .roomSelectLink ul li {
    display: block;
    width: 25%;
    float: left;
    padding: 0;
  }
  .roomSelectLink ul li.biz {
    width: 50%;
  }
  .roomSelectLink ul li a {
    display: block;
    width: 100%;
    height: 40px;
    color: #000;
    font-size: 14px;
    text-decoration: none;
    border: solid 1px #ddd;
    background-color: #e6e6e6;
    line-height: 40px;
  }
  .roomSelectLink ul li:first-child a {
    background-color: #333;
    color: #fff;
  }
  .roomSelectLink ul li::after {
    content: '';
    margin-left: 0px;
  }
  .tabs .section1200 {
    overflow: hidden;
  }
  .equipmentSmallColumns h3 {
    position: relative;
    cursor: pointer;
  }
  .equipmentSmallColumns h3::after {
    position: absolute;
    content: '\25BC';
    top: 20px;
    left: 49%;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  .equipmentSmallColumns h3.open::after {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
  .amenitySmallColumns h3 {
    position: relative;
  }
  .amenitySmallColumns h3::after {
    position: absolute;
    content: '\25BC';
    top: 20px;
    left: 49%;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  .amenitySmallColumns h3.open::after {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
  .roomSelectLink {
    padding: 0px 0 40px 0;
  }
  .entry.section1200.pages {
    overflow: hidden;
    padding-bottom: 30px;
    padding-top: 30px;
  }
  .tabsMenu .tabDouble {
    width: 60px !important;
  }
  .tabsMenu .tabTwin {
    width: 50px !important;
  }
  .tabsMenu .tabHT {
    width: 100px !important;
  }
  .tabsMenu .tabTriple {
    width: 60px !important;
  }
  .tabsMenu .tabUDT {
    width: 160px !important;
  }
  img.slick-arrow {
    display: none !important;
  }
  dl.roomSpec span.floorPlan {
    text-align: center;
    width: 120px;
  }
  /* subpage */
  .roomEntry {
    padding: 40px 0;
  }
  .roomEntry h2 {
    text-align: left;
    font-size: 18px;
    margin: 0 10px;
    line-height: 1.75;
    padding-left: 80px;
  }
  .roomEntry h2 span {
    position: absolute;
    right: auto;
    top: 5px;
    left: 0;
    display: block;
    color: #936D00;
    border: solid 1px #936D00;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  p.roomComment {
    margin: 40px 10px 0 10px;
    font-size: 14px;
    line-height: 1.75;
    text-align: left;
  }
  p.roomCommentCont {
    margin: 10px 10px 0 10px;
    font-size: 14px;
    line-height: 1.75;
    text-align: left;
  }
  .roomArticle {
    padding: 40px 0 0;
  }
  .fourColumns {
    padding-bottom: 20px;
  }
  .fourColumns h3 {
    width: 100%;
    font-size: 16px;
    float: none;
    padding-left: 0;
    margin: 0 10px 20px 10px;
  }
  .roomArticle .fourColumns span {
    font-size: 18px;
  }
  .roomNote {
    margin: 10px;
  }
  .roomText {
    font-size: 14px;
    line-height: 1.75;
    margin: 0 10px 10px 10px;
  }
}