/* ==========================================================================
   TechnoCell — shared shell
   Tokens, reset, header/footer, buttons, tags, forms, tables, reveal.
   Page-specific styles live in each page's <style>. Do not redefine the
   shell (nav/footer/buttons/tags) in pages.
   ========================================================================== */

:root {
  /* Core palette (CLAUDE.md §1) */
  --color-bg: #FFFFFF;
  --color-surface: #F7F8FA;
  --color-border: #E8EAED;
  --color-text-primary: #0A0A0A;
  --color-text-secondary: #6B7280;
  --color-accent: #0B3D91;
  --color-accent-light: #1A56C4;
  --color-accent-subtle: #EFF4FF;
  --color-accent-dark: #072A6B;

  /* State colors — forms/validation only (CLAUDE.md §11 exception) */
  --color-error: #B42318;
  --color-error-subtle: #FBEDEB;
  --color-success: #1F7A4D;
  --color-success-subtle: #EAF5EE;
  --color-warning: #8A5A00;
  --color-warning-subtle: #FBF3E0;

  /* On-dark */
  --on-dark-text: rgba(255, 255, 255, 0.72);
  --on-dark-border: rgba(255, 255, 255, 0.16);
  --on-dark-surface: rgba(255, 255, 255, 0.06);

  /* Type */
  --font-en: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --dur-enter: 500ms;

  /* Layout */
  --container: 1280px;
  --measure: 760px;   /* reading column */
  --gutter: 40px;
  --nav-h: 64px;
  --section-y: 128px;
  --radius: 4px;
}

/* 簡体字は Noto Sans JP に無い字形（让・产・质 等）が2500箇所以上あり、
   JPのままだと端末ごとの既定CJKフォントに落ちて字面が揃わない。
   中国語ページだけ和文用の変数を SC に差し替える。他の変数は :root のまま。 */
