/* SK — ヘッダー（サイトの全ページと Y-FILTER. 管理コンソールで共通）
   動きは assets/site.js のヘッダーメニュー。管理コンソールは site.css を読み込まないので、ここだけで完結させる
   色は --hd-〜 の変数（ダークモードのときに site.css が入れる）。変数がなければライトの色（管理コンソールはいつもライト） */
.site-header, .site-header *, .hd-menu, .hd-menu *, .hd-backdrop { box-sizing: border-box; }

/* ---------- ページを移動するときのアニメーション（View Transitions） ----------
   移動前と移動後の両方のページで、表示される時点で有効になっている必要があるので、CSS に最初から書いておく
   （frameworks/check.js もあとから同じものを入れるが、それだけだと間に合わず、出たり出なかったりする）。
   ヘッダーは別に扱って、動かさずにそのまま切り替える */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sk-page-out .3s cubic-bezier(.4, .04, 0, 1) both; }
::view-transition-new(root) { animation: sk-page-in .3s cubic-bezier(.4, .04, 0, 1) both; }
@keyframes sk-page-out { to { opacity: 0; transform: scale(.96); } }
@keyframes sk-page-in { from { opacity: 0; transform: scale(.96); } }
.site-header { view-transition-name: sk-header; }
::view-transition-group(sk-header) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(sk-header) { animation: none; }
}

