/* ============================================================
   ベース
   リセットと要素デフォルト、文字まわりの小さなユーティリティ。
   ============================================================ */
* { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--header-h) - var(--line));
  -webkit-text-size-adjust: 100%;
}

/* ページを横にスクロール・バウンスさせない。
   SP で横に指を動かすと、ページがずれて本文の外の背景写真がのぞいてしまうため。
   clip はスクロールの入れ物を作らないので、position: sticky は壊れない。
   先輩の声などの横スクロールは要素の中のスクロールなので、影響しない */
html,
body {
  overflow-x: clip;
  overscroll-behavior-x: none;
}
/* iOS Safari は、はみ出しが無くてもページを横に引っぱれてしまう（指を左右に動かすとページがずれ、
   本文の外の背景写真がのぞく）。上の 2 つだけでは止まらないので、ページでの指の操作を
   「縦のスクロール」と「拡大縮小」だけに限る。横にスワイプして使う場所（先輩の声のカード・表）は、
   それぞれの要素で横の操作を許可している（components.css の .slider / .table-wrap） */
body { touch-action: pan-y pinch-zoom; }

body {
  margin: 0;
  background: var(--y);
  color: var(--ink);
  font-family: var(--f-body);
  /* 本文の標準：16px・やや太め（500）・行間 1.6。個別の指定がなければすべてこれになる */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
/* 画面には出さず、読み上げソフトにだけ伝える文字 */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);   /* 古い Safari 向け（clip-path が効かない環境でも確実に隠す） */
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 途中で折り返させない短いまとまり（「(上限あり)」など） */
.nowrap { white-space: nowrap; }

/* ボタンは周りの文字色・書体を引き継ぐ（Safari は標準で文字色が青になるため） */
button { color: inherit; font: inherit; }
a { color: inherit; }
p { margin: 0; }
figure { margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ------------------------------------------------------------
   文字スタイルのユーティリティ
   ------------------------------------------------------------ */

/* セクション冒頭などの太い導入文 */
.lead {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 23px;
  line-height: 1.6;
}

/* 補足・注意書き */
.small {
  font-size: 14px;
  line-height: 1.7;
  color: var(--steel);
}

/* 数値を見せる一行（社員数・年齢構成など） */
.stat {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 22px;
}