/*
 * UNISONAS 共通ヘッダー
 * 本体 (templates/public_site_chrome.php) と EC-CUBE の /usn/ の両方がこの1枚を読む。
 * 見た目はここだけで決める (各ページの CSS にヘッダーの指定を書かない)。
 * HTML は public_site_chrome.php・assets/js/script.js (古いページ用) と usn の Block/header.twig・site_header_nav.twig・cart.twig を同じ形に保つ。
 * 湯にぞなす.熱湯 (unisonas.net/assets/site-header.css) と同じ作り。
 * EC-CUBE の Bootstrap の既定 (body 14px・a の下線など) と本体の style.css に左右されないよう、文字まわりは全部ここで指定する。
 */
.site-header {
  --site-header-ink: #0f2733;
  --site-header-blue: #0a71ab;
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0;
  padding: 0;
  color: var(--site-header-ink);
  background: #fff;
  border-bottom: 1px solid rgba(15, 39, 51, .10);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", 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%;
}
/* 店はヘッダーの部品が EC-CUBE の枠 (.ec-layoutRole__header) の中にあるので、枠ごと上に留める */
.ec-layoutRole__header { position: sticky; z-index: 50; top: 0; }
/* ヘッダーが上に留まるので、ページ内リンク (/#quick-check など) の飛び先がヘッダーの下に隠れないようにする */
html { scroll-padding-top: 84px; }
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header a, .site-header a:link, .site-header a:visited, .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; line-height: 1; }
.site-header__brand img { display: block; width: 178px; height: auto; margin: 0; }

.site-header__nav { display: flex; align-items: center; gap: 14px; 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 a.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 a.site-header__item:hover { color: var(--site-header-blue); }
.site-header__item svg { flex: 0 0 auto; width: 16px; height: 16px; fill: currentColor; }
/* ショップは店へ行く唯一の入口なので、ロゴと並ぶくらい目立つ青い札にする (影なし・押しても動かない)。
   青はロゴの字の青 */
.site-header a.site-header__shop { min-height: 38px; padding: 0 16px; border-radius: 999px; color: #fff; background: var(--site-header-blue); }
.site-header a.site-header__shop:hover { color: #fff; background: #085d8d; }
.site-header a.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: #edf2f5; font-size: 11px; font-weight: 700; line-height: normal; white-space: nowrap; }
.site-header a.site-header__cart:hover { color: var(--site-header-blue); }
.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-blue); font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; }

/* ログイン中の PC 幅の狭い所は項目が多くて並びきらないので、生活チェックと商品比較は字を外して絵だけにする */
@media (min-width: 901px) and (max-width: 1080px) {
  .site-header__nav.is-member .site-header__check .site-header__label,
  .site-header__nav.is-member .site-header__compare .site-header__label { display: none; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 72px; }
  .site-header__inner { width: min(100% - 30px, 1320px); min-height: 64px; gap: 14px; }
  .site-header__brand img { width: 150px; }
  .site-header__nav { gap: 12px; }
  .site-header__label { display: none; }
  .site-header a.site-header__shop { min-height: 36px; padding: 0 12px; }
  .site-header__shop .site-header__label { display: inline; }
  .site-header__item svg { width: 19px; height: 19px; }
  .site-header a.site-header__cart { min-height: 36px; padding: 0 10px; }
}
@media (max-width: 560px) {
  .site-header__inner { width: min(100% - 24px, 1320px); gap: 10px; }
  .site-header__brand img { width: 118px; }
  .site-header__nav { gap: 9px; }
  /* ログイン中はメニューが増えるので、ショップは字を外した青い丸にして全部を1行に残す */
  .site-header__nav.is-member { gap: 7px; }
  .site-header__nav.is-member a.site-header__shop { padding: 0 9px; }
  .site-header__nav.is-member .site-header__shop .site-header__label { display: none; }
}
@media (max-width: 374px) {
  .site-header__brand img { width: 104px; }
  .site-header__nav { gap: 7px; }
  .site-header a.site-header__shop { padding: 0 10px; font-size: 13px; }
  .site-header__shop svg { display: none; }
  .site-header__nav.is-member { gap: 4px; }
  .site-header__nav.is-member .site-header__shop svg { display: block; }
  .site-header__nav.is-member a.site-header__cart { padding: 0 8px; }
}