/* ---------- ヘッダー（search3958 の headerv2 と同じ見た目・動き） ---------- */
.site-header {
  position: fixed; top: -1px; left: 0; right: 0; z-index: 1000;
  height: 52px; display: flex; justify-content: center; align-items: center;
  background: var(--hd-bg, rgba(255, 255, 255, .73));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: 13px;
}
.site-header > a { color: var(--hd-text, #000); text-decoration: none; padding: 20px 12px; line-height: 1; }
.site-header > a:focus-visible { outline-offset: -6px; }
.hd-logo, .hd-logo-image, .hd-logo-back { display: inline-flex; align-items: center; justify-content: center; }
.hd-logo-image img { width: 26px; height: 26px; }
.hd-logo-back { display: none; }
.hd-logo-back svg { width: 27px; height: 27px; }
.hd-menu-btn { display: none; }

.hd-backdrop {
  position: fixed; top: 51px; left: 0; right: 0; bottom: 0; z-index: 998;
  background: var(--hd-backdrop, rgba(232, 232, 232, .28));
  backdrop-filter: blur(14px) saturate(.9); -webkit-backdrop-filter: blur(14px) saturate(.9);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 320ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 320ms;
}
.hd-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 320ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.hd-menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  overflow: hidden; height: 0; padding-top: 52px;
  background: var(--hd-menu-bg, #fff);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: height 380ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease, visibility 0s linear 380ms;
}
.hd-menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: height 300ms cubic-bezier(.5, .22, 0, 1), opacity 220ms ease, visibility 0s;
}
.hd-menu-inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 34px; }
.hd-menu-content { transition: opacity 180ms cubic-bezier(.22, 1, .36, 1); }
.hd-menu-content.is-fading { opacity: 0; }
.hd-menu-title { margin: 0 0 15px; font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .01em; color: var(--hd-menu-muted, rgba(0, 0, 0, .48)); }
.hd-menu-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.hd-menu-list li { opacity: 0; transform: translateY(5px); }
.hd-menu.is-open .hd-menu-list li { animation: hd-item-in 300ms cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes hd-item-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.hd-menu-link { display: block; padding: 8px 0; color: var(--hd-menu-link, #111); text-decoration: none; font-size: 20px; line-height: 1.5; font-weight: 500; }

@media (max-width: 680px) {
  .site-header { justify-content: space-between; padding: 0 12px; }
  .site-header > a:not(.hd-logo) { display: none; }
  .site-header > .hd-logo { width: 44px; height: 52px; padding: 0; flex: 0 0 44px; }
  .hd-logo.is-back .hd-logo-image { display: none; }
  .hd-logo.is-back .hd-logo-back { display: inline-flex; }
  .hd-menu-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
    width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--hd-text, #000);
    appearance: none; -webkit-appearance: none; cursor: pointer;
  }
  .hd-menu-btn span {
    position: absolute; left: 12px; width: 20px; height: 1.5px; border-radius: 999px; background: currentColor;
    transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
  }
  .hd-menu-btn span:first-child { transform: translateY(-3px); }
  .hd-menu-btn span:last-child { transform: translateY(3px); }
  .hd-menu-btn.is-open span:first-child { transform: rotate(45deg); }
  .hd-menu-btn.is-open span:last-child { transform: rotate(-45deg); }
  .hd-menu-inner { width: calc(100% - 40px); padding: 25px 0 30px; }
  .hd-menu-link { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-menu, .hd-menu-content, .hd-backdrop, .hd-menu-btn span { transition-duration: 1ms !important; }
  .hd-menu-list li { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* 細いヘッダー（<html class="hd-compact">）。SK's Toolbox をアプリとして開いたときに使う（/toolbox/shared/settings.js が付ける）。
   画面の幅によらず、スマホと同じ「ロゴ＋メニューのボタン」にして、高さも 44px にする（assets/site.js の isMobile() もスマホとして扱う） */
html.hd-compact { --hd-h: 44px; }
html.hd-compact body { padding-top: 44px; }
html.hd-compact .site-header { height: 44px; justify-content: space-between; padding: 0 8px; }
html.hd-compact .site-header > a:not(.hd-logo) { display: none; }
html.hd-compact .site-header > .hd-logo { width: 40px; height: 44px; padding: 0; flex: 0 0 40px; }
html.hd-compact .hd-logo-image img { width: 22px; height: 22px; }
html.hd-compact .hd-logo.is-back .hd-logo-image { display: none; }
html.hd-compact .hd-logo.is-back .hd-logo-back { display: inline-flex; }
html.hd-compact .hd-menu-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px;
  width: 40px; height: 40px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--hd-text, #000);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
html.hd-compact .hd-menu-btn span {
  position: absolute; left: 11px; width: 18px; height: 1.5px; border-radius: 999px; background: currentColor;
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
}
html.hd-compact .hd-menu-btn span:first-child { transform: translateY(-3px); }
html.hd-compact .hd-menu-btn span:last-child { transform: translateY(3px); }
html.hd-compact .hd-menu-btn.is-open span:first-child { transform: rotate(45deg); }
html.hd-compact .hd-menu-btn.is-open span:last-child { transform: rotate(-45deg); }
html.hd-compact .hd-backdrop { top: 43px; }
html.hd-compact .hd-menu { padding-top: 44px; }
html.hd-compact .hd-menu-inner { width: min(560px, calc(100% - 40px)); padding: 22px 0 28px; }
html.hd-compact .hd-menu-link { font-size: 18px; }

/* 言語の切り替え（PC は地球のアイコンだけ。スマホの一覧では「言語」と出る） */
.site-header > a.hd-lang { display: inline-flex; align-items: center; padding-left: 10px; padding-right: 10px; }
.hd-lang svg { width: 17px; height: 17px; }
.hd-lang-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 680px) { .site-header > a.hd-lang { display: none; } }

/* 列に分けたメニュー（サポートと情報） */
.hd-menu-groups { display: flex; flex-wrap: wrap; gap: 8px 72px; }
.hd-menu-group { min-width: 200px; }
@media (max-width: 680px) { .hd-menu-groups { flex-direction: column; gap: 22px; } }

/* ヘッダーのアカウント（ログイン中はアイコンを出す） */
@media (min-width: 681px) { .site-header > a.hd-account { display: inline-flex; align-items: center; gap: 7px; } }
.hd-account-photo { width: 22px; height: 22px; border-radius: 50%; margin: -4px 0; }
.hd-menu-profile { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line, #e1e4e9); }
.hd-menu-profile-photo { width: 44px; height: 44px; border-radius: 50%; flex: none; }
/* 写真のない人・頭文字を選んだ人のアイコン（色はプロフィールで選んだもの） */
.hd-avatar-letter { display: inline-grid; place-items: center; background: #2563eb; color: #fff; font-weight: 700; line-height: 1; flex: none; }
.hd-account-photo.hd-avatar-letter { font-size: 11.5px; }
.hd-menu-profile-photo.hd-avatar-letter { font-size: 19px; }
/* お知らせの未読があるとき */
.site-header > a.hd-account { position: relative; }
.hd-account-badge { position: absolute; top: 6px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px var(--hd-bg, #fff); }
.hd-menu-profile strong { display: block; font-size: 17px; line-height: 1.3; }
.hd-menu-profile small { display: block; color: var(--hd-menu-muted, rgba(0, 0, 0, .48)); font-size: 12.5px; }