/* ══════════════════════════════════════════════════════════════════
   site-chrome.css —— 全站唯一的一套页头 / 页脚（2026-09-07）
   九个内容页都引这一份，放在各页自己的 CSS 之后。
   在这之前站上有四套页头（.site-header / .ai2-header / .ed-header ×2）、
   三种 logo 副标题、两套语言按钮样式，老板看完说「看不出哪个是主页」。

   规矩：
   - 类名一律 hqx- 前缀，跟 styles.css / ai-blue.css / case-editorial.css
     里任何选择器都不重名，所以这份文件可以整块换掉页头页脚而不动正文。
   - 语言按钮的 class 必须保留 ai2-lang-btn —— main-i18n.js / ai-i18n.js
     都靠 document.querySelectorAll('.ai2-lang-btn') 找它。
   - 颜色写死在本文件里，不吃三份 CSS 各自的变量，九页画面才会一模一样。
   - 2026-09-07 複験：このファイルから金色を全部抜いた。
     右上の主ボタン（.hqx-cta）は金の実心 → 墨線 1px の幽霊ボタン、
     抽屉の主ボタン（.hqx-drawer-cta）は金の実心 → 墨黒の実心。
     眉標の短線・現在地の文字色・選択中の言語ボタン・ロゴ・skip も墨黒。
     全站で金が残るのは styles-v4.css の .v4-mark（見出しの下線底纹）1 か所だけ。
     角丸も全部 2px に揃えた（規範 §1.1「圆角大于 2px の色块は禁」）。
   - 汉堡菜单的开合由 site-nav.js 绑定，九页只绑一次。
   ══════════════════════════════════════════════════════════════════ */

/* 2026-09-07 v4：アンカーの停止位置（styles-v4.css の
   html{scroll-padding-top: calc(var(--hqx-height) + 20px)}）がこの値を読む。
   .hqx-header 側にも同じ値がある。⚠ 直すときは両方同時に。 */
:root { --hqx-height: 64px; }

.hqx-header,
.hqx-footer {
  --hqx-page: 1200px;
  --hqx-gutter: clamp(20px, 4vw, 32px);
  --hqx-ink: #24262a;
  --hqx-ink-strong: #101114;
  --hqx-ink-muted: #626873;
  /* 2026-09-07 複験：金の変数は 5 つとも削除した（--hqx-gold / --hqx-deep-gold /
     --hqx-gold-btn / --hqx-gold-btn-hover / --hqx-on-gold）。
     このファイルに色として金は 1 つも残っていない。
     全站で金が出るのは styles-v4.css の --v4-mark（見出しの下線底纹）だけ。
     ⚠ ここに金を戻すときは規範 §1.1 を先に直すこと。 */
  /* 2026-09-07 v4：地の色を styles-v4.css の --v4-paper #f7f6f3 と揃えた。
     旧値 #f6f3ec は黄みが強く、本文の紙面と頭部で色が段違いに見えていた。 */
  --hqx-surface: rgba(247, 246, 243, 0.94);
  --hqx-surface-solid: #f7f6f3;
  --hqx-line: rgba(16, 19, 24, 0.10);
  --hqx-deep: #14161a;
  --hqx-deep-ink: #f2efe8;
  --hqx-deep-body: #b9bcc3;
  --hqx-radius: 12px;
  --hqx-height: 64px;
  font-family: var(--font-body, sans-serif);
}

/* ⚠ 以下、頭部の <a> は選択子の頭に `a` を足して a.hqx-… と書く。
   理由：styles-v4.css は本ファイルより後に読み込まれ、そこに
   `.v4-page :where(a) { color: inherit }` がある。:where() の中身は
   詳細度 0 なので、この規則は (0,1,0)。素の `.hqx-skip` も (0,1,0) で同点になり、
   後勝ちで色が inherit（＝本文色 #2f333a）に持っていかれる。
   2026-09-07 の実測では skip リンクが「#2f333a の文字＋#14161a の地」＝
   コントラスト比 1.3 で、Tab で出しても読めない状態だった。
   `a.hqx-skip` は (0,1,1) なので順番に関係なく勝つ。 */