html[lang="zh-Hans"] {
  --font-jp: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
}
/* ハングルは Noto Sans JP に無い。韓国語ページは KR に差し替える */
html[lang="ko"] {
  --font-jp: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
/* キリル文字は Inter が持っている（Google Fonts が cyrillic サブセットを配る）。
   Noto Sans JP のキリルは CJK 用の設計なので本文には使わない */
html[lang="ru"] {
  --font-jp: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --nav-h: 56px;
    --section-y: 80px;
  }
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* No global scroll-behavior: keyboard-initiated jumps (skip link, nav anchors)
   must land instantly. Page scripts opt in per interaction if needed. */
html { -webkit-text-size-adjust: 100%; color-scheme: light; }

body {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;
  overflow-wrap: break-word; word-break: auto-phrase; text-wrap: balance;
  font-feature-settings: "palt" 1;
}
p, li, dd { overflow-wrap: break-word; }
/* Long unbroken tokens (COA/JFRL ids, urls) only occur in data cells. */
.data-table th, .data-table td { overflow-wrap: anywhere; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

a, button, label, summary, [role="tab"], input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--color-accent-subtle); color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }
/* Skip-link target: focusable so the jump moves focus, but it is not a control. */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; }
/* The accent ring is 1.35:1 on --color-accent-dark; flip to white in dark blocks. */
.section-dark :focus-visible,
.btn-white:focus-visible,
.btn-on-dark:focus-visible { outline-color: #FFFFFF; outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 2000;
  padding: 8px 12px; background: var(--color-accent); color: #fff;
  border-radius: var(--radius); font-size: 13px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

.num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "palt" 1; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* 読み物ページの本文は 760px に絞る（1行が長すぎると読みにくいため）。
   絞ったうえで margin-inline: auto で中央に置く。これが無いと 1280px の
   コンテナの左端に寄り、デスクトップで右側に約440pxの空白ができる。 */
.container-narrow > * { max-width: var(--measure); margin-inline: auto; }

.section { padding: var(--section-y) 0; }
.section-tight { padding: 80px 0; }
.section-divider { border-top: 1px solid var(--color-border); }
.section-surface { background: var(--color-surface); }
.section-dark { background: var(--color-accent-dark); color: #fff; }

/* Sticky header clears every anchor landing. */
:target,
section[id], main[id], article[id], [id].section,
h2[id], h3[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

.section-head { max-width: 760px; margin-bottom: 64px; }
.section-head--row {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
@media (max-width: 768px) {
  .section-head { margin-bottom: 40px; }
  .section-head--row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Type roles */
.eyebrow {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 20px;
}
.section-dark .eyebrow { color: rgba(255,255,255,0.6); }

.section-title {
  font-family: var(--font-jp);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
@media (max-width: 640px) { .section-title br { display: none; } }
.section-lead {
  text-wrap: pretty;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text-secondary);
  max-width: 640px;
}
.section-dark .section-lead { color: var(--on-dark-text); }

.display-en {
  font-family: var(--font-en);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.text-secondary { color: var(--color-text-secondary); }
.small { font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Buttons / links / tags
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 100%;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur-fast) ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn .arrow { display: inline-block; flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { transform: translateX(4px); }
}

/* 英語のCTAは語数が多く、nowrap のままだと狭い画面で画面幅を超える。
   日本語の短いラベルは折り返す余地が無いので見た目は変わらない。 */
@media (max-width: 640px) { .btn { white-space: normal; text-wrap: balance; } }

.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-light); border-color: var(--color-accent-light); }

.btn-outline { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.btn-outline:hover { background: var(--color-accent-subtle); }

.btn-ghost { background: transparent; border-color: var(--color-border); color: var(--color-text-primary); }
.btn-ghost:hover { border-color: var(--color-text-primary); }

.btn-white { background: #fff; border-color: #fff; color: var(--color-accent); }
.btn-white:hover { background: var(--color-accent-subtle); border-color: var(--color-accent-subtle); }

.btn-on-dark { background: transparent; border-color: rgba(255,255,255,0.4); color: #fff; }
.btn-on-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); }

/* Press feedback for every pressable control, not just .btn. */
.nav-toggle, .faq-q .faq-plus, .faq-tab { transition: transform var(--dur-fast) var(--ease-out); }
.nav-toggle:active, .faq-tab:active { transform: scale(0.97); }
.faq-q:active .faq-plus { transform: scale(0.9); }

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px;
  font-size: 14px; font-weight: 700; color: var(--color-accent);
}
.link-arrow .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover .arrow { transform: translateX(4px); }
}
@media (max-width: 768px) { .link-arrow { min-height: 44px; } }
.section-dark .link-arrow { color: #fff; }

.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.tag-neutral { background: var(--color-surface); color: var(--color-text-secondary); }
.tag-outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  /* Filter declared up-front (no-op behind the opaque bg) so the compositing
     layer is not created on the first scroll frame. */
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  transition: background-color var(--dur-base) ease;
}
.site-header.is-scrolled { background: rgba(255,255,255,0.88); }
/* Over a dark hero the header is part of that black — no seam, no border.
   Past the hero it becomes the glass bar (.is-scrolled). Driven by site.js
   from a [data-header-dark] section, so only pages that have one opt in. */
.site-header.is-over-dark {
  background: var(--color-text-primary);
  border-bottom-color: transparent;
}
/* Over an accent-navy section (the contact block) the bar takes that navy
   instead of the hero's near-black, so it reads as part of the section. */
.site-header.is-over-dark.is-over-accent { background: var(--color-accent-dark); }
/* Over a light surface section the bar takes that same tint — no inversion, the
   text stays dark — so the section reads as continuous instead of starting
   under a white bar. Declared after .is-scrolled so it wins the glass tint. */
.site-header.is-over-surface {
  background: var(--color-surface);
  border-bottom-color: transparent;
}
.site-header.is-over-dark .site-logo { color: #FFFFFF; }
.site-header.is-over-dark .site-nav a { color: rgba(255, 255, 255, 0.82); }
.site-header.is-over-dark .site-nav a:hover,
.site-header.is-over-dark .site-nav a[aria-current="page"] { color: #FFFFFF; }
.site-header.is-over-dark .btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; }
.site-header.is-over-dark .btn-ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
/* accent blue only reaches ~2:1 against near-black, short of the 3:1 a control
   boundary needs, so the primary CTA inverts here. */
.site-header.is-over-dark .btn-primary { background: #FFFFFF; border-color: #FFFFFF; color: var(--color-accent); }
.site-header.is-over-dark .btn-primary:hover { background: var(--color-accent-subtle); border-color: var(--color-accent-subtle); }
.site-header.is-over-dark .nav-toggle { border-color: rgba(255, 255, 255, 0.4); background: transparent; }
.site-header.is-over-dark .nav-toggle span,
.site-header.is-over-dark .nav-toggle span::before,
.site-header.is-over-dark .nav-toggle span::after { background: #FFFFFF; }
.site-header.is-over-dark .nav-toggle[aria-expanded="true"] span { background: transparent; }
.site-header.is-over-dark :focus-visible { outline-color: #FFFFFF; }

.site-header__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  /* Minus the header's own 1px border, so --nav-h is its true outer height and
     "100dvh - var(--nav-h)" really is one screen (it was one screen + 1px). */
  height: calc(var(--nav-h) - 1px);
  display: flex; align-items: center; gap: 40px;
}
.site-logo {
  display: inline-flex; align-items: center; min-height: 24px;
  font-family: var(--font-en); font-size: 18px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--color-text-primary); flex-shrink: 0; line-height: 1;
}
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a {
  font-size: 14px; font-weight: 400; color: var(--color-text-primary); white-space: nowrap;
  transition: color var(--dur-fast) ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-accent); }
.site-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* .btn is a flex container: text-overflow needs a real child box to clip. */
.site-actions .btn { max-width: 220px; }
.site-actions .btn > .btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 言語切替（国旗のみ）──────────────────────────────
   文字を出さないぶん、読み上げと tooltip 用に各リンクへ aria-label / title を
   必ず付ける（markup 側）。details/summary なので JS なしでも開閉できる。 */
.lang-switch { position: relative; }
.lang-switch summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 9px; border: 1px solid var(--color-border); border-radius: var(--radius);
  cursor: pointer; list-style: none; line-height: 1; user-select: none;
  color: var(--color-text-primary);
  transition: border-color var(--dur-fast) ease;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { border-color: var(--color-accent); }
/* max-width:none が要る。105行目の svg{max-width:100%} は、幅が内容で決まる
   親（文字を持たない <a>）の中では 0 に解決してしまい、旗が消える。 */
.flag { width: 20px; height: 14px; max-width: none; display: block; flex-shrink: 0; border-radius: 2px; }
.lang-switch__caret {
  width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform var(--dur-fast) ease;
}
.lang-switch[open] .lang-switch__caret { transform: rotate(225deg) translateY(-1px); }
/* 旗を横一列に並べる。文字が無いので縦リストだと間延びする */
.lang-switch__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  display: flex; gap: 4px; margin: 0; padding: 6px; list-style: none;
  background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius);
}
.lang-switch__menu a {
  display: block; padding: 7px; border-radius: var(--radius);
  transition: background-color var(--dur-fast) ease;
}
.lang-switch__menu a:hover { background: var(--color-accent-subtle); }
.lang-switch__menu a[aria-current] { background: var(--color-accent-subtle); box-shadow: inset 0 0 0 1px var(--color-accent); }
/* ヘッダー反転時（暗色ヒーロー上） */
.site-header.is-over-dark .lang-switch summary { border-color: rgba(255,255,255,0.4); color: #FFFFFF; }
.site-header.is-over-dark .lang-switch summary:hover { border-color: #FFFFFF; }

/* モバイルメニュー内の言語行（旗のみを横並び） */
.mobile-menu__langs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 16px; }
.mobile-menu .mobile-menu__langs a {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius);
}
.mobile-menu .mobile-menu__langs a[aria-current] { border-color: var(--color-accent); background: var(--color-accent-subtle); }
.mobile-menu .mobile-menu__langs a::after { content: none; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg);
}
.nav-toggle span {
  position: relative; display: block; width: 18px; height: 2px; background: var(--color-text-primary);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) ease;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 2px; background: var(--color-text-primary);
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }

