/*
  subpage-header.css
  お知らせ・ブログ等サブページ用ヘッダー。
  Mobile〜839px: ロゴのみ / 840px~: ロゴ・ナビ・LINE予約を横並び。
*/

.subpage-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-border);
  background-color: rgb(250 250 248 / 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.subpage-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  padding-inline: var(--container-padding);
}

.subpage-header .site-logo {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.subpage-nav,
.subpage-header__cta {
  display: none;
}

.subpage-nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.subpage-nav__list a {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}

.subpage-nav__list a:hover {
  color: var(--color-accent);
  opacity: 1;
}

@media (min-width: 840px) {
  .subpage-nav {
    display: block;
  }

  .subpage-header__cta {
    display: inline-flex;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }

  .subpage-header__cta .btn__icon {
    width: 1rem;
    height: 1rem;
  }
}