/* ────────── 跳到正文（只有键盘 Tab 到它才出现） ────────── */
a.hqx-skip {
  position: absolute;
  z-index: 200;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  border-radius: 2px;
  background: var(--hqx-deep, #14161a);
  color: #f7f6f3;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  /* opacity:0 而不是只挪到屏外：挪出去的元素在 DOM 里仍算「可见」，
     渲染审计会当成「源码有、画面读不到」（C2a）报出来。opacity:0 的元素
     照样能用 Tab 聚焦，聚焦时再显出来，键盘可达性不受影响。 */
  opacity: 0;
  transition: transform 180ms ease, opacity 120ms ease;
}
a.hqx-skip:focus { transform: translateY(0); opacity: 1; }

/* ══════════════ 页头 ══════════════ */

.hqx-header {
  position: sticky;
  z-index: 90;
  top: 0;
  border-bottom: 1px solid var(--hqx-line);
  background: var(--hqx-surface);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hqx-header { background: var(--hqx-surface-solid); }
}

.hqx-head {
  display: flex;
  width: min(100% - var(--hqx-gutter) * 2, var(--hqx-page));
  min-height: var(--hqx-height);
  align-items: center;
  gap: 20px;
  margin-inline: auto;
}

/* ── 品牌：金色方块「華」＋ 公司名 ＋ 副行 ── */
a.hqx-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: var(--hqx-ink-strong);
  text-decoration: none;
}
/* 2026-09-07 v3：ロゴの角丸は金色の実心ブロックだった。
   規範 §1.1 で金色が許されるのは「眉標の短線・主ボタン・現在地の下線」の
   三箇所だけなので、ロゴは墨黒の実心＋紙白の文字に変えた。
   これで 1 画面に金色は「お問い合わせボタン」1 箇所だけになる。 */
