/* .ui-label
   ========================================================================== */

.styleguide-scope .ui-label,
.ui-label {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #999;
  border-radius: 2px;
  background-color: #fff;
  color: #666;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.3;
}

.styleguide-scope .ui-label em,
.ui-label em {
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
}

/* .ui-label-meal
   ========================================================================== */

.styleguide-scope .ui-label-meal,
.ui-label-meal {
  box-sizing: border-box;
  position: relative;
  contain: paint;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 18px;
  padding: 0 3px 0 16px;
  border: 1px solid #999;
  border-radius: 2px;
  background-color: #fff;
  color: #666;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.3;
}

.styleguide-scope .ui-label-meal::before,
.ui-label-meal::before {
  content: '';
  position: absolute;
  inset: 0 calc(100% - 14px) 0 0;
  background: #999 center / 9px 10px no-repeat
    url(/assets/img/common/icons/icon_meallabel_gra.svg);
}

/* .ui-label-emphasis-orange
   ========================================================================== */

.styleguide-scope .ui-label-emphasis-orange,
.ui-label-emphasis-orange {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #e78a13;
  border-radius: 2px;
  background-color: #fff;
  color: #e78a13;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.3;
}

.styleguide-scope .ui-label-emphasis-orange em,
.ui-label-emphasis-orange em {
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
}

