/* /css/shared_header.css
 * rifit7.xsrv.jp の Lightning ヘッダーを静的HTMLへ表示するための補助CSS
 */

#shared-header-slot,
#shared-header-root {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#shared-header-slot {
  position: relative;
  z-index: 10000;
}

#shared-header-root {
  opacity: 0;
  transition: opacity .12s linear;
}

#shared-header-root.is-ready {
  opacity: 1;
}

.shared-header-loading {
  box-sizing: border-box;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #fff;
  color: #666;
  font-size: 14px;
  text-align: center;
}

#shared-header-root.is-ready > .shared-header-loading {
  display: none;
}

/* 旧ページ側の画像CSSがヘッダーへ波及しにくくする */
#shared-header-root img {
  max-width: 100%;
  height: auto;
}

/* モバイルメニュー表示時 */
html.shared-mobile-nav-open,
body.shared-mobile-nav-open {
  overflow-x: hidden;
}

/* 読み込みエラーを目視できるようにする */
.shared-header-error {
  box-sizing: border-box;
  padding: 14px 18px;
  background: #fff8f8;
  border-bottom: 1px solid #e1b9b9;
  color: #7a1d1d;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

/* Lightning 側の詳細CSSを尊重するため、ここでは最低限のみ */
#shared-header-root *,
#shared-header-root *::before,
#shared-header-root *::after {
  box-sizing: border-box;
}