.hqx-brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 2px;
  background: var(--hqx-deep);
  color: #f7f6f3;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  place-items: center;
}
.hqx-brand-copy { display: grid; gap: 1px; }
.hqx-brand-copy strong {
  color: var(--hqx-ink-strong);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.hqx-brand-copy small {
  color: var(--hqx-ink-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* ── 主导航（v3：6 项、第 3 项是下拉） ──
   2026-09-07 v3：8 項の平置きをやめ、
   ホーム／事業領域／サービス（下拉 6 子項）／実績／会社概要／お問い合わせ の 6 項にした。
   ラベルが短くなったぶん字間を広げ、ハンバーガーへ切り替わる幅も 1180 → 1000 に下げられる。 */
.hqx-nav {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;      /* 下拉面板を頭部の下端から出すため */
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 24px);
}
.hqx-nav a,
.hqx-nav-trigger {
  position: relative;
  display: inline-flex;
  height: 40px;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--hqx-ink);
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease;
}
.hqx-nav a::after,
.hqx-nav-trigger::after {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 2px;
  background: var(--hqx-ink-strong);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
/* hover では色を変えず下線だけ出す。金色の文字を増やさないため
   （規範 §1.1：金色は「現在地の下線・主ボタン・眉標の短線」の三箇所だけ）。 */
.hqx-nav a:hover,
.hqx-nav-trigger:hover { color: var(--hqx-ink-strong); }
.hqx-nav a:hover::after,
.hqx-nav-trigger:hover::after { transform: scaleX(1); }
.hqx-nav a[aria-current="page"],
.hqx-nav-trigger[aria-current="true"] {
  color: var(--hqx-ink-strong);
  font-weight: 700;
}
.hqx-nav a[aria-current="page"]::after,
.hqx-nav-trigger[aria-current="true"]::after { transform: scaleX(1); }

/* ── 下拉「サービス」 ──
   開き方は 3 通り並列：マウスは hover、キーボードは focus-within、
   クリック／Enter は site-nav.js が .is-open と aria-expanded を付ける。
   面板は頭部の下端に密着させる（間に隙間があると hover が切れる）。 */
.hqx-nav-group {
  position: relative;
  display: flex;
  align-self: stretch;
  align-items: center;
}
.hqx-nav-trigger::before {
  /* 下拉の合図。文字ではなく CSS で出すので三言語の文案に入れない。 */
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 4px solid currentColor;
  border-right: 3.5px solid transparent;
  border-left: 3.5px solid transparent;
  content: "";
  opacity: 0.55;
  order: 2;
  transition: transform 180ms ease;
}
.hqx-nav-trigger[aria-expanded="true"]::before { transform: rotate(180deg); }

.hqx-nav-panel {
  position: absolute;
  z-index: 95;
  top: 100%;
  left: 50%;
  display: none;
  min-width: 240px;
  border: 1px solid var(--hqx-line);
  border-radius: 2px;
  background: var(--hqx-surface-solid);
  padding: 8px;
  transform: translateX(-50%);
}
.hqx-nav-group:hover > .hqx-nav-panel,
.hqx-nav-group:focus-within > .hqx-nav-panel,
.hqx-nav-group.is-open > .hqx-nav-panel { display: block; }
/* Esc やパネル外クリックで閉じたのに、焦点がトリガーに残っていると
   :focus-within が効いたままで開きっぱなしになる（実測で踏んだ）。
   明示的に閉じたときだけ .is-closed を付けて、上の 3 条を上書きする。
   マウスが乗ったら site-nav.js が .is-closed を外すので hover は死なない。 */
.hqx-nav-group.is-closed > .hqx-nav-panel { display: none; }

.hqx-nav-panel a {
  display: flex;
  height: auto;
  min-height: 40px;
  border-radius: 2px;
  padding: 8px 12px;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.hqx-nav-panel a::after { content: none; }
.hqx-nav-panel a:hover { background: rgba(18, 20, 24, 0.05); }
.hqx-nav-panel a[aria-current="page"] { color: var(--hqx-ink-strong); font-weight: 700; }
.hqx-nav-sep {
  height: 0;
  border: 0;
  border-top: 1px solid var(--hqx-line);
  margin: 6px 10px;
}

/* ── 右端：语言键 ＋ 主按钮 ＋ 汉堡 ── */
.hqx-tail {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.hqx-lang {
  display: inline-flex;
  border: 1px solid var(--hqx-line);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
  padding: 2px;
  gap: 2px;
}
.hqx-lang .ai2-lang-btn {
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--hqx-ink-muted);
  padding: 5px 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.hqx-lang .ai2-lang-btn:hover { color: var(--hqx-ink-strong); }
/* 2026-09-07 v4：選択中の言語は金の塗りだった。金は主ボタン 1 か所だけに
   絞る規範なので墨黒の塗りにした。 */
.hqx-lang .ai2-lang-btn.is-active {
  background: var(--hqx-deep);
  color: #f7f6f3;
}
.hqx-lang .ai2-lang-btn:focus-visible {
  outline: 2px solid var(--hqx-ink-strong);
  outline-offset: 2px;
}

/* 2026-09-07 複験：金の実心ボタンをやめ、墨線 1px の幽霊ボタンにした。
   理由——このボタンは全ページの右上に出るので、金の面積が全体でいちばん大きく、
   本文でたった 1 か所しかない .v4-mark の金より目立っていた。
   金は「見出しの中の下線底纹」だけに残す（規範 §1.1 の趣旨どおり）。
   透明地＋墨線 → hover で墨黒の実心に反転。地の色を持たないので
   紙面（--v4-paper）と頭部の境目にも段差が出ない。 */
a.hqx-cta {
  display: inline-flex;
  height: 38px;
  align-items: center;
  border: 1px solid var(--hqx-ink-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--hqx-ink-strong);
  padding-inline: 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
a.hqx-cta:hover,
a.hqx-cta:focus-visible {
  background: var(--hqx-ink-strong);
  color: var(--hqx-surface-solid);
}

/* 汉堡：桌面隐藏，窄屏出现。三根横线用绝对定位摆，
   展开时上下两根绕同一个中心转，才收得成一个正的叉。 */
.hqx-burger {
  position: relative;
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hqx-line);
  border-radius: 2px;
  background: transparent;
  color: var(--hqx-ink-strong);
  padding: 0;
  cursor: pointer;
}
.hqx-burger span {
  position: absolute;
  left: calc(50% - 9px);
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 140ms ease;
}
.hqx-burger span:nth-child(1) { top: 12px; }
.hqx-burger span:nth-child(2) { top: 18px; }
.hqx-burger span:nth-child(3) { top: 24px; }
.hqx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hqx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hqx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── 抽屉（汉堡菜单展开） ── */
.hqx-drawer {
  display: none;
  border-top: 1px solid var(--hqx-line);
  background: var(--hqx-surface-solid);
}
.hqx-drawer.is-open { display: block; }
.hqx-drawer nav {
  display: grid;
  width: min(100% - var(--hqx-gutter) * 2, var(--hqx-page));
  margin-inline: auto;
  padding-block: 8px 18px;
}
.hqx-drawer a {
  display: flex;
  min-height: 48px;
  align-items: center;
  border-bottom: 1px solid var(--hqx-line);
  color: var(--hqx-ink);
  font-size: 15px;
  text-decoration: none;
}
.hqx-drawer a[aria-current="page"] { color: var(--hqx-ink-strong); font-weight: 700; }

/* 抽屉の中では「サービス」を下拉にしない。畳むと 6 つの子項目が
   タップできなくなる（検収基準 11：抽屉の子項目は全部押せること）。
   見出し 1 行＋子項目を字下げして平置きにする。 */
.hqx-drawer-label {
  display: flex;
  min-height: 44px;
  align-items: flex-end;
  margin: 10px 0 0;
  color: var(--hqx-ink-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.hqx-drawer a.hqx-drawer-sub {
  min-height: 46px;
  padding-left: 16px;
  font-size: 14px;
}
.hqx-drawer a.hqx-drawer-sub::before {
  width: 8px;
  height: 1px;
  margin-right: 10px;
  background: var(--hqx-line);
  content: "";
}

/* 抽屉の底にある主 CTA。ここは「押させたい 1 つ」しか置いていない
   主要行動ブロックなので実心のままにするが、色は金ではなく墨黒
   （2026-09-07 複験：金は本文の .v4-mark 1 か所だけに絞る）。 */
.hqx-drawer .hqx-drawer-cta {
  justify-content: center;
  margin-top: 16px;
  border: 0;
  border-radius: 2px;
  background: var(--hqx-deep);
  color: var(--hqx-deep-ink);
  font-weight: 700;
}

/* 2026-09-07 v3：ナビが 8 項から 6 項（うち 1 つは下拉）に減ったので、
   ハンバーガーへ切り替わる幅を 1180px → 1000px に下げた。
   英語版のラベル（Home / What we do / Services / Work / Company / Contact）で測っている。
   ⚠ ここを触ったら site-nav.js の matchMedia('(min-width: 1001px)') も同じ値に直すこと。
   片方だけ変えると、幅を広げたときに抽屉の aria-expanded が true のまま残る。 */
@media (max-width: 1000px) {
  .hqx-nav { display: none; }
  /* ⚠ `a.hqx-cta` と書くこと。素の `.hqx-cta` は (0,1,0) で、
     上の `a.hqx-cta { display: inline-flex }` (0,1,1) に負けて効かない。
     効かないと 375px で頭部が 426px まで膨らみ、ハンバーガーが画面外に出る
     （2026-09-07 に実測で踏んだ）。メディアクエリは詳細度を上げない。 */
  a.hqx-cta { display: none; }
  .hqx-burger { display: block; }
  .hqx-head { justify-content: space-between; gap: 12px; }
}
@media (max-width: 420px) {
  .hqx-brand-copy small { display: none; }
  .hqx-brand-copy strong { font-size: 15px; }
  /* 三个语言键之间留 4px：贴太近时 OCR 会把 JP 和 EN 认成一块 */
  .hqx-lang { gap: 4px; }
  .hqx-lang .ai2-lang-btn { padding: 5px 7px; }
}

/* ══════════════ 页脚 ══════════════ */

.hqx-footer {
  margin-top: auto;
  background: var(--hqx-deep);
  color: var(--hqx-deep-body);
  padding-block: clamp(44px, 5vw, 58px) 22px;
}
.hqx-foot {
  display: grid;
  width: min(100% - var(--hqx-gutter) * 2, var(--hqx-page));
  gap: clamp(28px, 4vw, 56px);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: start;
}
.hqx-footer a { color: inherit; text-decoration: none; }

.hqx-foot-main { display: grid; gap: clamp(22px, 3vw, 32px); }
.hqx-foot-brand { display: grid; gap: 14px; }
.hqx-foot-brand .hqx-brand-copy strong { color: var(--hqx-deep-ink); }
/* 2026-09-07 v3：副行と現在地は金色だった。金色は主ボタン用に取っておく
   （規範 §1.1）。暗い地の上なので、明度だけで階層を作る。 */
.hqx-foot-brand .hqx-brand-copy small { color: var(--hqx-deep-body); }
/* 页脚のロゴ角丸は暗い地に沈むので、こちらは明るい実心＋暗い文字にする。 */
.hqx-footer .hqx-brand-mark { background: var(--hqx-deep-ink); color: var(--hqx-deep); }
.hqx-foot-lead {
  max-width: 34em;
  margin: 0;
  color: var(--hqx-deep-body);
  font-size: 13px;
  line-height: 1.7;
}

.hqx-corp { display: grid; gap: 3px; }
.hqx-corp-name {
  margin: 0;
  color: var(--hqx-deep-ink);
  font-size: 15px;
  font-weight: 700;
}
/* 住所行の折り返し（2026-09-07 複験の指摘）。
   文案は「〒231-0057␣神奈川県横浜市中区曙町1-3␣藤和伊勢佐木ハイタウン615号室」で、
   半角スペース 2 つが最初から入っている＝既存の改行点が 2 か所ある。
   keep-all はその 2 か所以外での折り返しを全部止めるので、
   「〒231-0│057」「615号│室」のような割れ方が起きなくなる。
   ⚠ white-space:nowrap は書けない。中文版は括弧付きの併記（…615号室（神奈川县…室））で
     1 行 500px を超えるため、nowrap にすると 375px で必ず溢れる。
     「区切りたい場所だけで区切る」の正しい書き方が keep-all のほう。
   ⚠ overflow-wrap:break-word は保険。中文版の 3 つ目の塊だけは 375px でも
     1 行に収まらないので、そこだけブラウザに割らせる。この保険が無いと
     文字が枠外に出て読めなくなる（html の overflow-x:hidden で切り落とされる）。
     割れる位置は行末＝「神奈川县横滨市…」のあたりで、615号室 には届かない。 */
.hqx-corp-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
/* 法人番号は 13 桁の半角数字。CJK の中では折り返し放題なので nowrap で固める
   （「法人番号 6020001158│573」に割れた実績がある）。
   375px でも「法人番号 6020001158573」で約 150px、溢れない。 */
.hqx-corp-no {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  white-space: nowrap;
}
.hqx-corp a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--hqx-deep-ink);
  white-space: nowrap;
}

.hqx-foot-nav { display: grid; gap: 2px; align-content: start; }
.hqx-foot-nav a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  font-size: 13px;
  transition: color 160ms ease;
}
.hqx-foot-nav a:hover { color: #fff; }
.hqx-foot-nav a[aria-current="page"] { color: #fff; font-weight: 700; }

/* 页脚も「サービス」は見出し 1 行＋子項目の平置き（頭部の抽屉と同じ形）。 */
.hqx-foot-label {
  margin: 14px 0 2px;
  color: #8f949d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.hqx-foot-nav a.hqx-foot-sub { padding-left: 12px; }

/* 2026-09-08：页脚の末尾に、同一法人のトレーディングカード事業サイトへの
   リンクを site-nav.js が 1 本足す。サイト内リンクの列と地続きに見えないよう、
   1 行分あけて色も一段落とす。hover 時は上の .hqx-foot-nav a:hover が効く。 */
.hqx-foot-nav a.hqx-foot-ext { margin-top: 14px; color: #9ba0a9; }

.hqx-foot-note {
  width: min(100% - var(--hqx-gutter) * 2, var(--hqx-page));
  margin: clamp(28px, 3vw, 40px) auto 0;
  color: #9ba0a9;
  font-size: 12px;
  line-height: 1.8;
}

.hqx-foot-bottom {
  display: flex;
  width: min(100% - var(--hqx-gutter) * 2, var(--hqx-page));
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin: clamp(32px, 4vw, 46px) auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
  padding-right: 58px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.hqx-foot-bottom a { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }

@media (max-width: 900px) {
  .hqx-foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hqx-foot-bottom { padding-right: 58px; } /* 回到页首按钮 fixed 在右下，手机档也要让位 */
}


/* 2026-09-07 v3：6 項になってロゴの副行を出せる幅が広がったので、
   隠す閾値を 1400px → 1160px に下げた。1000px 以下はハンバーガーなので効かない。 */
@media (max-width: 1160px) {
  .hqx-header .hqx-brand-copy small { display: none; }
}