@charset "UTF-8";

/* ================================================================================
KV
================================================================================ */
@media print, screen
{

#KV
{
	/* padding: 0; */

	background: linear-gradient(180deg,
		white 0%,
		white calc(100% - 150 * var(--v)),
		var(--Ctheme1) calc(100% - 150 * var(--v)),
		var(--Ctheme1) 100%	
	);
}
#KV > .inner
{
	/* max-width: unset; */
	padding: calc(50 * var(--v)) 0;
}
#KV .boxes
{
	display: flex;
	padding: calc(20 * var(--v));
	background: white;
	border-radius: calc(6 * var(--v));
	box-shadow: var(--shadow0);
}
#KV .boxes .box{	width: 50%;	}
#KV .boxes .box:nth-child(1) picture{	width: 100%;	height: 100%;	}
#KV .boxes .box:nth-child(2)
{
	display: flex;	align-items: center;
	padding: 0 calc(20 * var(--v)) 0 calc(40 * var(--v));
}
#KV .boxes .box:nth-child(2) > .inner{	width: 100%;	}

#KV .category
{
	display: flex;	flex-wrap: wrap;	align-items: center;
	gap: calc(20 * var(--v));
	margin-bottom: calc(10 * var(--v));
}
#KV .category li
{
	padding: 0.3em 0.5em 0.4em;
	border: 2px solid var(--Ctheme1);
	border-radius: calc(4 * var(--v));

	color: var(--Ctheme1);
	font-size: var(--fzv16);
	font-weight: 500;
}
#KV h1
{
	margin-bottom: calc(10 * var(--v));
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.3;
}
#KV .line
{
	margin-bottom: calc(10 * var(--v));
	background: var(--Cgray2);
}
#KV .description
{
	margin-bottom: calc(20 * var(--v));
	line-height: 1.7;
}
#KV .buttons
{
	display: flex;	flex-wrap: wrap;	align-items: center;
	gap: calc(10 * var(--v)) calc(20 * var(--v));	
}
#KV .buttons .buttonA{	flex-shrink: 0;	}
#KV .buttons .buttonA.document,
#KV .buttons .buttonA.contact
{	--color1: var(--Calert0);	}

#KV .buttons .buttonA.document a[disabled],
#KV .buttons .buttonA.contact a[disabled],
#KV .buttons .buttonA.contact .a[disabled]
{
	filter: opacity(0.7) grayscale(0.9);
	pointer-events: none !important;
}

#KV .checkbox
{
	display: flex;	align-items: center;
	gap: 0.5rem;
}

#KV .note
{
	margin-top: calc(10 * var(--v));
	color: var(--Calert0);
	font-size: var(--fzv13);
	font-weight: 600;
}

}
@media screen and (min-width: 768px)
{


}
@media screen and (max-width: 767px)
{

#KV{	padding: 0 var(--pageP);	}

#KV .boxes
{
	flex-direction: column;
	gap: calc(20 * var(--v));
}
#KV .boxes .box{	width: 100%;	}
#KV .buttons{	flex-direction: column;	}
#KV .buttons .buttonA{	width: 80%;	}
#KV .note{	text-align: center;	}


}



/* ======================================== end ======================================== */