.mobile-menu {
  display: flex;
  visibility: hidden;
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 999;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 8px var(--gutter) 20px;
  flex-direction: column;
  transform: translateY(-8px);
  transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.mobile-menu.open {
  visibility: visible;
  transform: none;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s;
}
.mobile-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; font-size: 15px; font-weight: 400;
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu a::after { content: "→"; color: var(--color-text-secondary); font-size: 14px; }
.mobile-menu a:hover, .mobile-menu a[aria-current="page"] { color: var(--color-accent); }
.mobile-menu .mobile-menu__actions { display: grid; gap: 8px; margin-top: 16px; }
.mobile-menu .mobile-menu__actions a { justify-content: center; border-bottom: 0; padding: 12px 16px; }
.mobile-menu .mobile-menu__actions a::after { content: none; }
.mobile-menu .mobile-menu__actions .btn { font-size: 14px; }

/* ナビ7項目＋言語切替で、28pxの間隔では 960-1099px で行があふれた（実測）。
   この帯は間隔を詰め、切替は国旗だけにして幅を稼ぐ。 */
@media (max-width: 1099px) {
  .site-nav { gap: 16px; }
  .site-actions { gap: 6px; }
  .site-actions .btn-sm { padding-left: 12px; padding-right: 12px; }
}

/* 英語・ロシア語はナビの語が長く、日本語より広い幅を要る（実測 nav幅 ja 470 /
   en 600 / ru 659px）。1000〜1199px で横スクロールが出ていたので、この2言語だけ
   詰めの帯を広げて字間・字送りをさらに縮める。切替点そのものは動かさない
   （動かすとハンバーガー側の表示条件と食い違い、操作不能な帯ができる）。 */
@media (max-width: 1199px) {
  html[lang="en"] .site-nav, html[lang="ru"] .site-nav { gap: 13px; }
  html[lang="en"] .site-nav a, html[lang="ru"] .site-nav a { font-size: 13px; }
  html[lang="en"] .site-actions, html[lang="ru"] .site-actions { gap: 6px; }
  html[lang="en"] .site-actions .btn-sm,
  html[lang="ru"] .site-actions .btn-sm { padding-left: 10px; padding-right: 10px; }
  html[lang="en"] .site-header__inner, html[lang="ru"] .site-header__inner { gap: 24px; }
}

/* 7項目＋言語切替＋16px間隔で、ナビ行が必要とする幅は実測1000px。
   959px切替のままだと960-999pxが横にあふれる。 */
@media (max-width: 999px) {
  .site-nav { display: none; }
  /* 言語切替だけはハンバーガーの隣に残す。旗は言語を探している人にしか
     用がなく、メニューを開かせると1タップ増えるため。会員ログイン・お問い合わせは
     モバイルメニュー内に同じものがあるので、ここでは出さない。 */
  .site-actions { display: flex; }
  .site-actions > :not(.lang-switch) { display: none; }
  /* margin-left:auto を外す。.site-actions 側にも auto があるので、両方に
     あると余白が2つに割られて旗だけが宙に浮く。右寄せは .site-actions に任せる。 */
  .nav-toggle { display: inline-flex; margin-left: 0; }
  /* 既定の 40px だと旗とハンバーガーが離れる。この帯は
     ロゴ／（旗＋ハンバーガー）の2かたまりなので、内側だけ詰める。 */
  .site-header__inner { gap: 12px; }
  /* ヘッダーに旗を出したので、メニュー内の言語行は重複になる */
  .mobile-menu__langs { display: none; }
}
/* Resizing past the breakpoint must not leave the panel open with no way to close it.
   ナビを隠す境界（999px）と必ず同じ値にすること。924px のままだと 924-999px で
   ハンバーガーだけが出てメニューが開かず、その帯でナビに到達できなくなる（実測）。 */
@media (min-width: 1000px) {
  .mobile-menu, .mobile-menu.open { display: none; }
}

/* --------------------------------------------------------------------------
   Hero call-to-action row on phones — both actions stay on one line.
   Unshrunk the pair overruns the content width, so type, padding and gap track
   the viewport and nothing shrinks or wraps (a shrunk flex item breaks the
   Japanese label mid-word). Scoped under .hero so it outranks the per-page
   .hero__actions rules, which load after this file.

   日本語・中国語に限る。この一行維持は CJK のラベル長に合わせた調整で、
   欧文・ハングル・キリルのラベルはこれより長く、nowrap のままだと行の
   min-content が 440px まで伸びてページが横にあふれる（ロシア語で実際に出た）。
   他の言語は既定どおり折り返させる。
   -------------------------------------------------------------------------- */
@media (max-width: 979px) {
  html[lang="ja"] .hero .hero__actions,
  html[lang="zh-Hans"] .hero .hero__actions {
    flex-wrap: nowrap;
    gap: clamp(8px, 2.5vw, 12px);
  }
  html[lang="ja"] .hero .hero__actions > *,
  html[lang="zh-Hans"] .hero .hero__actions > * { flex: 0 0 auto; white-space: nowrap; }
  .hero .hero__actions .btn {
    padding: 14px clamp(10px, 3vw, 18px);
    /* 13px is the smallest step in the type scale (CLAUDE.md §2); the row is
       allowed to wrap below 340px rather than go under it. */
    font-size: clamp(13px, 3.4vw, 14px);
  }
  .hero .hero__actions .link-arrow { font-size: clamp(12.5px, 3.2vw, 13px); }
}
@media (max-width: 340px) {
  .hero .hero__actions { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   Swipe rail — on phones a card grid becomes a horizontal, snapping rail.
   Add .swipe-rail alongside the grid class; the page's own media query decides
   from which width. The rail bleeds to both screen edges and leaves the next
   card peeking, which is the affordance — no arrows, no dots.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* [class] lifts specificity above the pages' own .product-grid / .support-grid
     gap, which loads after this file. */
  .swipe-rail[class] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none !important;
    gap: 12px;
    overflow-x: auto;
    /* clip, not the default visible: overflow-x:auto with overflow-y:visible
       computes y to auto too, which made the rail a stray vertical scroller
       (the cards sit 16px low while .reveal is armed, enough to wobble). The
       touch-action then names both pans explicitly so the rail slides sideways
       and the page still scrolls from a card, with pinch-zoom off. */
    overflow-y: clip;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed past the container so the first card starts on the text axis and
       the rail still runs to both edges of the screen. */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline-start: var(--gutter);
  }
  .swipe-rail::-webkit-scrollbar { display: none; }
  .swipe-rail > * { scroll-snap-align: start; }
  .swipe-rail:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  /* No trailing spacer: as a grid item it would take a full 78% track, leaving
     ~300px of empty scroll past the last card. The last card simply snaps to
     the end of the scroll range, which is the correct resting place. */
}

/* --------------------------------------------------------------------------
   Floating contact CTA — appears once the page scrolls past the dark hero and
   withdraws when the contact section itself is on screen.
   Frosted glass pill. The reference for this treatment sits on a dark page, so
   its glass is light; ours floats over the white body, where a light fill would
   vanish. Same treatment — translucent fill, real blur, hairline edge, no hard
   shadow — inverted in tone so the label still clears 4.5:1.
   -------------------------------------------------------------------------- */
.floating-cta {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 17px 32px;
  /* Pill, not the 4px house radius: the shape is the point of this component. */
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #FFFFFF;
  background: rgba(10, 22, 48, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    visibility 0s linear var(--dur-base);
}
.floating-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s, 0s, 0s;
}
.floating-cta:hover {
  background: rgba(11, 61, 145, 0.82);
  border-color: rgba(255, 255, 255, 0.4);
}
.floating-cta:active { transform: scale(0.98); }
.floating-cta .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .floating-cta:hover .arrow { transform: translateX(4px); }
}
@media (max-width: 640px) {
  .floating-cta { right: 16px; bottom: 16px; min-height: 48px; padding: 14px 24px; font-size: 14px; }
}
.no-js .floating-cta { display: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 72px 0 32px;
}
.site-footer__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.site-footer__top {
  display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 32px;
}
.site-footer__brand .site-logo { font-size: 20px; }
.site-footer__brand p { margin-top: 16px; font-size: 13px; line-height: 1.8; color: var(--color-text-secondary); max-width: 300px; }
.site-footer__col-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; letter-spacing: 0; }
.site-footer__col li + li { margin-top: 2px; }
.site-footer__col a {
  display: inline-flex; align-items: center; min-height: 24px; padding: 8px 0;
  font-size: 14px; color: var(--color-text-secondary); transition: color var(--dur-fast) ease;
}
.site-footer__col a:hover { color: var(--color-text-primary); }
.site-footer__bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--color-text-secondary);
}
.site-footer__bottom a { display: inline-flex; align-items: center; min-height: 24px; color: var(--color-text-secondary); }
.site-footer__bottom a:hover { color: var(--color-text-primary); }
.site-footer__legal { display: flex; gap: 20px; }

