/* ヘッダー：パソコンの専用寸法と配置。上の段にロゴと予約ボタン、下に紺のメニューの帯。スマホの変更は../responsive.css。 */
:where([data-section="header"][data-ui="shiraki"]).site-header {
  background: var(--color-background);
  color: var(--color-text);
}

:where([data-section="header"][data-ui="shiraki"]) .site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-card-gap);
  width: min(100% - var(--space-header-inline) * 2, var(--size-content));
  margin-inline: auto;
  padding-block: var(--space-header-y);
}

:where([data-ui="shiraki"]) :is(.site-header__brand, .site-footer__brand) {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  color: inherit;
  text-decoration: none;
}

:where([data-ui="shiraki"]) :is(.site-header__logo, .site-footer__logo) {
  width: var(--size-logo);
  height: var(--size-logo);
  color: var(--color-primary);
  stroke-width: 1.2;
}

:where([data-ui="shiraki"]) .site-header__names {
  display: grid;
}

:where([data-ui="shiraki"]) :is(.site-header__name, .site-footer__name) {
  font-family: var(--font-title);
  font-size: var(--font-size-brand);
  font-weight: var(--weight-title);
  line-height: var(--line-tight);
  letter-spacing: var(--track-brand);
}

:where([data-ui="shiraki"]) :is(.site-header__sub, .site-footer__sub) {
  color: var(--color-primary);
  font-family: var(--font-latin);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--weight-title);
  letter-spacing: var(--track-eyebrow);
}

:where([data-section="header"][data-ui="shiraki"]) .button {
  min-width: 0;
}

/* メニューの帯（間に縦線） */
:where([data-section="header"][data-ui="shiraki"]) .site-nav {
  display: flex;
  justify-content: center;
  background: var(--color-background);
  color: var(--color-text);
}

:where([data-section="header"][data-ui="shiraki"]) .site-nav__link {
  flex: 0 1 var(--size-button-width);
  padding: var(--space-nav-y) var(--space-stack);
  border-inline-start: var(--size-line) solid var(--color-line);
  font-family: var(--font-control);
  font-weight: var(--weight-heading);
  font-size: var(--font-size-button);
  line-height: var(--line-tight);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--motion-duration) var(--motion-easing);
}

:where([data-section="header"][data-ui="shiraki"]) .site-nav__link:first-child {
  border-inline-start: 0;
}

:where([data-section="header"][data-ui="shiraki"]) .site-nav__link:is(:hover, :focus-visible) {
  color: var(--color-primary);
}

/* メニューの中の予約ボタンは、スマホのドロワーだけで出す */
:where([data-section="header"][data-ui="shiraki"]) .site-nav__button {
  display: none;
}

:where([data-section="header"][data-ui="shiraki"]) .site-header__toggle {
  display: none;
  width: var(--size-header-toggle);
  height: var(--size-header-toggle);
  padding: var(--space-small);
  border: var(--size-line) solid var(--color-text);
  background: var(--color-transparent);
  color: inherit;
}

:where([data-section="header"][data-ui="shiraki"]) .site-header__bar {
  display: block;
  height: var(--size-line);
  width: var(--size-header-toggle-bar);
  margin-block: var(--space-tiny);
  background: currentColor;
}

/* 開いたドロワーの閉じるアイコン。既存の状態classを利用する。 */
:where([data-section="header"][data-ui="shiraki"]) .site-header__toggle.is-open .site-header__bar:nth-child(1) {
  transform: translateY(calc(var(--space-tiny) + var(--size-line))) rotate(45deg);
}

:where([data-section="header"][data-ui="shiraki"]) .site-header__toggle.is-open .site-header__bar:nth-child(2) {
  opacity: 0;
}

:where([data-section="header"][data-ui="shiraki"]) .site-header__toggle.is-open .site-header__bar:nth-child(3) {
  transform: translateY(calc((var(--space-tiny) + var(--size-line)) * -1)) rotate(-45deg);
}