/* ============================================================
   base.css — デザイントークン / リセット / タイポグラフィ / レイアウト
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root {
  /* color — 親サイト www.3dc.co.jp/ja に準拠 */
  --c-ink:        #000000;  /* 英字見出し */
  --c-ink-soft:   #2f363d;  /* ナビ・小見出し */
  --c-text:       #2f363d;  /* 本文 */
  --c-muted:      #6b7278;
  --c-line:       #d8d8d8;
  --c-line-soft:  #e6e6e6;
  --c-surface:    #ffffff;
  --c-surface-alt:#f4f4f4;
  --c-page:       #ffffff;
  --c-accent:     #0f1418;

  /* typography — 親サイトと同じ Bitter（欧文）+ Sawarabi Mincho（和文） */
  --font-en: "Bitter", "Times New Roman", serif;
  --font-jp: "Sawarabi Mincho", "Noto Serif JP", "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN", serif;
  /* 欧文は Bitter・和文は Sawarabi Mincho が当たる合成スタック */
  --font-display: "Bitter", "Sawarabi Mincho", "Noto Serif JP", serif;
  --font-body: "Bitter", "Sawarabi Mincho", "Noto Serif JP", serif;

  --fs-display: clamp(1.85rem, 1.2rem + 2vw, 2.5rem);
  --fs-h2:      clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  --fs-h3:      1.125rem;   /* 和文小見出し（親サイトは20px） */
  --fs-body:    0.875rem;   /* 親サイト本文 14px */
  --fs-lead:    0.9375rem;
  --fs-small:   0.8125rem;

  --lh-body: 1.9;
  --ls-display: 0.03em;     /* 親サイト 50px に対する 1.5px 相当 */

  /* spacing / layout */
  --container: 1120px;
  --gutter: 24px;
  --section-y: clamp(56px, 6vw, 88px);
  --header-y: 15px;         /* 親サイトのナビ内側余白（高さ74px） */
  --radius: 4px;            /* 親サイトのボタン角丸 */
}

/* ---- Reset ------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

img,
svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }

ul, ol { padding: 0; list-style: none; }

/* ---- Typography -------------------------------------------- */
.display,
.section__title {
  font-family: var(--font-display);
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--ls-display);
}

.display { font-size: var(--fs-display); }

.section__title { font-size: var(--fs-h2); }

/* 和文見出し（親サイトは Sawarabi Mincho / w700 / ls0.2px） */
.title-jp {
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 0.01em;
  line-height: 1.45;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--c-text);
  line-height: 1.95;
}

/* ---- Layout ------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 帯（band）— 白とライトグレーを交互に敷く。
   グレーは画面端まで塗り切るフルブリード。 */
.band {
  padding-block: var(--section-y);
  background: var(--c-surface);
}

.band--alt { background: var(--c-surface-alt); }

/* 見出しとコンテンツの間隔 */
.section__title + * { margin-top: clamp(32px, 4vw, 48px); }

/* アクセシビリティ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}