/*
 * 湯にぞなす.熱湯 共通ヘッダー
 * どトップ(public_html/index.html)と EC-CUBE の /unote/ の両方がこの1枚を読む。
 * 見た目はここだけで決める(各ページの CSS にヘッダーの指定を書かない)。
 * HTML は index.html と unote の Block/header.twig・site_header_nav.twig・cart.twig を同じ形に保つ。
 * EC-CUBE の Bootstrap の既定(body 14px・a の下線など)に左右されないよう、文字まわりは全部ここで指定する。
 */
.site-header {
  --site-header-ink: #1f2524;
  --site-header-red: #d94d35;
  --site-header-teal: #1e716c;
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0;
  padding: 0;
  color: var(--site-header-ink);
  background: rgba(251, 250, 247, .96);
  border-bottom: 1px solid rgba(31, 37, 36, .10);
  backdrop-filter: blur(12px);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header a, .site-header a:hover { text-decoration: none; }
.site-header__inner { display: flex; align-items: center; width: min(1320px, calc(100% - 48px)); min-height: 76px; gap: 28px; margin: 0 auto; padding: 0; }

.site-header__brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--site-header-ink); line-height: 1; white-space: nowrap; }
.site-header__brand:hover { color: var(--site-header-ink); }
.site-header__mark { display: grid; flex: 0 0 auto; width: 25px; height: 25px; place-items: center; }
.site-header__mark svg { width: 100%; height: 100%; }
.site-header__mark circle { fill: var(--site-header-teal); }
.site-header__mark path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-header__name { font-size: 21px; font-weight: 800; letter-spacing: -.08em; }
.site-header__name b { margin-left: 4px; color: var(--site-header-red); font-weight: 900; }

.site-header__nav { display: flex; align-items: center; gap: 12px; margin: 0 0 0 auto; padding: 0; font-size: 14px; font-weight: 700; }
/* EC-CUBE の商品ページはカート部分だけを差し替える(.ec-headerRole__cart)。箱は作らず中のボタンをナビに並べる */
.site-header__slot { display: contents; }
.site-header__item { display: inline-flex; align-items: center; gap: 5px; color: var(--site-header-ink); font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.site-header__item:hover { color: var(--site-header-red); }
.site-header__item.is-current { color: var(--site-header-teal); }
.site-header__item svg { flex: 0 0 auto; width: 16px; height: 16px; fill: currentColor; }
.site-header__cart { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border-radius: 999px; color: var(--site-header-ink); background: #f0ede7; font-size: 11px; font-weight: 700; line-height: normal; white-space: nowrap; }
.site-header__cart:hover { color: var(--site-header-red); }
.site-header__cart svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-header__badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; color: #fff; background: var(--site-header-red); font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; }

@media (max-width: 900px) {
  .site-header__inner { width: min(100% - 30px, 1320px); min-height: 64px; gap: 14px; }
  .site-header__name { font-size: 18px; }
  .site-header__mark { width: 23px; height: 23px; }
  .site-header__nav { gap: 10px; }
  .site-header__label { display: none; }
  .site-header__item svg { width: 18px; height: 18px; }
  .site-header__cart { min-height: 36px; padding: 0 10px; }
}
@media (max-width: 560px) {
  .site-header__inner { width: min(100% - 28px, 1320px); }
  .site-header__name { font-size: 16px; }
  .site-header__mark { width: 21px; height: 21px; }
  .site-header__nav { gap: 9px; }
}