.styleguide-scope .ui-label-emphasis-orange-bold,
.ui-label-emphasis-orange-bold {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #e78a13;
  border-radius: 2px;
  background-color: #fff;
  color: #e78a13;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-emphasis-orange-bold em,
.ui-label-emphasis-orange-bold em {
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
}

/* .ui-label-emphasis-red
   ========================================================================== */

.styleguide-scope .ui-label-emphasis-red,
.ui-label-emphasis-red {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #fc0d1c;
  border-radius: 2px;
  background-color: #fff;
  color: #fc0d1c;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.3;
}

.styleguide-scope .ui-label-emphasis-red em,
.ui-label-emphasis-red em {
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
}

.styleguide-scope .ui-label-emphasis-red-bold,
.ui-label-emphasis-red-bold {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #fc0d1c;
  border-radius: 2px;
  background-color: #fff;
  color: #fc0d1c;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-emphasis-red-bold em,
.ui-label-emphasis-red-bold em {
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
}

/* .ui-label-emphasis-purple
   ========================================================================== */

.styleguide-scope .ui-label-emphasis-purple,
.ui-label-emphasis-purple {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #8e69f7;
  border-radius: 2px;
  background-color: #fff;
  color: #8e69f7;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.3;
}

.styleguide-scope .ui-label-emphasis-purple em,
.ui-label-emphasis-purple em {
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
}

.styleguide-scope .ui-label-emphasis-purple-bold,
.ui-label-emphasis-purple-bold {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #8e69f7;
  border-radius: 2px;
  background-color: #fff;
  color: #8e69f7;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-emphasis-purple-bold em,
.ui-label-emphasis-purple-bold em {
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
}

/* .ui-label-emphasis-blue
   ========================================================================== */

.styleguide-scope .ui-label-emphasis-blue,
.ui-label-emphasis-blue {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #399aca;
  border-radius: 2px;
  background-color: #fff;
  color: #399aca;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.3;
}

.styleguide-scope .ui-label-emphasis-blue em,
.ui-label-emphasis-blue em {
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
}

/* .ui-label-emphasis-sale
   ========================================================================== */

.styleguide-scope .ui-label-emphasis-sale,
.ui-label-emphasis-sale {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #e02d57;
  border-radius: 2px;
  background-color: #fff;
  color: #e02d57;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

/* .ui-label-strong-alert
   ========================================================================== */

.styleguide-scope .ui-label-strong-alert,
.ui-label-strong-alert {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #ca1738;
  border-radius: 2px;
  background-color: #ca1738;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

/* .ui-label-strong-sale
   ========================================================================== */

.styleguide-scope .ui-label-strong-sale,
.ui-label-strong-sale {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #e02d57;
  border-radius: 2px;
  background-color: #e02d57;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

/* .ui-label-strong-discount
   ========================================================================== */

.styleguide-scope .ui-label-strong-discount,
.ui-label-strong-discount {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #fc0d1c;
  border-radius: 2px;
  background-color: #fc0d1c;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-strong-discount em,
.ui-label-strong-discount em {
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
}

/* .ui-label-strong-stage
   ========================================================================== */

.styleguide-scope .ui-label-strong-stage-gold,
.ui-label-strong-stage-gold {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #ba8c00;
  border-radius: 2px;
  background-color: #ba8c00;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

.styleguide-scope .ui-label-strong-stage-silver,
.ui-label-strong-stage-silver {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #929ba0;
  border-radius: 2px;
  background-color: #929ba0;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

.styleguide-scope .ui-label-strong-stage-bronze,
.ui-label-strong-stage-bronze {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #c7713e;
  border-radius: 2px;
  background-color: #c7713e;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

/* .ui-label-point
   ========================================================================== */

.styleguide-scope .ui-label-point,
.ui-label-point {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #e78a13;
  border-radius: 2px;
  background-color: #fff;
  color: #e76610;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.3;
}

.styleguide-scope .ui-label-point em,
.ui-label-point em {
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
}

/* .ui-label-point-filled
   ========================================================================== */

.styleguide-scope .ui-label-point-filled,
.ui-label-point-filled {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #e78a13;
  border-radius: 2px;
  background-color: #e78a13;
  color: #fff;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.3;
}

.styleguide-scope .ui-label-point-filled em,
.ui-label-point-filled em {
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
}

/* .ui-label-special-offer
   ========================================================================== */

.styleguide-scope .ui-label-special-offer-1,
.ui-label-special-offer-1 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #39b6c7;
  border-radius: 2px;
  background-color: #39b6c7;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-special-offer-2,
.styleguide-scope .ui-label-special-offer-7,
.styleguide-scope .ui-label-special-offer-8,
.styleguide-scope .ui-label-special-offer-9,
.styleguide-scope .ui-label-special-offer-14,
.ui-label-special-offer-2,
.ui-label-special-offer-7,
.ui-label-special-offer-8,
.ui-label-special-offer-9,
.ui-label-special-offer-14 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #e78a13;
  border-radius: 2px;
  background-color: #e78a13;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-special-offer-3,
.styleguide-scope .ui-label-special-offer-4,
.ui-label-special-offer-3,
.ui-label-special-offer-4 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #f384a6;
  border-radius: 2px;
  background-color: #f384a6;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-special-offer-5,
.ui-label-special-offer-5 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #c184d7;
  border-radius: 2px;
  background-color: #c184d7;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-special-offer-6,
.ui-label-special-offer-6 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #9dbb4f;
  border-radius: 2px;
  background-color: #9dbb4f;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-special-offer-10,
.styleguide-scope .ui-label-special-offer-15,
.ui-label-special-offer-10,
.ui-label-special-offer-15 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #8aaf20;
  border-radius: 2px;
  background-color: #8aaf20;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-special-offer-11,
.ui-label-special-offer-11 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #437bc0;
  border-radius: 2px;
  background-color: #437bc0;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-special-offer-12,
.styleguide-scope .ui-label-special-offer-13,
.ui-label-special-offer-12,
.ui-label-special-offer-13 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #ff6439;
  border-radius: 2px;
  background-color: #ff6439;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

/* .ui-label-check-in-out
   ========================================================================== */

.styleguide-scope .ui-label-check-in-out,
.ui-label-check-in-out {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 0 3px;
  border: 1px solid #918b8a;
  background-color: #918b8a;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

/* .ui-label-kuchikomi
   ========================================================================== */

.styleguide-scope .ui-label-kuchikomi,
.ui-label-kuchikomi {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 3px;
  border: 1px solid #e78a13;
  background-color: #fff;
  color: #e78a13;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
}

/* .ui-label-night
   ========================================================================== */

.styleguide-scope .ui-label-night,
.ui-label-night {
  box-sizing: border-box;
  position: relative;
  contain: paint;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 18px;
  padding: 0 3px 0 16px;
  border: 1px solid #331284;
  border-radius: 2px;
  background-color: #331284;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

.styleguide-scope .ui-label-night::before,
.ui-label-night::before {
  content: '';
  position: absolute;
  inset: 0 calc(100% - 14px) 0 0;
  background: center / 9px 10px no-repeat
    url(/assets/img/common/icons/icon_24night.svg);
}

/* .ui-label-browsed
   ========================================================================== */

.styleguide-scope .ui-label-browsed,
.ui-label-browsed {
  box-sizing: border-box;
  position: relative;
  contain: paint;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 16px;
  padding: 0 4px 0 20px;
  border: 1px solid #e0dbd7;
  background-color: #e0dbd7;
  color: #5b4843;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-browsed::before,
.ui-label-browsed::before {
  content: '';
  position: absolute;
  inset: 0 calc(100% - 16px) 0 0;
  background: 4px 50% / 12px 9px no-repeat
    url(/assets/img/common/icons/icon_check_gra.svg);
}

/* .ui-label-dp-jal
   ========================================================================== */

.styleguide-scope .ui-label-dp-jal,
.ui-label-dp-jal {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  min-height: 16px;
  color: #5b4843;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-dp-jal::before,
.ui-label-dp-jal::before {
  content: '';
  width: 56px;
  height: 15px;
  background: center / 56px 15px no-repeat url(/assets/img/common/logo_jal.svg);
}

/* .ui-label-dp-ana
   ========================================================================== */

.styleguide-scope .ui-label-dp-ana,
.ui-label-dp-ana {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  min-height: 16px;
  color: #5b4843;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
}

.styleguide-scope .ui-label-dp-ana::before,
.ui-label-dp-ana::before {
  content: '';
  width: 56px;
  height: 15px;
  background: center / 56px 15px no-repeat url(/assets/img/common/logo_ana.svg);
}