/*
  サイト全体で共通の値と、複数ページで使う土台のクラス。

  色・書体・レイアウトの寸法はここの :root にまとめてある。
  色を変えたいときや余白を詰めたいときは、まずここを見ればよい。
*/

:root {
  /* --- 色 ------------------------------------------------------------ */
  --color-primary: #1b3669;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-text-muted: #333333;
  --color-text-sub: #3a444a;
  --color-text-inverse: #ffffff;
  /* 会社概要の項目名など、本文より一段落とす補足テキスト */
  --color-text-note: #6b7280;
  /* 罫線と、画像が入る前のプレースホルダ */
  --color-border: #d9d9d9;
  /* 本文中のテキストリンク */
  --color-link: #004ea1;
  /* 入力の不備を伝える文字と枠線（お問い合わせフォーム） */
  --color-error: #b91c1c;
  /* 白い円形ボタンに乗るアイコンの色 */
  --color-accent: #0553dd;
  /* CAREER の写真に重ねるベール */
  --color-overlay: #093060;
  /* 円形アイコンボタンの地色 */
  --color-icon-button: #171717;

  /* --- 書体 ---------------------------------------------------------- */
  --font-logo: 'Montaga', 'Times New Roman', serif;
  --font-ui: 'Noto Sans JP', sans-serif;
  --font-display: 'Zen Kaku Gothic Antique', sans-serif;
  /* 英字の大見出し（SERVICE / CASES / NEWS / WORKS / COMPANY / CAREER） */
  --font-heading: 'Montserrat', 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', 'Noto Sans JP', sans-serif;
  --font-icon: 'Material Symbols Rounded';

  /* --- レイアウト ------------------------------------------------------ */
  /*
    コンテンツ幅はデザイン（1920 幅）の 1600px。左右の余白は 1280 以上でデザイン値の 40px、
    そこから 640px まで直線的に詰めて 20px で止める
  */
  --content-max-width: 1600px;
  --gutter: clamp(20px, 3.13vw, 40px);
  --header-height: 88px;
  --header-height-sp: 64px;
  /*
    デザインではセクションごとに天地の余白が 100〜140px とばらついているので、
    通しで揃えて縦のリズムを一定にする
  */
  --section-padding-block: clamp(72px, 6.25vw, 120px);
}

/*
  ブレークポイント（メディアクエリの中では変数が使えないので、値は各ファイルに直接書く）

  sm : 428px 以下
  md : 768px 以下
  lg : 960px 以下
  xl : 1280px 以下
*/

body {
  background: var(--color-background);
}

/*
  セクションの内容をヘッダーのロゴ／ナビと同じ位置に揃えるための箱。
  ヘッダーと同じ「最大 1600px + 左右の余白」で組むので、1920 幅では
  内容が 200px から始まりデザインと一致する。
*/
.container {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/*
  ヘッダーはメインビジュアルに重ねる前提で position: absolute にしてあるので、
  ヒーローを持たない下層ページは自分でヘッダーぶんの余白を空ける。
*/
.page-top {
  padding-top: calc(var(--header-height) + clamp(40px, 4.2vw, 80px));
}

/* 全ページ共通の外枠。ヘッダーを中身に重ねるため基準を作る */
.site {
  position: relative;
}

.site__header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  .page-top {
    padding-top: calc(var(--header-height-sp) + 40px);
  }
}