:root {
	--color1: #666666; 
	--color2: #bbbbbb;
	--color-text: #999;
	--color-link: #999;
	--color-link-hover: #000;
	--color-link-active: #000;
	--color-pagination-active: #000;
	--hl-font: 'Roboto', sans-serif;
	--sm: clamp(.7rem,1.1vw,.85rem);
	--md: clamp(.85rem,1.3vw,1.15rem);
	--lg: 1.2rem;
	--xl: clamp(1.3rem,2.5vw,3rem);
	--xxl: clamp(1.6rem,4vw,4rem);
	--xxxl: max(1.8rem,6vw);
	--grid-gap: var( --sp2);
	--header-height: clamp(4rem,13vw,10rem);
	--sp1: clamp(.5rem, 1.1vw, 3rem);
	--sp2: calc( var( --sp1) * 2 );
	--sp3: calc( var( --sp1) * 3 );
	--sp4: calc( var( --sp1) * 4 );
	--sp5: calc( var( --sp1) * 5 );
	--sp6: calc( var( --sp1) * 6 );
	--sp7: calc( var( --sp1) * 7 );
	--sp8: calc( var( --sp1) * 8 );
	--sp9: calc( var( --sp1) * 9 );
	--sp10: calc( var( --sp1) * 10 );
	--sp-half: calc( var( --sp1) / 2 );
	--sp-quarter: calc( var( --sp1) / 4 );
	--indent: clamp(1.2rem,3vw,3.5rem);
	--btn-height: clamp(2.2rem,2.9vw,3.1rem);
	--btn-padding-horizontal: clamp(1rem,2vw,2.5rem);
	--btn-padding-vertical: clamp(0.2rem,.8vw,0.7rem);
	--btn-gap: clamp(0.3rem, 0.5vw, 0.6rem);
	--btn-radius: max(1rem,3vw);
	--btn-border-width: 1px;
	--max-content-width: 160rem;
	--headline-shift: clamp(1rem, 10.5vw, 12rem);
	--section-height: clamp(16rem, 45vw, 50rem);
	--section-space: var( --sp4);
	--lh-sm: 140%;
	--lh-md: 127%;
	--lh-lg: 120%;
	--lh-xl: 104%;
	--lh-xxl: 109%;
	--lh-xxxl: 100%;
	--mb-sm: calc(var(--sm)/2);
	--mb-md: calc(var(--md)*1.5);
	--mb-lg: calc(var(--lg)*1.3);
	--mb-xl: calc(var(--xl)*1);
	--mb-xxl: calc(var(--xxl)/2);
	--mb-xxxl: max( 1.3rem, calc(var(--xxxl)*.5) );	
	--fw-light: 300;
	--fw-regular: 400;
	--fw-bold: 700;
	--fw-hl: 500;	
	--icon-stroke-width: 1.5px;
	--logo-width: clamp(6.5rem,13vw,13rem);
	--br-erwo: max(1rem,3vw);
	
}
@media screen and (min-width: 768px){
	:root {
		--lg: 1.5rem;	
	}
}