/* 役割: 予約レール共通表示。
 * 利用ページ: Appeal、Aria、Article-corn、Article-elephant、Article-onshika、Cuisine、Echelon、Ember、Experience、Hearth、Kurohime、Longevity、Story、Program-bath-rest、Program-caralia、Program-fire、Program-room-day、Program-sauna、Programs、Rooms、Serene、Stay、Story-autumn、Story-corn-local、Story-history-elephant、Story-legend、Story-nojiri、Story-onshika、Story-seasonal-food、Story-spring、Story-summer、Story-winter（日英）。
 * 関係する棚: メニュー・日英・フッター・共通土台。
 * 注意: 元の詳細度・!important・条件分岐を保持。生成位置はplacement.jsonの最終旧ブロック。
 */
#loma-booking-rail {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 990;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 184px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.2);
  color: #fff;
  text-decoration: none;
  font-family: yu-gothic-pr6n,sans-serif;
  font-weight: 400;
  line-height: normal;
  transition: background-color .26s cubic-bezier(.445,.05,.55,.95)
}
#loma-booking-rail .booking-label {
  display: block;
  margin: 0 0 22px;
  padding: 0;
  writing-mode: vertical-rl;
  font-family: yu-gothic-pr6n,sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .6rem;
  color: #fff
}
#loma-booking-rail svg {
  position: absolute;
  bottom: 3px;
  display: block;
  width: 32px;
  height: auto;
  flex-shrink: 0
}
#loma-booking-rail:hover {
  background: #000
}
#loma-booking-rail:focus-visible {
  outline: 2px solid #d2cbba;
  outline-offset: 4px
}
html[lang="en"] #loma-booking-rail {
  height: auto;
  min-height: 184px;
  padding-top: 8px;
  padding-bottom: 8px
}
html[lang="en"] #loma-booking-rail .booking-label {
  font-family: Valky,serif;
  letter-spacing: .2rem;
  margin-bottom: 40px
}
@media (min-width:769px) and (max-width:1279px) {
  #loma-booking-rail {
    right: calc(var(--loma-booking-width)/1280*10);
    width: calc(var(--loma-booking-width)/1280*40);
    height: calc(var(--loma-booking-width)/1280*184);
    border-width: calc(var(--loma-booking-width)/1280)
  }
  #loma-booking-rail .booking-label {
    font-size: calc(var(--loma-booking-width)/1280*14);
    margin-bottom: calc(var(--loma-booking-width)/1280*22)
  }
  #loma-booking-rail svg {
    width: calc(var(--loma-booking-width)/1280*32);
    bottom: calc(var(--loma-booking-width)/1280*4 - 1px)
  }
  html[lang="en"] #loma-booking-rail {
    min-height: calc(var(--loma-booking-width)/1280*184);
    padding-top: calc(var(--loma-booking-width)/1280*8);
    padding-bottom: calc(var(--loma-booking-width)/1280*8)
  }
  html[lang="en"] #loma-booking-rail .booking-label {
    margin-bottom: calc(var(--loma-booking-width)/1280*40)
  }
}
@media (max-width:768px) {
  #loma-booking-rail {
    top: 80px;
    transform: none;
    background: #000;
    color: #fff;
    right: calc(var(--loma-booking-width)/750*20);
    width: calc(var(--loma-booking-width)/750*72);
    height: calc(var(--loma-booking-width)/750*260);
    border-width: calc(var(--loma-booking-width)/750*2)
  }
  #loma-booking-rail .booking-label {
    font-size: calc(var(--loma-booking-width)/750*24);
    margin-bottom: calc(var(--loma-booking-width)/750*33)
  }
  #loma-booking-rail svg {
    width: calc(var(--loma-booking-width)/750*60);
    bottom: calc(var(--loma-booking-width)/750*6 - 1px)
  }
  html[lang="en"] #loma-booking-rail {
    min-height: calc(var(--loma-booking-width)/750*260);
    padding-top: calc(var(--loma-booking-width)/750*12);
    padding-bottom: calc(var(--loma-booking-width)/750*12)
  }
  html[lang="en"] #loma-booking-rail .booking-label {
    margin-bottom: calc(var(--loma-booking-width)/750*75)
  }
}