/* =============================================================================
   服部設備さま｜設計トークン
   色：2026-09-29 ゆかさん決定。主色は明るいブルーグレー、差し色は旧サイトの
       ロゴの水色（ロゴの実物 old-site/img/image243.JPG から抽出した #3994E3）
   余白：Photo サイトの値より大きく取る（2026-09-29 ゆかさん）
   ============================================================================= */

/* -----------------------------------------------------------------------------
   この案件で必ず守ること（ゆかさん・2026-09-29）

   1. 背景と色が違うコンテンツを、薄いボーダーで囲わない。
      区切りは「面の色の差」「見出しの下の短い罫」「余白」で作る。
      ホバーのため、あるいは意図のあるデザインとして必要なときは使ってよい。
   2. 左端の太い border-left をアクセントに使うのは、必要最低限にする。
      ほかの表現でできるなら、そちらを採る。
   3. 余白はたっぷり取る。窮屈にしない。
   -------------------------------------------------------------------------- */

:root {
	/* 書体 — この3つだけ */
	--hts-font-heading: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
	--hts-font-body: 'Noto Sans JP', sans-serif;

	/* 色｜締め色。色相212・彩度24%・明度21%。ロゴの水色と同じ一族の暗い段 */
	--hts-dark: #293542;        /* フッター・ボタン・見出し。白文字で 12.48 */
	--hts-dark-hover: #1E2A38;
	--hts-on-dark: #C7CED6;     /* 濃い面の上の補足文字。--hts-dark の上で 7.86 */

	/* 色｜ロゴの水色 */
	--hts-accent: #3994E3;      /* 面・図形・アイコン。小さい文字には使わない */
	--hts-accent-text: #1D79C9; /* 文字と、水色のボタンの地。白文字で 4.54 */
	--hts-accent-hover: #1763A5;
	--hts-logo-color: #3994E3;

	/* 色｜地と面 */
	--hts-bg: #FFFFFF;
	--hts-surface: #FFFFFF;      /* ヘッダーなどの面 */
	--hts-surface-tint: #EFF2F6; /* 区切りの面・採用バナー */

	/* 色｜文字 */
	--hts-ink: #1F242B;
	--hts-muted: #5E6469;

	/* 罫 — 引くと決めたところにだけ使う。囲いには使わない */
	--hts-rule: #DDE2E8;

	/* 文字の大きさ */
	--hts-head-label-size: clamp(11px, 1.1vw, 13px);
	--hts-head-title-size: clamp(26px, 3.2vw, 44px);
	--hts-h2-size: clamp(19px, 1.9vw, 24px);
	--hts-body-size: 15px;
	--hts-body-line-height: 2.1;
	--hts-body-letter-spacing: 0.05em;

	/* 余白 */
	--hts-section-v-pad: clamp(80px, 9vw, 160px);
	--hts-block-gap: clamp(56px, 6vw, 96px);
	--hts-stack-gap: clamp(16px, 1.6vw, 22px);

	/* コンテナ */
	--hts-container: 1100px;
	--hts-container-pad: clamp(20px, 5vw, 64px);
	--hts-container-wide: min(1640px, 100%);
	--hts-container-wide-pad: clamp(20px, 5vw, 80px);

	/* 角丸 */
	--hts-radius-md: 4px;
	--hts-radius-pill: 999px;

	/* 動き */
	--hts-transition: 0.3s;

	/* ボタン */
	--hts-btn-pad: 17px 44px;
	--hts-btn-font: 12px;

	/*
	 * ヘッダーの高さ。追随ナビが貼り付く位置と、見出しがヘッダーに隠れない
	 * ための基準。header.php を作ったら、実際の高さを測って入れ直す。
	 */
	--hts-fixed-nav-height: 96px;
}

@media (max-width: 999px) {
	:root {
		/* 上下 16px×2 ＋ マーク 36px。実測して入れ直す */
		--hts-fixed-nav-height: 68px;
	}
}

/*
 * ブレークポイントは 480 / 767 / 999・1000 / 1200 の4つ。
 * CSS 変数はメディアクエリの中では使えないので、数値を直接書く。
 * それ以外の値を使うときは、理由をコメントで添える。
 */