/* ログアウト導線のヘッダーナビゲーション(Figma: manu / node-id=4224-752)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 *
 * 依存: guest/menu_item.css も併せて読み込むこと
 *
 * **PC専用のコンポーネント(SP版は作らない方針)。**
 * SPでは代わりに guest/hamburger_menu を出す。出し分けはページ側の責務。 */
.guest-header-nav {
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
}

.guest-header-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 60px;
  /* Figma: pl 16px / pr 8px / py 8px */
  padding: 8px 8px 8px 16px;
  border-radius: 100px;
  /* color/background/header は不透明度90%を含むトークン(#FFFDFAE5)。
   * パレットのプリミティブには対応する値が無いため、セマンティックが実値を持っている。 */
  background: var(--guest-color-background-header);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  /* 影はエフェクトスタイル "header" (#FFAF514D / 30%、hamburger_menuが使用)ではなく、
   * このノード固有の値。常に画面上部にあるヘッダーバーなので控えめにするための意図的な指定
   * (デザイナー確認済み)。色 #FF9D29 はカラーパレットには無い値。 */
  box-shadow: 0 0 16px rgba(255, 157, 41, 0.1);
}

.guest-header-nav__logo {
  display: flex;
  flex: none;
  align-items: center;
  aspect-ratio: 116 / 35;
  height: 100%;
  overflow: hidden;
}

.guest-header-nav__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.guest-header-nav__right {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.guest-header-nav__menu {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.guest-header-nav__buttons {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 100%;
}

/* ヘッダー内のボタン。
 * guest/primary_button・secondary_button とは寸法とtext styleが異なるため別定義。
 * text styleは guest/button/pc-header (16px / Bold / lh 1)。 */
.guest-header-nav__button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 100%;
  max-width: 400px;
  padding: 0 24px;
  border: none;
  border-radius: 100px;
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-base);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-none);
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
}

.guest-header-nav__button--primary,
.guest-header-nav__button--primary:link,
.guest-header-nav__button--primary:visited,
.guest-header-nav__button--primary:focus,
.guest-header-nav__button--primary:hover,
.guest-header-nav__button--primary:active {
  background: var(--guest-color-button-default);
  color: var(--guest-color-text-white);
}

.guest-header-nav__button--primary:hover,
.guest-header-nav__button--primary:active {
  background: linear-gradient(168deg, var(--color-orange-500) 7.1429%, var(--color-orange-300) 92.857%);
}

.guest-header-nav__button--secondary,
.guest-header-nav__button--secondary:link,
.guest-header-nav__button--secondary:visited,
.guest-header-nav__button--secondary:focus,
.guest-header-nav__button--secondary:hover,
.guest-header-nav__button--secondary:active {
  border: 1px solid var(--guest-color-border-orange);
  background: var(--guest-color-background-white);
  color: var(--guest-color-text-orange);
}