/* base.css — リセットとベースタイポ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--c-ink);
  background: var(--c-white);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ページ全体の連続背景（コンプの幾何ラスター：薄グレー地＋斜めファセット＋ハーフトーンのドット群）。
   コンプ実座標では設計 y375 から下に配置され、ドット帯は黒帯直下(設計y601〜)に現れる。
   幅追従(size:100%)なので hero のスケール(1920基準)と一致し、position-y は 375/1920≒19.53vw。
   hero と 講師セクションでこの1枚を共有＝継ぎ目なし・ドット位置一致。 */
main {
  background-color: #eef1f4;
  background-image: url("../assets/pagebg.jpg");
  background-image: image-set(
    url("../assets/pagebg.webp") type("image/webp"),
    url("../assets/pagebg.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center 19.53vw;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* キーボードフォーカス可視（L-05） */
:focus-visible { outline: 3px solid #ffb020; outline-offset: 2px; }

/* モーション抑制の尊重（L-05） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* スクリーンリーダー専用 */
.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;
}