@charset "utf-8";
/* =========================================================
   tokens.css — デザイントークン（SPD-v2）
   - 値の直書きは禁止。サイズ・余白・色はここの変数だけを使う
   - ブレークポイントは 640 の1本だけ。640 以上は PC 値（html の font-size で vw 拡縮）
   - 旧サイトから引き継ぐ値：色・文字サイズ・行間
   - 新しく決め直した値：余白（--sp-*）／コンテンツ幅（フレーム確定後に見直す）
   ========================================================= */

:root {
	/* ---- color ---------------------------------------------------
	   役割名だけで持つ（値の名前 wh / gr / dk 等は作らない）。使い分けは docs/design-direction.md §8。
	   サービス個別ページの商品カラー（ゴリゴリ・デザインヘルパー・バンバン）は
	   共通トークンに含めない。ページ側で扱う。 */
	--cl-bg: #fff;           /* ページ・白セクションの地色 */
	--cl-bg-sub: #f5f5f5;    /* グレーセクションの地色。近い白（fa/fc/fd 等）は作らない */
	--cl-text: #333;         /* 本文テキストとアイコン（u-ico の既定色）*/
	--cl-text-sub: #7d7d7d;  /* 補足テキスト */
	--cl-line: #eee;         /* 区切りの罫線・リスト型カードの上罫線・副ボタンの枠（白セクション）*/
	--cl-line-sub: #e0e0e0;  /* f5 セクションの中の罫線（--cl-line は f5 に溶けるため）。components.css の .c-sec._bg で切り替える */
	--cl-line-strong: #ccc;  /* フォーム入力欄の枠と引用の左線だけ。区切り罫線には使わない */
	--cl-accent: #f18e1d;    /* ロゴのオレンジ。ホバー・現在地・強調したい1語だけ */
	--cl-error: #e24723;     /* エラー・必須ラベル。アクセントと並べたときに強すぎない赤 */

	/* 黒は主CTAボタン（c-btn _primary）だけ。ほかの場所から参照しない */
	--cl-btn-bg: #333;       /* --cl-text と同値。黒は1種類しか持たない */
	--cl-btn-text: #fff;

	/* 画像の上に文字を重ねるとき（c-heroSlider だけ。design-direction §9 の例外。他のパーツには使わない）*/
	--cl-text-inverse: #fff;                                                   /* 画像の上の白文字 */
	--cl-overlay: linear-gradient(to top, rgb(0 0 0 / 40%), transparent);      /* 文字を読ませるための下端の黒グラデーション */
	--cl-shadow: rgb(0 0 0 / 8%);  /* ホバー時の白カードの影だけ（静止状態では使わない）*/

	/* 追従ヘッダーの背景（半透明の --cl-bg） */
	--cl-bg-header: rgb(255 255 255 / 92%);

	/* ---- font-size（SP値）----------------------------------------
	   本文 18px（PC）を基準に、見出しとのジャンプ率を取った段階。切替は 640（640 以上は PC 値を vw で拡縮）。
	   PC: 1.2 / 1.6 / 1.8 / 2.4 / 4.0 / 5.6rem */
	--fs-xs: 1.2rem;   /* 注釈・パンくず。12px で固定（これ以上小さくしない） */
	--fs-s: 1.4rem;
	--fs-m: 1.6rem;    /* body 基準 */
	--fs-l: 2rem;      /* 小見出し */
	--fs-ml: 2.4rem;   /* 中見出し h3（Apple の 32px 相当） */
	--fs-lead: 1.8rem; /* リード文（本文より一段大きい。ジャンプ率 約1.3倍） */
	--fs-xl: 3.2rem;   /* セクション見出し h2 */
	--fs-2xl: 3.6rem;  /* ページタイトル h1 */
	--fs-ui: 1.4rem;   /* フッター・メニューなどUI系の補助テキスト。14px固定（--fs-s は PC で 16px になる）*/
	--fs-label: 1.2rem;  /* セクション英字ラベル（見出しの上に小さく置く＝Apple の eyebrow） */

	/* ---- spacing（SP値）------------------------------------------
	   旧 --base-margin の4段構成は引き継がず、新デザイン用に決め直した値。
	   フレーム確定後に見直す（docs/renewal-decisions.md 参照）。 */
	--sp-xs: 1rem;
	--sp-s: 2rem;
	--sp-m: 3rem;
	--sp-l: 6rem;

	/* ---- line-height ---------------------------------------------- */
	/* 4種類だけ。細かい段階は作らない。生値の line-height は書かない */
	--lh-ui: 1;        /* 1行で使うラベル・ボタン・タグ・日付・パンくず・ページャー */
	--lh-tight: 1.3;   /* 見出し・大きな文字・数字（2011年〜 等） */
	--lh-body: 1.7;    /* 本文・リード・カードや CTA の文章・その他 */
	--lh-read: 2;      /* 長文を読む場所だけ：記事本文・事例詳細の本文・課題ページの考え方・規約文 */

	/* ---- font-weight ------------------------------------------------ */
	--fw-normal: 400;
	--fw-med: 500;     /* リード文。太字にせず、少しだけ重くする */
	--fw-bold: 700;
	--fw-head: 700;    /* 見出し。太さで強調せず、大きさと余白で階層を作る */
	--fw-black: 900;   /* 使いどころを絞る（数字・ラベルなど） */

	/* ---- font-family -----------------------------------------------
	   Noto Sans JP のみ。旧 'Hind Siliguri'（u-ff-hind4 / u-ff-hind7）は引き継がない。 */
	--ff-base: "Noto Sans JP", sans-serif;

	/* ---- layout（docs/design-direction.md の inner フレーム）-----------
	   各幅は width: min(var(--w-*), 100% - var(--gutter) * 2) で使う。
	   max-width 単独にしない（1440幅のノートPCで余白が痩せるため）。
	   1200 を超える枠は「ヘッダー／パンくずの 1600」と「左右余白つきのフルサイズ」だけ。 */
	--w-text: 80rem;    /*  800px 本文・コラム／ニュース詳細 */
	--w-inner: 120rem;  /* 1200px 標準。拡縮が止まる幅と一致させる */
	--w-wide: 140rem;   /* 1400px 実績グリッド・画像帯・KV画像・クライアントロゴ帯だけ */
	--w-max: 160rem;    /* 1600px ヘッダー・パンくずなど、いちばん外側の枠 */
	--gutter: 2rem;     /* 左右の余白の下限。SP 20px 相当 */

	/* カードの内側余白。列数が多いカードは -sm を使う */
	--card-pad: 2rem;
	--card-pad-sm: 1.6rem;

	/* 角丸。白カード・吹き出しに使う（design-direction §9）。ボタンはピル（999px）、画像は0、アバターは丸 */
	--radius: 0.8rem;

	/* ---- motion ------------------------------------------------------ */
	--header-h: 6rem;   /* 追従ヘッダーの高さ。main の scroll-margin にも使う */
	--ease-t-fast: 0.2s;  /* カードのホバー（浮かせる）*/
	--ease-t: 0.3s;
	--ease-t-slow: 0.5s;

	/* スクロールフェードイン（u-fade。design-direction §10）。動きはこの1種類だけ */
	--fade-t: 0.6s;      /* 出る時間（ease-out）*/
	--fade-y: 1.6rem;    /* 下から上がる距離 */
	--fade-step: 0.08s;  /* u-fade-group の子を遅らせる刻み（6個目まで）*/

	--marquee-t: 109s;   /* ロゴのマーキー（c-logoMarquee）上段が1周する時間。KV下の帯（p-homeStrip 上段）と同じ速さになる値。PC は下で上書き */
}

@media print, screen and (min-width: 640px) {
	:root {
		--gutter: 4rem;  /* PC 40px */

		/* font-size（PC値）*/
		--fs-xs: 1.2rem;
		--fs-s: 1.6rem;
		--fs-m: 1.8rem;
		--fs-l: 2.4rem;
		--fs-ml: 3.2rem;
		--fs-lead: 2.2rem;
		--fs-xl: 4.8rem;
		--fs-2xl: 6.4rem;
		--fs-label: 1.2rem;

		/* layout（PC値）*/
		--header-h: 9rem;
		--card-pad: 4rem;
		--card-pad-sm: 2.4rem;

		/* spacing（PC値）*/
		--sp-xs: 1.5rem;
		--sp-s: 4rem;
		--sp-m: 6rem;
		--sp-l: 12rem;

		/* motion（PC値）*/
		--marquee-t: 132s;
	}
}