/* リセットと基本タイポグラフィ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-3)); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-brand); }
a:hover { color: var(--color-brand-dark); }
h1, h2, h3, h4 { line-height: var(--line-height-tight); margin: 0 0 var(--space-3); font-weight: 700; }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
/* h4 は font-size 指定が無く本文と同じ16pxの太字でしかなかったため、
   「Features / Finish / Lubricant」が延々と続く製品ページで段差が消えていた。
   サイズを足すとh3と競合するので、大きさではなく字詰めと色で区別する。 */
h4 { font-size: var(--font-size-base); letter-spacing: .06em; text-transform: uppercase;
     color: var(--color-brand-dark); }
p  { margin: 0 0 var(--space-3); }
ul, ol { margin: 0 0 var(--space-3); padding-left: 1.25em; }
table { border-collapse: collapse; width: 100%; font-size: var(--font-size-sm); }
th, td { border: 1px solid var(--color-border); padding: var(--space-2); text-align: left; }
thead th { background: var(--color-bg-subtle); }  /* 行見出しまで塗るとゼブラが消えるのでthead限定 */

/* キーボード操作時のフォーカスを明示する（アクセシビリティ） */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* 読み上げ専用テキスト */
.visually-hidden {
  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: var(--space-3); top: -4rem; z-index: 100;
  background: var(--color-brand); color: #fff; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius); transition: top .15s;
}
.skip-link:focus { top: var(--space-3); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- 見出しの前の余白 ---
   見出しは「直前の内容の終わり」と「次の内容の始まり」を分ける役目があるため、
   前を広く・後ろを狭くする。これが無いと、ダウンロード一覧の直後に
   次の見出しが0pxで接してしまい、どこで区切れるのか読み取れない。 */
main h2 { margin-top: var(--space-6); }
main h3 { margin-top: var(--space-5); }
main h4 { margin-top: var(--space-4); }
/* 節の先頭に来た見出しは、節自身の余白があるので足さない */
main section > h2:first-child,
main section > :first-child > h2:first-child,
main .container > h2:first-child { margin-top: 0; }