/* 5列は中間幅で窮屈になるため、ブランド列を上段に逃がして3列に組み替える */
@media (max-width: 1180px) and (min-width: 901px) {
  .site-footer__top { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .site-footer { padding: 56px 0 24px; }
  .site-footer__top { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field + .field { margin-top: 20px; }
.field-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.field-hint { font-size: 12px; color: var(--color-text-secondary); }
.req, .opt {
  display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 11px; font-weight: 700; line-height: 1.6;
}
.req { background: var(--color-accent-subtle); color: var(--color-accent); }
.opt { background: var(--color-surface); color: var(--color-text-secondary); }

.input, .form-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  appearance: none;
}
.input::placeholder, .form-input::placeholder { color: var(--color-text-secondary); }
.input:hover, .form-input:hover { border-color: #C4C9D4; }
.input:focus, .form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle); /* focus ring, not elevation */
}
select.input, select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px;
}
textarea.input, textarea.form-input { min-height: 140px; resize: vertical; }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--color-accent); flex-shrink: 0; }

.field-error {
  display: none; font-size: 12px; color: var(--color-error);
}
.field.has-error .field-error, .form-group.has-error .field-error, .form-group.has-error .form-error { display: block; }
.field.has-error .input, .form-group.has-error .form-input { border-color: var(--color-error); }

