/* 言語の切り替え「日本語 / English」— 全ページ共通。色・余白は tokens.css の値だけを使う。
 * いま表示している言語に下線（aria-current）。もう一方は押せる文字。
 * 幅が足りない画面では、見出し帯の上に細い行を作って右寄せで置く（下の @media）。 */

.lang-toggle {
  display: inline-flex; align-items: baseline; gap: 0.55em;
  font-size: var(--text-sm); white-space: nowrap;
}
.lang-toggle__sep { color: var(--color-ink-faint); }
/* トップでは各ページの <style> がこのファイルより後に読まれるので、
 * 足元のリンクの色（.foot__legal a 等）に負けないよう .lang-toggle .lang-switch と2段で指定する */
.lang-toggle .lang-switch {
  color: var(--color-ink-soft); text-decoration: none; font-size: var(--text-sm);
  padding-block: var(--space-3xs);
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.lang-toggle .lang-switch[aria-current] {
  color: var(--color-ink); font-weight: 500;
  border-bottom-color: var(--color-ink);
}
@media (hover: hover) {
  .lang-toggle .lang-switch:not([aria-current]):hover { color: var(--color-green); border-bottom-color: var(--color-accent); }
}
/* 足元のリンク列の飾り（下線が伸びる線）を切り替えには付けない */
.lang-toggle .lang-switch::after { content: none; }

/* 見出し帯：右端に「言語の切り替え」と「お問い合わせ／ホームに戻る」を並べる */
.nav__end, .l-nav__end { display: inline-flex; align-items: center; gap: var(--space-md); }

/* 幅が足りない画面：切り替えを見出し帯の上の細い行へ移す（ロゴとボタンは下の行に今までどおり）。
 * 境目 = 日本語トップ（いちばん横に長い）で1行に収まる幅。2026-10-25 に実測して決めた。 */
@media (max-width: 34rem) {
  /* トップは各ページの <style> が後に読まれるので .nav .nav__inner と2段で指定して勝たせる */
  .nav .nav__inner, .l-nav .l-nav__inner { flex-wrap: wrap; row-gap: var(--space-2xs); column-gap: var(--space-2xs); padding-top: var(--space-2xs); }
  /* 切り替えの下線とボタンの枠が重ならないよう、トップの「お問い合わせ」の楕円を低く・小さくする */
  .nav .nav__end .cta { min-height: 36px; padding: var(--space-3xs) var(--space-sm); }
  .nav__end, .l-nav__end { display: contents; }
  .nav__inner > .nav__end > .lang-toggle,
  .l-nav__inner > .l-nav__end > .lang-toggle { order: -1; flex: 0 0 100%; justify-content: flex-end; }
}
/* ごく狭い画面（320px 級）：ロゴの字間とボタンの内側の余白を詰め、ボタンの矢印を外して、ロゴとボタンを1行に保つ */
@media (max-width: 22rem) {
  .nav .wordmark span, .l-nav .l-wordmark span { letter-spacing: 0.12em; }
  .nav .nav__end .cta { padding-inline: var(--space-xs); }  /* 上の 34rem 以下の指定より狭い余白にする */
  .nav .nav__end .cta .arr { display: none; }
}

/* 英語の法務ページ冒頭の「参考訳です・日本語が優先します」の注記 */
.l-translation-note {
  margin-top: var(--space-md); padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm); color: var(--color-ink-soft);
  border-left: 2px solid var(--color-accent-strong);
}