@charset 'UTF-8';
@use '../../../common/scss/_variables' as vars;
@use '../global' as *;

/* 変数
---------------------------------------------*/
:root {
	--font-family: #{vars.$font-family};

	// fontSize
	--font-size: 0.9375rem;     // 15px相当
	--font-size--xs: 0.6875rem; // 11px相当
	--font-size--sm: 0.75rem;   // 12px相当
	--font-size--md: 0.875rem;  // 14px相当
	--font-size--lg: 1.125rem;  // 18px相当
	--font-size--xl: 1.25rem;   // 20px相当
	--font-size--2xl: 1.5rem;   // 24px相当
	--font-size--3xl: 1.875rem; // 30px相当
	--font-size--4xl: 2.25rem;  // 36px相当


	--transition-duration: .3s;
	--transition-timing: ease-in-out;
	--transition: all var(--transition-duration) var(--transition-timing);

	--z-index: 10;
	--content-border: 1px solid rgba(0, 0, 0, 0.06);

	//layout
	--container-spacing--x: 1rem; // 16px相当

	--content-sidebar-gap: 3rem; // 48px相当

	--contents-spacing: 1.25rem; // 20px相当
	@include mq('sm', '>='){
		--contents-spacing: 3.75rem; // 60px相当
	}


	// offcanvas
	--offcanvas-width: 80vw;
}