/* ------------------------------------------------------------
* CSS変数
* ------------------------------------------------------------ */
:root {
	/* カラー */
	--color-main: #005fb4;
	--color-main-vivid: #0047ec;
	--color-sub: #1ea9ff;
	--color-bg: #f4f4f4;
	--color-bg-th: #ededed;
	--color-border: #ddd;
	--color-separator: #ddd;
	--color-black: #333;
	--color-white: #fff;
	--color-danger: #f12121;
	--color-gray-txt: #afafaf;
	--color-gray-knockout: #dfdfdf;

	/* フォント */
	--ja: 'Roboto', 'Noto Sans JP', sans-serif;
	--en: 'Barlow', sans-serif;

	/* フォントサイズ */
	--fz-xxs: 0.625rem;
	--fz-xs: 0.75rem;
	--fz-sm: 0.875rem;
	--fz-md: 1rem;
	--fz-lg: 1.2rem;
	--fz-xl: 1.5rem;
	--fz-xxl: 2rem;

	/* 余白 */
	--none: 0;
	--x3s: 0.25rem;
	--xxs: 0.5rem;
	--xs: 1rem;
	--sm: 1.5rem;
	--md: 2rem;
	--lg: 2.5rem;
	--xl: 3rem;
	--xxl: 4rem;
	--x3l: 6rem;

	/* 余白 */
	--gutter: min(4rem, 6vw);

	/* 行送り */
	--lh-none: 1;
	--lh-tight: 1.25;
	--lh-normal: 1.5;
	--lh-relaxed: 1.75;

	/* ヘッダーの高さ */
	--header-height: 70px;

	/* コンテンツエリア */
	--container: 940px;
	--container-wide: 1140px;
	--container-narrow: 850px;

	/* イージング */
	--bezier: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (width >= 1024px) {
	:root {
		--header-height: 100px;
	}
}