.notice {
  padding: 14px 16px; border-radius: var(--radius); font-size: 14px; line-height: 1.7;
  border: 1px solid var(--color-border); background: var(--color-surface);
}
.notice-info { background: var(--color-accent-subtle); border-color: #D6E2FB; color: var(--color-accent); }
.notice-error { background: var(--color-error-subtle); border-color: #F1C7C2; color: var(--color-error); }
.notice-success { background: var(--color-success-subtle); border-color: #BFE3CD; color: var(--color-success); }
.notice-warning { background: var(--color-warning-subtle); border-color: #EBD9A8; color: var(--color-warning); }

/* 記事の更新日。構造化データだけでなく本文にも出す（検索結果の鮮度表示と、
   読者が情報の新しさを判断できるようにするため）。 */
.article__date {
  margin-left: 12px; font-size: 12px; color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── 言語の提案バナー ─────────────────────────────
   ブラウザの言語とページの言語が違うとき、対訳への導線を下から出す。
   自動転送はしない（クローラが日本語版に到達できなくなるため）。
   追従CTAと同じ下端に出るので、重ならないよう左寄せに置く。 */
.lang-banner {
  position: fixed; left: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  max-width: min(520px, calc(100vw - 40px));
  padding: 14px 16px 14px 18px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lang-banner.is-in { opacity: 1; transform: translateY(0); }
.lang-banner__text { margin: 0; font-size: 14px; line-height: 1.6; }
.lang-banner__go { flex: 0 0 auto; white-space: nowrap; }
.lang-banner__close {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--color-text-secondary);
}
.lang-banner__close:hover { color: var(--color-text-primary); }
@media (max-width: 640px) {
  /* 追従CTAが右下に出るので、その上に重ねず全幅で置く */
  .lang-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-wrap: wrap; gap: 10px; }
  .lang-banner__text { flex: 1 1 100%; font-size: 13.5px; }
  .lang-banner__go { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-banner { transition: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; overflow-y: clip; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
/* site.js sets data-scrollable when the table actually overflows, and clears it
   once the reader has scrolled. Sticky so the hint stays put while scrolling. */
.table-wrap[data-scrollable="true"]::before,
.figure__scroll[data-scrollable="true"]::before {
  content: var(--label-scroll-hint, "横スクロールできます \2192");
  position: sticky; left: 0;
  display: block; width: max-content; margin-bottom: 10px;
  font-size: 12px; line-height: 1.6; color: var(--color-text-secondary);
}
/* 表・図のスクロール案内は擬似要素なので、翻訳ページでは日本語のまま出てしまう。
   html の lang で差し替える。ここを直さないと英語記事に日本語が1行出る。 */
html[lang="en"]      { --label-scroll-hint: "Scroll horizontally \2192"; }
html[lang="zh-Hans"] { --label-scroll-hint: "可横向滚动 \2192"; }
html[lang="ko"]      { --label-scroll-hint: "가로로 스크롤할 수 있습니다 \2192"; }
html[lang="ru"]      { --label-scroll-hint: "Прокрутите по горизонтали \2192"; }
.data-table { width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.data-table thead th {
  font-size: 12px; font-weight: 700; color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-text-primary);
  white-space: nowrap;
}
.data-table tbody th { font-weight: 700; white-space: nowrap; }
.data-table td.num, .data-table th.num { text-align: right; }

/* Definition rows (spec lists) */
.spec-list { border-top: 1px solid var(--color-border); }
.spec-row { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.spec-row dt { color: var(--color-text-secondary); font-weight: 400; }
.spec-row dd { font-weight: 400; }
@media (max-width: 480px) { .spec-row { grid-template-columns: 100px 1fr; gap: 16px; } }
/* grid の 1fr は既定で min-width:auto なので、分かち書きされない長い英単語が
   トラックを min-content まで押し広げて横あふれする。日本語はどこでも折り返せる
   ため出なかったが、英語・中国語版で顕在化した。 */
.spec-row > dt, .spec-row > dd { min-width: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   FAQ (accordion + optional tabs) — markup: .faq-list > .faq-item > button.faq-q + .faq-a > .faq-a__inner
   -------------------------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-q {
  width: 100%; display: grid; grid-template-columns: 32px 1fr 24px; align-items: center; gap: 12px;
  padding: 22px 0; text-align: left;
  font-size: 16px; font-weight: 700; line-height: 1.5;
}
.faq-q:hover .faq-q-text { color: var(--color-accent); }
.faq-q-mark { font-family: var(--font-en); font-weight: 800; color: var(--color-accent); font-size: 15px; }
.faq-q-text { transition: color var(--dur-fast) ease; }
.faq-plus { position: relative; width: 24px; height: 24px; }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--color-text-primary);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-plus::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-plus::after  { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.faq-q[aria-expanded="true"] .faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden; /* keeps collapsed links out of the tab order */
  overflow: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.faq-a > * { min-height: 0; overflow: hidden; }
.faq-a.open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--dur-base) var(--ease-out), visibility 0s;
}
.faq-a__inner {
  padding: 0 44px; max-width: 640px;
  font-size: 15px; line-height: 1.9; color: var(--color-text-secondary);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.faq-a.open .faq-a__inner { opacity: 1; transition-delay: 80ms; }
.faq-a__inner > :last-child { padding-bottom: 26px; }
.faq-answer-inner p + p, .faq-answer-inner .faq-glossary { margin-top: 16px; }
.faq-answer-inner strong { color: var(--color-text-primary); font-weight: 700; }
.faq-glossary { border-top: 1px solid var(--color-border); }
.faq-glossary-item { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.faq-glossary-term { font-weight: 700; color: var(--color-text-primary); }
@media (max-width: 640px) {
  .faq-q { grid-template-columns: 24px 1fr 24px; font-size: 15px; padding: 18px 0; }
  .faq-a__inner { padding-left: 0; padding-right: 0; }
  .faq-glossary-item { grid-template-columns: 1fr; gap: 4px; }
  .faq-a__inner { max-width: none; }
}

.faq-tabs {
  display: flex; gap: 4px;
  /* An inset shadow, not border-bottom. The underline used to be a real border
     that each tab lapped with margin-bottom:-1px, which left the strip 1px
     taller than its content box — enough vertical overflow to drag under a
     finger on mobile. Painted inside, the line needs no negative margin: the
     active tab's own 2px border draws over it, so the strip has zero overflow. */
  box-shadow: inset 0 -1px 0 var(--color-border);
  overflow-x: auto;
  /* Both pans stay available — the strip scrolls sideways, the page still
     scrolls when a finger starts here — while pinch-zoom is off. pan-x alone
     would swallow the vertical gesture and freeze the page. */
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}
.faq-tabs::-webkit-scrollbar { display: none; }
.faq-tab {
  padding: 12px 16px; font-size: 14px; font-weight: 700; white-space: nowrap;
  color: var(--color-text-secondary); border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.faq-tab:hover { color: var(--color-text-primary); }
.faq-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.faq-panel { display: none; }
.faq-panel.active { display: block; }
.faq-panel .faq-item:first-child { border-top: 0; }
.faq__cta { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--color-text-secondary); }
.faq-full { max-width: 880px; }

/* --------------------------------------------------------------------------
   Reveal (scroll entrance) — decorative, opacity+transform only
   -------------------------------------------------------------------------- */
/* Painted state is the DEFAULT: nothing above the fold waits for JS, so the
   entrance costs no LCP. site.js adds .js-reveal and hides only what is still
   below the fold (with .reveal-arming suppressing that first transition). */
.reveal {
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
  /* 70ms per CLAUDE.md §11; site.js caps --i at 3 so no group exceeds 210ms. */
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js-reveal .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }
.reveal-arming .reveal { transition: none; }
.reveal.is-in { opacity: 1; transform: none; }

/* Reduced motion: remove movement, keep transitions that carry meaning
   (crossfades, colour, focus rings, strength meters). */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal:not(.is-in) { opacity: 1; transform: none; }
  .reveal { transition: none; }
  .btn:active, .nav-toggle:active, .faq-tab:active { transform: none; }
  .faq-q:active .faq-plus { transform: none; }
  .btn .arrow, .link-arrow .arrow, .news-arrow, .pl-item .arrow { transition: none; }
  .btn:hover .arrow, .link-arrow:hover .arrow, .pl-item:hover .arrow { transform: none; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition-duration: 0.01ms; }
  .mobile-menu { transition: visibility 0s linear var(--dur-base); }
  .mobile-menu.open { transition: visibility 0s; }
  .faq-a { transition: visibility 0s linear var(--dur-base); }
  .faq-a.open { transition: visibility 0s; }
  .faq-a__inner, .faq-a.open .faq-a__inner { transition: none; }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.breadcrumb a { display: inline-block; padding: 4px 0; }
.hide-mobile { } .show-mobile { display: none; }
@media (max-width: 768px) { .hide-mobile { display: none !important; } .show-mobile { display: block; } }