/* 役割: グローバルメニュー・上部バーの共通／ページ表示・処理。
 * 利用ページ: Aria、Echelon、Ember、Hearth、Rooms、Serene（日英）。
 * 関係する棚: S01共通土台・S04日英・S05予約・S10履歴・S12TOP・S16導入。
 * 注意: 詳細度・media・JS実行位置を保持。!important変更は証拠台帳に限定。P/U置換依存は変更しない。placement.jsonと地図の更新.mdを参照。名前付き区画は元slotへ生成。URLはsrc担当、helper不在時は従来処理へ戻す。
 */
html body>header.loma-room-global {
  margin: 0;
  inset: 0 0 auto;
  width: 100%;
  height: 73px;
  min-height: 73px;
  box-sizing: border-box;
}
html body.room-detail:has(>header.loma-room-global)>main.detail-wrap {
  margin-top: calc(35px + 73px);
}
html body>[data-loma-menu-flow="20261010"] {
  display: block;
  height: 90px;
  flex: none;
  pointer-events: none;
}
html body>header.brandhead,
html body#loma-experience-page>header.brandhead {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  height: 73px;
  min-height: 68px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  padding: 12px 82px 12px 4%;
  margin: 0;
  z-index: 1000;
  background: rgba(0,0,0,.95);
  color: #fff;
  border: 0;
  border-bottom: 1px solid #333;
  font-family: yu-gothic-pr6n,sans-serif;
  letter-spacing: normal;
}
html body>header.brandhead>a:first-child {
  display: flex;
  align-items: center;
  flex: 0 0 145px;
  width: 145px;
  min-height: 40px;
  margin: 0;
  border: 0;
  text-decoration: none;
}
html body>header.brandhead>a:first-child>svg {
  display: block;
  width: 145px;
  height: auto;
}
html body>header.brandhead>.page-menu[data-loma-top-menu="20261010"] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: clamp(16px,2.6vw,38px);
  margin: 0 0 0 auto;
  padding: 0;
  max-width: none;
  white-space: nowrap;
  font-size: 14px;
  letter-spacing: normal;
  line-height: 2;
}
html body>header.brandhead>.page-menu[data-loma-top-menu="20261010"]>a {
  padding: 10px 0;
  border: 0;
  font-size: 14px;
  letter-spacing: normal;
  line-height: 2;
  text-decoration: none;
  color: inherit;
}
html body>header.brandhead>.page-menu[data-loma-top-menu="20261010"]>a:hover {
  padding: 10px 0;
  border: 0;
  font-size: 14px;
  letter-spacing: normal;
  line-height: 2;
  text-decoration: none;
}
html body>header.brandhead>.page-menu[data-loma-top-menu="20261010"]>a:focus {
  padding: 10px 0;
  border: 0;
  font-size: 14px;
  letter-spacing: normal;
  line-height: 2;
  text-decoration: none;
  color: inherit;
}
html body>header.brandhead>.page-menu[data-loma-top-menu="20261010"]>a.compact-menu-reserve {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid #888;
  padding: 8px 17px;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  box-sizing: content-box;
}
html body>header.brandhead>.page-menu[data-loma-top-menu="20261010"]>a:hover {
  color: #d2cbba;
}
html body>header.brandhead>.page-menu[data-loma-top-menu="20261010"]>a:focus-visible,
html body>header.brandhead>a:first-child:focus-visible,
html body:has(>header.brandhead)>button[data-menu-trigger]:focus-visible,
html body>header.loma-room-global>button[data-open="menu"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
html body>header.brandhead>a:not(:first-child) {
  display: none;
}
html body:has(>header.brandhead)>button[data-menu-trigger],
html body>header.loma-room-global>button[data-open="menu"] {
  position: fixed;
  top: 9px;
  right: 8px;
  left: auto;
  bottom: auto;
  display: block;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
html body:has(>header.brandhead)>button[data-menu-trigger]>svg,
html body>header.loma-room-global>button[data-open="menu"]>svg {
  position: absolute;
  left: 2px;
  top: 11px;
  display: block;
  width: 40px;
  height: 22px;
  margin: 0;
}
@media (max-width:900px) {
  html body.room-detail:has(>header.loma-room-global)>main.detail-wrap {
    margin-top: calc(35px + 62px);
  }
  html body>header.loma-room-global {
    height: 62px;
    min-height: 62px;
  }
  html body>header.brandhead,
html body#loma-experience-page>header.brandhead {
    height: 62px;
    min-height: 62px;
    padding: 10px 64px 10px 5%;
    gap: 12px;
  }
  html body>header.brandhead>a:first-child {
    flex-basis: 116px;
    width: 116px;
  }
  html body>header.brandhead>a:first-child>svg {
    width: 116px;
  }
  html body>header.brandhead>.page-menu[data-loma-top-menu="20261010"] {
    display: contents;
  }
  html body>header.brandhead>.page-menu[data-loma-top-menu="20261010"]>a:not(.compact-menu-reserve) {
    display: none;
  }
  html body>header.brandhead>.page-menu[data-loma-top-menu="20261010"]>a.compact-menu-reserve {
    margin-left: auto;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 10px;
    min-height: 38px;
    box-sizing: border-box;
  }
  html body:has(>header.brandhead)>button[data-menu-trigger],
html body>header.loma-room-global>button[data-open="menu"] {
    top: 0;
    right: 8px;
    width: 40px;
    height: 44px;
  }
  html body:has(>header.brandhead)>button[data-menu-trigger]>svg,
html body>header.loma-room-global>button[data-open="menu"]>svg {
    left: 2px;
    top: 12.5px;
    width: 36px;
    height: 19.8px;
  }
}
@media (max-width:768px) {
  html body>[data-loma-menu-flow="20261010"] {
    height: 72px;
  }
  html body.room-detail:has(>header.loma-room-global)>main.detail-wrap {
    margin-top: calc(25px + 62px);
  }
}
@media (max-width:343px) {
  html[lang="ja"] body>[data-loma-menu-flow="20261010"]:has(+header.brandhead>a:not(:first-child)) {
    height: 89px;
  }
}
@media (max-width:350px) {
  html body>header.brandhead,
html body#loma-experience-page>header.brandhead {
    padding-left: 12px;
    gap: 8px;
  }
  html body>header.brandhead>a:first-child {
    flex-basis: 100px;
    width: 100px;
  }
  html body>header.brandhead>a:first-child>svg {
    width: 100px;
  }
  html body>header.brandhead>.page-menu[data-loma-top-menu="20261010"]>a.compact-menu-reserve {
    font-size: 12px;
    padding-inline: 8px;
  }
}