@charset "utf-8";

/* ============================
	tokens
	JTC様_TOP_0908（Figma 1440px幅）の実測値。
	色・サイズの直値をCSSに書かず、必ずここの変数を参照する。
	common.css より先に読み込む（functions.php の my_wp_enqueue_scripts 参照）。

	単位について:
	  bohr は html { font-size: 62.5% } のため PC は 1rem = 10px。
	  SP（767px以下）は html { font-size: 70% } のため 1rem = 11.2px。
	  SP用の値は 11.2px 基準で再計算している。
============================ */

:root {
  /* ---- color ----
	Figma上は #d9512d / #d9512e / #cf512f / #ce4f2e の4値が混在していたが、
	目視で判別できない差のため #d9512d に統一した（要デザイナー確認）。 */
  --c-primary: #d9512d;
  --c-primary-hover: #ce4f2e;
  --c-primary-light: #f1876a;
  --c-primary-pale: #facdc2;

  --c-ink: #17181a;
  --c-text: #4f4f4f;
  --c-text-sub: #6f7074;

  --c-white: #ffffff;
  --c-off-white: #fcfcfc;
  --c-bg-light: #f5f5f5;
  --c-bg-gray: #e6e6e6;
  --c-border: #d9d9d9;
  --c-dark: #5a5b60;
  /* ▼2026-09-10 追加：モーダルのオーバーレイ（--c-ink 相当の半透明） */
  --c-overlay: rgba(23, 24, 26, 0.7);

  /* ---- font family ---- */
  --f-base: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
  --f-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
  --f-en: "Oswald", sans-serif;
  --f-brush: "Yuji Syuku", "Hiragino Mincho ProN", serif;

  /* ---- font size ---- */
  --fs-9: 0.9rem;
  --fs-12: 1.2rem;
  --fs-14: 1.4rem;
  --fs-15: 1.5rem;
  --fs-17: 1.7rem;
  --fs-18: 1.8rem;
  --fs-19: 1.9rem;
  --fs-20: 2rem;
  --fs-22: 2.2rem;
  --fs-30: 3rem;
  --fs-36: 3.6rem;
  --fs-40: 4rem;
  --fs-48: 4.8rem; /* 採用ページのメッセージ見出し */
  --fs-70: 7rem;

  /* ---- line height ---- */
  --lh-tight: 1;
  --lh-heading: 1.5;
  --lh-body: 1.88;
  --lh-body-s: 1.57;
  --lh-interview: 1.94;
  --lh-table: 2.78;

  /* ---- letter spacing ---- */
  --ls-en: 0.15em;
  --ls-h2: 0.1em;
  --ls-h2-narrow: 0.05em;
  --ls-btn: 0.05em;
  --ls-fv: 0.07em;

  /* ---- layout ----
	デザイン幅1440px / コンテンツ左右余白145px → コンテンツ実寸1150px。
	bohrの .content-width は box-sizing: border-box + padding 0 20px のため、
	width は 1150 + 40 = 1190px を指定する。bohr既定の1040pxは使わない（規約 3-2）。 */
  --w-design: 1200px;
  --w-content: 1190px;
  --w-header: 1380px;
  --h-header: 60px;
  --offset-header: 30px;

  /* ---- section ---- */
  --pad-sec: 100px;

  /* ---- radius ---- */
  --r-s: 5px;
  --r-m: 10px;
  --r-pill: 30px;

  /* ---- component ---- */
  --w-btn: 300px;
  --h-btn: 50px;
  --w-card-strength: 270px;
  --w-card-service: 360px;
  --transition: 0.3s ease;

  /* ---- shadow ---- */
  --bs: 2px 2px 10px rgba(79, 79, 79, 0.3);
}

@media screen and (max-width: 767px) {
  /* SPは 1rem = 11.2px。括弧内は実寸px。 */
  :root {
    --fs-70: 2.9rem; /* 32px */
    --fs-48: 2.3rem; /* 26px */
    --fs-40: 2.3rem; /* 26px */
    --fs-36: 2.1rem; /* 24px */
    --fs-30: 2rem; /* 22px */
    --fs-22: 1.6rem; /* 18px */
    --fs-20: 1.5rem; /* 17px */
    --fs-18: 1.4rem; /* 16px */
    --fs-17: 1.3rem; /* 15px */

    --pad-sec: 60px;
    --w-btn: 100%;
  }
}