/* ヘッダー内の余白を調整し、言語ボタンの場所を確保します。 */
header { z-index: 30; }
.nav { gap: 18px; }
.nav > .logo { flex-shrink: 0; }
.nav > .nav-links { margin-left: auto; gap: 22px; }
.language-switcher { position: relative; flex-shrink: 0; margin-left: auto; }
.nav > .btn-dl + .language-switcher { margin-left: 0; }
/* details / summary は、JavaScriptが使えなくても開閉できる標準の部品です。 */
.language-switcher summary {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 52px; min-height: 44px; padding: 6px;
  color: var(--amber); cursor: pointer; border-radius: 8px; list-style: none;
}
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary:hover,
.language-switcher[open] summary { background: rgba(245,166,35,.1); }
.language-switcher summary:focus-visible,
.language-options a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.language-chevron { transition: transform .15s; }
.language-switcher[open] .language-chevron { transform: rotate(180deg); }
/* 右端にそろえ、狭い画面でもメニューが画面外へはみ出さないようにします。 */
.language-options {
  position: absolute; top: calc(100% + 14px); right: 0;
  width: min(230px, calc(100vw - 32px)); padding: 12px;
  background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--amber);
  border-radius: 0 0 12px 12px; box-shadow: 0 14px 36px rgba(0,0,0,.4);
}
.language-options a {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 12px 16px; min-height: 48px; border-radius: 6px;
  font-size: 1rem; font-weight: 600; text-decoration: none; color: var(--text);
}
.language-options a:hover { background: rgba(255,255,255,.06); }
.language-options a[aria-current] { color: var(--amber); }
/* 翻訳で見出しやボタンが長くなっても、ページ内で折り返せます。 */
.hero h1, .section-head h2, main h1 { overflow-wrap: anywhere; }
.req-row { gap: 16px; }
.req-row dt { flex-shrink: 0; }
.req-row dd { min-width: 0; flex: 1; }
@media (max-width: 1000px) {
  .nav > .nav-links { display: none; }
  .nav > .btn-dl { margin-left: auto; }
}
@media (max-width: 480px) {
  .nav { gap: 8px; flex-wrap: wrap; height: auto; min-height: 72px; padding-top: 12px; padding-bottom: 12px; }
  .nav > .logo { font-size: 1rem; gap: 6px; }
  .nav > .btn-dl { order: 3; width: 100%; text-align: center; white-space: normal; }
  .nav > .btn-dl + .language-switcher { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .language-chevron { transition: none; }
}