@charset "UTF-8";

/* --------------------------------------------
SIMULATOR
--------------------------------------------- */
#simulator > h2{
	font-weight : 500;
	color : var( --blue );
	text-align : center;
	text-indent : .2em;
	letter-spacing : .2em;
}
#simulator > p > span{
	display : block;
	text-align : center;
}
#simulator > p > span:nth-of-type( 1 ){
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#simulator > p > span:nth-of-type( 1 ) span:nth-of-type( 1 ){
	font-style : italic;
	font-weight : 500;
	color : var( --orange );
}
#simulator > p > span:nth-of-type( 1 ) span:nth-of-type( 2 ){
	padding-inline : .25em;
	font-weight : 300;
	color : var( --blue );
	background : linear-gradient( transparent 70% , color-mix( in sRGB , var( --orange ) 80% , transparent ) 30% );
}
#simulator > p > span:nth-of-type( 2 ){
	font-weight : 500;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#simulator > p > span:nth-of-type( 2 ) span{
	-webkit-text-decoration : underline;
	text-decoration : underline;
	text-decoration-color : var( --orange );
	text-underline-offset : .4em;
}
#simulator fieldset{
	display : table-cell;
	min-width : 0;
	padding : .01em 0 0 0;
	margin : 0;
	border : 0;
}
#simulator fieldset:not( .is-view ){
	display : none;
}
#simulator fieldset.is-view{
	display : block;
}
#simulator legend{
	display : grid;
	grid-auto-flow : column;
	align-items : baseline;
	justify-content : start;
	float : left;
	width : 100%;
	padding : 0;
	margin : 0;
}
#simulator legend::after{
	display : block;
	width : 100%;
	content : "";
}
#simulator legend + *{
	clear : both;
}
#simulator legend > span:nth-of-type( 1 ){
	color : var( --orange );
}
#simulator legend > span:nth-of-type( 1 ) span{
	font-style : italic;
}
#simulator legend > span:nht-of-type( 2 ){
	font-weight : 700;
	color : var( --blue );
}
#simulator legend{
	border-bottom : solid 1px var( --orange );
}
@media screen and ( width <= 750px ){
	#simulator{
		padding-block : calc( 100 var( --remBase ) );
		padding-top : calc( 40 var( --remBase ) );
	}
	#simulator > h2{
		font-size : 4.4rem;
	}
	#simulator > p{
		margin-top : calc( 24 var( --remBase ) );
		font-size : 2.4rem;
		line-height : calc( 40 / 24 );
	}
	#simulator > p > span:nth-of-type( 1 ){
		font-size : 2.8rem;
		line-height : 1.5;
	}
	#simulator > p > span:nth-of-type( 1 ) span:nth-of-type( 1 ){
		font-size : 5.2rem;
	}
	#simulator > p > span:nth-of-type( 1 ) span:nth-of-type( 2 ){
		font-size : 3.6rem;
	}
	#simulator > p > span:nth-of-type( 2 ){
		margin-top : calc( 8 var( --remBase ) );
		font-size : 2.8rem;
		line-height : 1.5;
	}
	#simulator .box{
		padding-bottom : calc( 80 var( --remBase ) );
		margin-top : calc( 48 var( --remBase ) );
	}
	#simulator fieldset{
		padding-top : calc( 80 var( --remBase ) );
	}
	#simulator legend{
		grid-template-columns : 1fr auto 1fr;
		row-gap : calc( 20 var( --remBase ) );
		column-gap : calc( 12 * 100% / 676 );
		justify-content : start;
		padding-inline : calc( 12 var( --percentBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
	}
	#simulator legend > span:nth-of-type( 1 ){
		grid-row : 1;
		grid-column : 1;
		font-size : 2.8rem;
	}
	#simulator legend > span:nth-of-type( 1 ) span{
		font-size : 4rem;
	}
	#simulator legend > span:nth-of-type( 2 ){
		grid-row : 1;
		grid-column : 2;
		font-size : 3.8rem;
		text-align : center;
		text-indent : .1em;
	}
	#simulator legend > span:nth-of-type( 3 ){
		grid-row : 2;
		grid-column : 1/4;
		font-size : 2.6rem;
		line-height : 1.4;
	}
}
@media print , screen and ( width > 750px ){
	#simulator{
		padding-block : calc( 40 var( --remBase ) );
		padding-top : calc( 24 var( --remBase ) );
	}
	#simulator > h2{
		font-size : 5.2rem;
	}
	#simulator > p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#simulator > p > span:nth-of-type( 1 ){
		font-size : 3rem;
		line-height : 1.5;
	}
	#simulator > p > span:nth-of-type( 1 ) span:nth-of-type( 1 ){
		font-size : 4.8rem;
	}
	#simulator > p > span:nth-of-type( 1 ) span:nth-of-type( 2 ){
		font-size : 3.4rem;
	}
	#simulator > p > span:nth-of-type( 2 ){
		margin-top : calc( 4 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.5;
	}
	#simulator .box{
		padding-inline : calc( 39 var( --percentBase ) );
		padding-bottom : calc( 64 var( --remBase ) );
		margin-top : calc( 48 var( --remBase ) );
		border : solid 1px #ccc;
	}
	#simulator fieldset{
		padding-top : calc( 64 var( --remBase ) );
	}
	#simulator legend{
		column-gap : calc( 12 * 100% / 1096 );
		padding-inline : calc( 12 * 100% / 1120 );
		padding-bottom : calc( 12 var( --remBase ) );
	}
	#simulator legend > span:nth-of-type( 1 ){
		font-size : 2rem;
	}
	#simulator legend > span:nth-of-type( 1 ) span{
		font-size : 3.2rem;
	}
	#simulator legend > span:nth-of-type( 2 ){
		font-size : 3.2rem;
	}
	#simulator legend > span:nth-of-type( 3 ){
		font-size : 1.6rem;
	}
}
#pares{
	display : grid;
	align-items : center;
	justify-content : space-between;
}
#pares > li:not( #other ) input{
	position : absolute;
	z-index : -1;
	opacity : 0;
}
#pares > li:not( #other ) > label{
	display : block;
}
#pares > li:not( #other ) > label > span{
	position : relative;
	display : grid;
	align-items : start;
	overflow : hidden;
	cursor : pointer;
	border : solid 1px #ccc;
}
#pares > li:not( #other ) > label > span::before{
	display : block;
	grid-row : 1/3;
	grid-column : 1;
	align-self : center;
	content : "";
	background-color : white;
	border : solid 1px #ccc;
	border-radius : 50%;
}
#pares > li:not( #other ) > label > span > span:nth-of-type( 1 ){
	position : relative;
	display : grid;
	grid-row : 1;
	grid-column : 2;
	column-gap : calc( 8 var( --percentBase ) );
	align-items : center;
	justify-content : center;
	justify-content : space-between;
	width : 100%;
	height : 100%;
}
#pares > li:not( #other ) > label > span > span:nth-of-type( 1 )::after{
	grid-row : 1;
	grid-column : 2;
	content : "⇒";
}
#pares > li:not( #other ) > label > span > span:nth-of-type( 1 ) img{
	grid-row : 1;
	width : 100%;
	height : auto;
	border : solid 1px color-mix( in sRGB , black 10% , transparent );
}
#pares > li:not( #other ) > label > span > span:nth-of-type( 1 ) img:nth-of-type( 1 ){
	grid-column : 1;
}
#pares > li:not( #other ) > label > span > span:nth-of-type( 1 ) img:nth-of-type( 2 ){
	grid-column : 3;
}
#pares > li:not( #other ) > label > span > span:nth-of-type( 2 ){
	grid-row : 2;
	grid-column : 1/-1;
	font-weight : 500;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#pares > li:not( #other ) > label > span > span:nth-of-type( 2 ) span:nth-of-type( 2 ){
	padding-inline : .25em;
}
#pares > li:not( #other ) > label input[type="radio"]:checked + span{
	background-color : color-mix( in sRGB , var( --orange ) 10% , transparent );
	border-color : var( --orange );
}
#pares > li:not( #other ) > label input[type="radio"]:checked + span::after{
	position : absolute;
	top : 50%;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --orange );
	border-radius : 50%;
	translate : 0 -50%;
}
@media screen and ( width <= 750px ){
	#pares{
		grid-template-columns : repeat( 2 , calc( 336 var( --percentBase ) ) );
		row-gap : calc( 24 var( --remBase ) );
		padding-top : calc( 52 var( --remBase ) );
	}
	#pares > li:not( #other ) > label > span{
		grid-template-columns : calc( 28 * 100% / 288 )  1fr;
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 28 * 100% / 288 );
		padding-block : calc( 28 var( --remBase ) );
		padding-inline : calc( 23 * 100% / 336 );
		border-radius : calc( 12 var( --remBase ) );
	}
	#pares > li:not( #other ) > label > span::before{
		height : calc( 28 var( --remBase ) );
	}
	#pares > li:not( #other ) > label > span > span:nth-of-type( 1 ){
		grid-template-columns : calc( 100 * 100% / 232 ) auto calc( 100 * 100% / 232 );
	}
	#pares > li:not( #other ) > label > span > span:nth-of-type( 1 )::after{
		font-size : 2.8rem;
	}
	#pares > li:not( #other ) > label > span > span:nth-of-type( 2 ){
		font-size : 2.2rem;
	}
	#pares > li:not( #other ) input[type="radio"]:checked + span::after{
		left : calc( 27 * 100% / 334 );
		width : calc( 20 * 100% / 334 );
		height : calc( 20 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#pares{
		grid-template-columns : repeat( 4 , calc( 240 * 100% / 1120 ) );
		row-gap : calc( 20 var( --remBase ) );
		padding-top : calc( 40 var( --remBase ) );
	}
	#pares > li:not( #other ) > label > span{
		grid-template-columns : calc( 24 * 100% / 216 )  1fr;
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 12 * 100% / 216 );
		padding-block : calc( 20 var( --remBase ) );
		padding-inline : calc( 11 * 100% / 240 );
		border-radius : calc( 8 var( --remBase ) );
	}
	#pares > li:not( #other ) > label > span::before{
		height : calc( 24 var( --remBase ) );
	}
	#pares > li:not( #other ) > label > span > span:nth-of-type( 1 ){
		grid-template-columns : calc( 80 * 100% / 192 ) auto calc( 80 * 100% / 192 );
	}
	#pares > li:not( #other ) > label > span > span:nth-of-type( 1 )::after{
		font-size : 1.6rem;
	}
	#pares > li:not( #other ) > label > span > span:nth-of-type( 2 ){
		font-size : 1.6rem;
	}
	#pares > li:not( #other ) input[type="radio"]:checked + span::after{
		left : calc( 15 * 100% / 238 );
		width : calc( 16 * 100% / 238 );
		height : calc( 16 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#pares > li > label > span:hover{
		background-color : color-mix( in sRGB , var( --orange ) 10% , transparent );
		border-color : var( --orange );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#pares > li > label > span{
		transition : background var( --transitionBase ) , border-color var( --transitionBase );
	}
	#pares > li > label > span::after{
		transition : background var( --transitionBase );
	}
}
#other > p{
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#other input{
	position : absolute;
	z-index : -1;
	opacity : 0;
}
#other > label{
	display : block;
}
#other > label > span{
	position : relative;
	display : grid;
	align-items : start;
	cursor : pointer;
	border : solid 1px #ccc;
}
#other > label > span::before{
	display : block;
	grid-row : 1/3;
	grid-column : 1;
	align-self : center;
	content : "";
	background-color : white;
	border : solid 1px #ccc;
	border-radius : 50%;
}
#other > label > span > span:nth-of-type( 1 ){
	position : relative;
	display : grid;
	grid-row : 1;
	grid-column : 2;
	align-items : center;
	justify-content : start;
	width : 100%;
	height : 100%;
}
#other > label > span > span:nth-of-type( 1 )::after{
	grid-row : 1;
	grid-column : 2;
	text-align : center;
	content : "⇒";
}
#other > label > span > span:nth-of-type( 1 ) img{
	grid-row : 1;
	width : 100%;
	height : auto;
	border : solid 1px color-mix( in sRGB , black 10% , transparent );
}
#other > label > span > span:nth-of-type( 1 ) img:nth-of-type( 1 ){
	grid-column : 1;
}
#other > label > span > span:nth-of-type( 1 ) img:nth-of-type( 2 ){
	grid-column : 3;
}
#other > label > span > span:nth-of-type( 2 ){
	grid-row : 2;
	grid-column : 1/-1;
	font-weight : 500;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#other > label > span > span:nth-of-type( 2 ) span:nth-of-type( 2 ){
	padding-inline : .25em;
}
#other > label input[type="radio"]:checked + span{
	background-color : color-mix( in sRGB , var( --orange ) 10% , transparent );
	border-color : var( --orange );
}
#other > label input[type="radio"]:checked + span::after{
	position : absolute;
	top : 50%;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --orange );
	border-radius : 50%;
	translate : 0 -50%;
}
#other .choices{
	margin-bottom : 0;
}
#other .choices__inner{
	background-color : white;
}
#other .choices__list--single{
	display : block;
	padding : 0;
}
#other .choices__heading{
	color : #666;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#other .choices__item{
	display : grid;
	align-items : center;
	justify-content : start;
}
#other .choices__item img{
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : center;
}
#other .choices__item span{
	letter-spacing : .1em;
}
#other .choices[data-type*="select-one"]::after{
	content : none;
}
@media screen and ( width <= 750px ){
	#other{
		grid-column : span 2;
	}
	#other > p{
		padding-top : calc( 12 var( --remBase ) );
		padding-bottom : calc( 28 var( --remBase ) );
		font-size : 2rem;
	}
	#other > label > span{
		grid-template-columns : calc( 28 * 100% / 652 )  1fr;
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 28 * 100% / 652 );
		padding-block : calc( 28 var( --remBase ) );
		padding-inline : calc( 23 * 100% / 700 );
		border-radius : calc( 12 var( --remBase ) );
	}
	#other > label > span::before{
		height : calc( 28 var( --remBase ) );
	}
	#other > label > span > span:nth-of-type( 1 ){
		grid-template-columns : calc( 256 * 100% / 596 ) calc( 32 * 100% / 596 ) calc( 256 * 100% / 596 );
	}
	#other > label > span > span:nth-of-type( 1 )::after{
		font-size : 2.8rem;
	}
	#other > label > span > span:nth-of-type( 2 ){
		font-size : 2.2rem;
	}
	#other input[type="radio"]:checked + span::after{
		left : calc( 27 * 100% / 698 );
		width : calc( 20 * 100% / 698 );
		height : calc( 20 var( --remBase ) );
	}
	#other .choices__inner{
		padding : 0;
	}
	#other .choices__heading{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 12 * 100% / 254 );
		font-size : 2rem;
	}
	#other .choices__item{
		grid-template-rows : calc( 80 var( --remBase ) );
		column-gap : calc( 10 * 100% / 234 );
		padding-block : calc( 10 var( --remBase ) );
		padding-inline : calc( 10 * 100% / 254 );
	}
	#other .choices__item span{
		font-size : 1.8rem;
		line-height : 1.2;
	}
	#other .choices__item:has( img ){
		grid-template-columns : calc( 80 * 100% / 234 ) 1fr;
	}
}
@media print , screen and ( width > 750px ){
	#other{
		grid-column : span 4;
	}
	#other > p{
		padding-block : calc( 20 var( --remBase ) );
		font-size : 2rem;
	}
	#other > label > span{
		grid-template-columns : calc( 24 * 100% / 1096 )  1fr calc( 24 * 100% / 1096 );
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 12 * 100% / 1096 );
		padding-block : calc( 20 var( --remBase ) );
		padding-inline : calc( 11 * 100% / 1120 );
		border-radius : calc( 8 var( --remBase ) );
	}
	#other > label > span::before{
		height : calc( 24 var( --remBase ) );
	}
	#other > label > span > span:nth-of-type( 1 ){
		grid-template-columns : 1fr calc( 80 * 100% / 1024 ) 1fr;
	}
	#other > label > span > span:nth-of-type( 1 )::after{
		font-size : 2rem;
	}
	#other > label > span > span:nth-of-type( 2 ){
		font-size : 2rem;
	}
	#other input[type="radio"]:checked + span::after{
		left : calc( 15 * 100% / 1118 );
		width : calc( 16 * 100% / 1118 );
		height : calc( 16 var( --remBase ) );
	}
	#other .choices__inner{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 11 * 100% / 472 );
	}
	#other .choices__heading{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 11 * 100% / 472 );
		font-size : 1.4rem;
	}
	#other .choices__item{
		grid-template-rows : calc( 64 var( --remBase ) );
	}
	#other .choices__item span{
		font-size : 1.8rem;
		line-height : 1.2;
	}
	#other .choices__item:has( img ){
		grid-template-columns : calc( 75 * 100% / 448 ) auto;
		column-gap : calc( 12 * 100% / 448 );
	}
	#other .choices__item:not( :has( img ) ){
		font-size : 1.8rem;
		line-height : 1.2;
	}
}
#step01 .stepBox:has( button[disabled] ){
	display : none;
}
#toContact{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
}
#toContact.is-view{
	grid-template-rows : 1fr;
}
#toContact > div{
	overflow : hidden;
}
#toContact p{
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#toContact p a{
	padding-inline : .4em;
	color : var( --blue );
	-webkit-text-decoration : underline;
	text-decoration : underline;
	text-decoration-color : var( --blue );
	text-underline-offset : .1em;
}
@media screen and ( width <= 750px ){
	#toContact.is-view > div{
		padding-top : calc( 40 var( --remBase ) );
	}
	#toContact p{
		font-size : 2.8rem;
		line-height : 1.5;
	}
}
@media print , screen and ( width > 750px ){
	#toContact.is-view > div{
		padding-top : calc( 40 var( --remBase ) );
	}
	#toContact p{
		font-size : 2rem;
		line-height : 1.5;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#other{
		transition : grid-template-rows var( --transitionBase );
	}
	#toContact{
		transition : grid-template-rows var( --transitionBase );
	}
	#toContact > div{
		transition : padding var( --transitionBase );
	}
}
#fields{
	display : grid;
	justify-content : space-between;
}
#fields > li input{
	position : absolute;
	z-index : -1;
	opacity : 0;
}
#fields > li > label{
	display : block;
}
#fields > li > label > span{
	position : relative;
	display : grid;
	align-items : center;
	overflow : hidden;
	cursor : pointer;
	border : solid 1px #ccc;
}
#fields > li > label > span::before{
	display : block;
	grid-row : 1;
	grid-column : 1;
	align-self : center;
	content : "";
	background-color : white;
	border : solid 1px #ccc;
	border-radius : 50%;
}
#fields > li > label input[type="radio"]:checked + span{
	background-color : color-mix( in sRGB , var( --orange ) 10% , transparent );
	border-color : var( --orange );
}
#fields > li > label input[type="radio"]:checked + span::after{
	position : absolute;
	top : 50%;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --orange );
	border-radius : 50%;
	translate : 0 -50%;
}
#fields > li p{
	font-weight : 500;
	color : #666;
	letter-spacing : .1em;
}
@media screen and ( width <= 750px ){
	#fields{
		grid-template-columns : repeat( 2 , calc( 336 var( --percentBase ) ) );
		row-gap : calc( 40 var( --remBase ) );
		padding-top : calc( 52 var( --remBase ) );
	}
	#fields > li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 2;
		row-gap : 0;
	}
	#fields > li > label > span{
		grid-template-columns : calc( 28 * 100% / 288 )  1fr;
		column-gap : calc( 20 * 100% / 288 );
		padding-block : calc( 20 var( --remBase ) );
		padding-inline : calc( 23 * 100% / 336 );
		font-size : 2.4rem;
		border-radius : calc( 12 var( --remBase ) );
	}
	#fields > li > label > span::before{
		height : calc( 28 var( --remBase ) );
	}
	#fields input[type="radio"]:checked + span::after{
		left : calc( 27 * 100% / 334 );
		width : calc( 20 * 100% / 334 );
		height : calc( 20 var( --remBase ) );
	}
	#fields p{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.4;
	}
}
@media print , screen and ( width > 750px ){
	#fields{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 240* 100% / 1120 ) );
		row-gap : calc( 24 var( --remBase ) );
		justify-content : space-between;
		padding-top : calc( 40 var( --remBase ) );
	}
	#fields > li > label > span{
		grid-template-columns : calc( 24 * 100% / 216 )  1fr;
		column-gap : calc( 12 * 100% / 216 );
		padding-block : calc( 20 var( --remBase ) );
		padding-inline : calc( 11 * 100% / 240 );
		font-size : 1.6rem;
		border-radius : calc( 8 var( --remBase ) );
	}
	#fields > li > label > span::before{
		height : calc( 24 var( --remBase ) );
	}
	#fields input[type="radio"]:checked + span::after{
		left : calc( 15 * 100% / 238 );
		width : calc( 16 * 100% / 238 );
		height : calc( 16 var( --remBase ) );
	}
	#fields p{
		margin-top : calc( 4 var( --remBase ) );
		font-size : 1.2rem;
		line-height : 1.5;
	}
}
@media ( hover : hover ){
	#fields > li > label > span:hover{
		background-color : color-mix( in sRGB , var( --orange ) 10% , transparent );
		border-color : var( --orange );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#fields > li > label > span{
		transition : background var( --transitionBase ) , border-color var( --transitionBase );
	}
	#fields > li > label > span::after{
		transition : background var( --transitionBase );
	}
}
#volumes > li{
	position : relative;
	border : solid 1px #ccc;
}
#volumes > li > label{
	cursor : pointer;
}
#volumes input[type="radio"]{
	position : absolute;
	z-index : -1;
	opacity : 0;
}
#volumes > li > label > span{
	position : relative;
	display : grid;
	align-items : center;
	overflow : hidden;
	cursor : pointer;
}
#volumes > li > label > span::before{
	display : block;
	grid-row : 1;
	grid-column : 1;
	align-self : center;
	content : "";
	background-color : white;
	border : solid 1px #ccc;
	border-radius : 50%;
}
#volumes input[type="radio"]:checked + span{
	background-color : color-mix( in sRGB , var( --orange ) 10% , transparent );
	border-color : var( --orange );
}
#volumes input[type="radio"]:checked + span::after{
	position : absolute;
	top : 50%;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --orange );
	border-radius : 50%;
	translate : 0 -50%;
}
#volumes .accordionBox{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
}
#volumes .accordion{
	overflow : hidden;
}
#volumes > li > label:has( input[type="radio"]:checked ) + .accordionBox{
	grid-template-rows : 1fr;
}
@media screen and ( width <= 750px ){
	#volumes{
		padding-top : calc( 52 var( --remBase ) );
	}
	#volumes > li{
		padding-block : calc( 20 var( --remBase ) );
		padding-inline : calc( 23 * 100% / 698 );
	}
	#volumes > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#volumes > li > label > span{
		grid-template-columns : calc( 28 * 100% / 650 )  1fr;
		column-gap : calc( 20 * 100% / 650 );
		font-size : 2.6rem;
		border-radius : calc( 12 var( --remBase ) );
	}
	#volumes > li > label > span::before{
		height : calc( 28 var( --remBase ) );
	}
	#volumes input[type="radio"]:checked + span::after{
		left : calc( 4 * 100% / 650 );
		width : calc( 20 * 100% / 650 );
		height : calc( 20 var( --remBase ) );
	}
	#volumes > li > label:has( input[type="radio"]:checked ) + .accordionBox{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#volumes{
		padding-top : calc( 40 var( --remBase ) );
	}
	#volumes > li{
		padding-block : calc( 20 var( --remBase ) );
		padding-inline : calc( 23 * 100% / 1120 );
	}
	#volumes > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#volumes > li > label > span{
		grid-template-columns : calc( 24 * 100% / 1072 )  1fr;
		column-gap : calc( 12 * 100% / 1072 );
		font-size : 2.2rem;
		border-radius : calc( 8 var( --remBase ) );
	}
	#volumes > li > label > span::before{
		height : calc( 24 var( --remBase ) );
	}
	#volumes input[type="radio"]:checked + span::after{
		left : calc( 4 * 100% / 1072 );
		width : calc( 16 * 100% / 1072 );
		height : calc( 16 var( --remBase ) );
	}
	#volumes > li > label:has( input[type="radio"]:checked ) + .accordionBox{
		margin-top : calc( 28 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#volumes > li > label > span:hover{
		background-color : color-mix( in sRGB , var( --orange ) 10% , transparent );
		border-color : var( --orange );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#volumes > li > label > span{
		transition : background var( --transitionBase ) , border-color var( --transitionBase );
	}
	#volumes > li > label > span::after{
		transition : background var( --transitionBase );
	}
	#volumes .accordionBox{
		transition : grid-template-rows var( --transitionBase ) , margin var( --transitionBase );
	}
}
#volumes01 .accordion > div{
	display : grid;
	align-items : center;
	justify-content : start;
}
#volumes01 label{
	font-weight : 500;
	letter-spacing : .1em;
}
#volumes01 span{
	letter-spacing : .1em;
}
#volumes01 input[type="number"]{
	width : 100%;
	text-align : right;
	border : solid 1px #ccc;
}
#volumes01 input[type="number"]::placeholder{
	color : #999;
}
@media screen and ( width <= 750px ){
	#volumes01 .accordion > div{
		grid-template-columns : auto calc( 240 var( --remBase ) ) auto;
		column-gap : calc( 20 var( --remBase ) );
	}
	#volumes01 label{
		font-size : 2.4rem;
	}
	#volumes01 span{
		font-size : 2.4rem;
	}
	#volumes01 input[type="number"]{
		width : 100%;
		height : calc( 64 var( --remBase ) );
		padding-right : .4em;
		font-size : 2.4rem;
		border-radius : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#volumes01 .accordion > div{
		grid-template-columns : auto calc( 120 var( --remBase ) ) auto;
		column-gap : calc( 16 var( --remBase ) );
	}
	#volumes01 label{
		font-size : 1.6rem;
	}
	#volumes01 span{
		font-size : 1.6rem;
	}
	#volumes01 input[type="number"]{
		height : calc( 36 var( --remBase ) );
		font-size : 1.6rem;
		border-radius : calc( 4 var( --remBase ) );
	}
}
#volumes02 textarea{
	width : 100%;
	min-height : 5lh;
	max-height : 30lh;
	letter-spacing : .1em;
	border : solid 1px #ccc;
	field-sizing : content;
}
@media screen and ( width <= 750px ){
	#volumes02 textarea{
		padding-block : calc( 20 var( --remBase ) );
		padding-inline : calc( 12 var( --percentBase ) );
		font-size : 2.4rem;
		line-height : 1.5;
		border-radius : calc( 4 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#volumes02 textarea{
		padding-block : calc( 12 var( --remBase ) );
		padding-inline : calc( 12 * 100% / 1120 );
		font-size : 1.6rem;
		line-height : 1.5;
		border-radius : calc( 4 var( --remBase ) );
	}
}
#volumes03 .uploadBox{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : center;
	font-weight : 500;
	line-height : 1;
	color : transparent;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : #f1f1f1;
	border : dashed 1px #ccc;
	border-color : #ccc;
	border-style : dashed;
}
#volumes03 .uploadBox span{
	position : absolute;
	display : grid;
	place-items : center;
	width : 100%;
	line-height : 1.4;
	color : var( --base );
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	pointer-events : none;
}
#volumes03 input[type="file"]{
	display : none;
	width : 100%;
	line-height : 1.2;
	letter-spacing : .1em;
}
@media screen and ( width <= 750px ){
	#volumes03 .uploadBox{
		height : calc( 240 var( --remBase ) );
		margin-bottom : calc( 12 var( --remBase ) );
		font-size : 2.4rem;
		font-size : 2.6rem;
		border-width : calc( 4 var( --remBase ) );
		border-radius : calc( 4 var( --remBase ) );
	}
	#volumes03 .uploadBox span{
		height : calc( 240 var( --remBase ) );
		font-size : 2.4rem;
	}
}
@media print , screen and ( width > 750px ){
	#volumes03 .uploadBox{
		height : calc( 160 var( --remBase ) );
		margin-bottom : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		border-width : calc( 4 var( --remBase ) );
		border-radius : calc( 4 var( --remBase ) );
	}
	#volumes03 .uploadBox span{
		height : calc( 160 var( --remBase ) );
		font-size : 1.6rem;
	}
}
#outputVolumes h4{
	font-weight : 500;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#outputVolumes > ul > li{
	display : grid;
	align-items : baseline;
}
#outputVolumes label{
	font-weight : 500;
	letter-spacing : .1em;
}
#outputVolumes span{
	letter-spacing : .1em;
}
#outputVolumes input{
	display : block;
	display : grid;
	align-items : center;
	justify-content : end;
	width : 100%;
	padding-right : .4em;
	font-weight : 500;
	text-align : right;
	letter-spacing : .1em;
	cursor : not-allowed;
	background-color : white;
	background-color : color-mix( in srgb , #ccc 20% , transparent );
	border-inline : 0;
	border-top : 0;
	border-bottom : solid 1px #ccc;
}
@media screen and ( width <= 750px ){
	#outputVolumes{
		margin-top : calc( 80 var( --remBase ) );
	}
	#outputVolumes h4{
		font-size : 2.6rem;
	}
	#outputVolumes > ul{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 336 var( --percentBase ) ) );
		row-gap : calc( 20 var( --remBase ) );
		align-items : center;
		justify-content : space-between;
		margin-top : calc( 40 var( --remBase ) );
	}
	#outputVolumes > ul > li{
		grid-template-columns : auto calc( 140 var( --remBase ) ) auto;
		column-gap : calc( 16 * 100% / 336 );
		align-items : center;
	}
	#outputVolumes label{
		font-size : 2.4rem;
	}
	#outputVolumes span{
		font-size : 2.4rem;
	}
	#outputVolumes input{
		height : calc( 48 var( --remBase ) );
		font-size : 2.4rem;
	}
}
@media print , screen and ( width > 750px ){
	#outputVolumes{
		margin-top : calc( 64 var( --remBase ) );
	}
	#outputVolumes h4{
		font-size : 2.2rem;
	}
	#outputVolumes > ul{
		display : grid;
		grid-template-columns : repeat( 2 , auto );
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 40 * 100% / 1120 );
		align-items : center;
		justify-content : center;
		margin-top : calc( 24 var( --remBase ) );
	}
	#outputVolumes > ul > li{
		grid-template-columns : auto calc( 120 var( --remBase ) ) auto;
		column-gap : calc( 16 var( --remBase ) );
		align-items : center;
	}
	#outputVolumes label{
		font-size : 1.6rem;
	}
	#outputVolumes span{
		font-size : 1.6rem;
	}
	#outputVolumes input{
		height : calc( 32 var( --remBase ) );
		padding-bottom : calc( 2 var( --remBase ) );
		font-size : 2rem;
	}
}
#plans > li{
	position : relative;
	border : solid 1px color-mix( in sRGB , var( --blue ) 10% , transparent );
}
#plans > li:has( input[type="radio"]:checked ){
	background-color : color-mix( in sRGB , var( --blue02 ) 10% , transparent );
	outline : solid 2px var( --blue02 );
	outline-offset : -2px;
	scale : 1.1;
}
#plans > li:has( > input[type="radio"][disabled] ){
	display : none;
}
#plans input[type="radio"]{
	position : absolute;
	width : 100%;
	height : 100%;
	opacity : 0;
}
#plans h3 span{
	display : block;
	font-weight : 500;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#plans > li:nth-child( 1 ) h3{
	background-image : linear-gradient( 0deg , rgb( 27 136 226 ) 0% , rgb( 18 103 181 / .99608 ) 100% );
}
#plans > li:nth-child( 2 ) h3{
	background-image : linear-gradient( 0deg , rgb( 18 103 181 ) 0% , rgb( 9 69 135 / .99608 ) 100% );
}
#plans > li:nth-child( 3 ) h3{
	background-image : linear-gradient( 0deg , rgb( 9 69 135 ) 0% , rgb( 0 36 89 / .99608 ) 100% );
}
#plans .price{
	display : grid;
	grid-auto-flow : column;
	align-items : baseline;
	justify-content : center;
}
#plans .price span{
	letter-spacing : .05em;
}
#plans .price .value{
	font-weight : 700;
	color : var( --blue );
}
#plans strong{
	display : block;
	width : fit-content;
	margin-inline : auto;
	overflow : hidden;
	font-weight : 700;
	line-height : 1.2;
	color : var( --blue );
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#plans strong span{
	display : inline-block;
	animation : negotiation 1s forwards;
	animation-iteration-count : 5;
	animation-direction : alternate;
	translate : 0 1lh;
}
#plans strong span:nth-of-type( 1 ){
	animation-delay : 0s;
}
#plans strong span:nth-of-type( 2 ){
	animation-delay : .1s;
}
#plans strong span:nth-of-type( 3 ){
	animation-delay : .2s;
}
#plans strong span:nth-of-type( 4 ){
	animation-delay : .3s;
}
#plans .native{
	display : grid;
	align-items : center;
	justify-content : center;
}
#plans .native.is-hidden{
	display : none;
}
#plans .native:has( :not( select ) ){
	grid-template-columns : auto auto;
}
#plans .native dt{
	font-weight : 500;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#plans .native dd:not( :has( select:not( [disabled] ) ) ){
	font-weight : 500;
	letter-spacing : .1em;
}
#plans .native select:not( [disabled] ){
	position : relative;
	z-index : 1;
	width : 100%;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : white;
	border : solid 1px #ccc;
}
#plans .native select[disabled]{
	width : fit-content;
	height : auto;
	font-weight : 500;
	color : var( --base );
	letter-spacing : .1em;
	background-color : transparent;
	border : 0;
	appearance : none;
}
#plans .features{
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
}
#plans .features li{
	display : grid;
	place-items : center;
	padding-inline : 1em;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	border-radius : 100vmax;
}
#plans .features .layout{
	background-color : #019ec7;
}
#plans .features .check{
	background-color : #f663b1;
}
#plans .description{
	line-height : 1.5;
	letter-spacing : .1em;
}
@media screen and ( width <= 750px ){
	#plans{
		padding-inline : calc( 80 var( --percentBase ) );
		padding-top : calc( 80 var( --remBase ) );
	}
	#plans > li{
		padding-bottom : calc( 64 var( --remBase ) );
	}
	#plans > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#plans h3{
		padding-block : calc( 40 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 538 );
	}
	#plans h3 > span:nth-of-type( 1 ){
		font-size : 3.6rem;
	}
	#plans h3 > span:nth-of-type( 2 ){
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2.8rem;
	}
	#plans .price{
		margin-top : calc( 64 var( --remBase ) );
	}
	#plans .price .prefix{
		font-size : 4rem;
	}
	#plans .price .value{
		font-size : 6.4rem;
	}
	#plans .price .suffix{
		font-size : 3.2rem;
	}
	#plans .price .sub{
		font-size : 2.4rem;
	}
	#plans strong{
		margin-top : calc( 48 var( --remBase ) );
		font-size : 3.6rem;
	}
	#plans .native{
		column-gap : calc( 24 * 100% / 538 );
		margin-top : calc( 28 var( --remBase ) );
	}
	#plans .native:has( select:not( [disabled] ) ){
		grid-template-columns : auto calc( 240 * 100% / 538 );
	}
	#plans .native dt{
		font-size : 2.4rem;
		line-height : 1.2;
	}
	#plans .native dd:not( :has( select:not( [disabled] ) ) ){
		font-size : 3rem;
	}
	#plans .native select:not( [disabled] ){
		height : calc( 64 var( --remBase ) );
		font-size : 2.4rem;
		border-radius : calc( 8 var( --remBase ) );
	}
	#plans .features{
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 16 * 100% / 538 );
		align-self : center;
		padding-inline : calc( 24 * 100% / 538 );
		margin-top : calc( 28 var( --remBase ) );
	}
	#plans .features li{
		padding-block : calc( 8 var( --remBase ) );
		font-size : 2rem;
	}
	#plans .description{
		padding-inline : calc( 47 * 100% / 538 );
		margin-top : calc( 32 var( --remBase ) );
		font-size : 2.2rem;
	}
}
@media print , screen and ( width > 750px ){
	#plans{
		display : grid;
		grid-auto-columns : calc( 338 * 100% / 1120 );
		grid-auto-flow : column;
		column-gap : calc( ( ( ( 1120 - 338 * 3 ) / 3  ) ) * 100% / 1120 );
		justify-content : center;
		padding-top : calc( 64 var( --remBase ) );
	}
	#plans > li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 6;
		align-items : start;
		padding-bottom : calc( 24 var( --remBase ) );
	}
	#plans h3{
		grid-row : 1;
		padding-block : calc( 20 var( --remBase ) );
		padding-inline : calc( 12 * 100% / 338 );
	}
	#plans h3 > span:nth-of-type( 1 ){
		font-size : 2.4rem;
	}
	#plans h3 > span:nth-of-type( 2 ){
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
	}
	#plans .price{
		grid-row : 2;
		margin-top : calc( 32 var( --remBase ) );
	}
	#plans .price .prefix{
		font-size : 2.4rem;
	}
	#plans .price .value{
		font-size : 3rem;
	}
	#plans .price .suffix{
		font-size : 1.6rem;
	}
	#plans .price .sub{
		font-size : 1.6rem;
	}
	#plans strong{
		grid-row : 3;
		margin-top : calc( 24 var( --remBase ) );
		font-size : 2.4rem;
	}
	#plans .native{
		grid-row : 4;
		column-gap : calc( 8 * 100% / 338 );
		margin-top : calc( 20 var( --remBase ) );
	}
	#plans .native:has( select:not( [disabled] ) ){
		grid-template-columns : auto calc( 160 * 100% / 338 );
	}
	#plans .native:has( select[disabled] ){
		grid-template-columns : auto 2.2em;
	}
	#plans .native dt{
		font-size : 1.2rem;
		line-height : 1.2;
	}
	#plans .native dd:not( :has( select:not( [disabled] ) ) ){
		font-size : 2rem;
	}
	#plans .native select:not( [disabled] ){
		height : calc( 32 var( --remBase ) );
		font-size : 1.6rem;
		border-radius : calc( 4 var( --remBase ) );
	}
	#plans .features{
		grid-row : 5;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 * 100% / 314 );
		align-self : center;
		padding-inline : calc( 12 * 100% / 338 );
		margin-top : calc( 16 var( --remBase ) );
	}
	#plans .features li{
		padding-block : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
	}
	#plans .description{
		grid-row : 6;
		padding-inline : calc( 12 * 100% / 338 );
		margin-top : calc( 12 var( --remBase ) );
		font-size : 1.2rem;
	}
}
@media ( hover : hover ){
	#plans li:hover{
		background-color : color-mix( in sRGB , var( --blue02 ) 10% , transparent );
		outline : solid 2px var( --blue02 );
		outline-offset : -2px;
		scale : 1.1;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#plans li{
		transition : outline var( --transitionBase ) , background-color var( --transitionBase ) , scale var( --transitionBase );
	}
}
@keyframes negotiation{
	0%{
		translate : 0 1lh;
	}
	100%{
		translate : 0  0;
	}
}
#newCustomers{
	display : block;
	margin-inline : auto;
	cursor : pointer;
	border-color : var( --orange );
	border-style : solid;
}
#newCustomers input[type="checkbox"]{
	position : absolute;
	opacity : 0;
}
#newCustomers > span{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : center;
	width : fit-content;
	margin-inline : auto;
	font-weight : 500;
	letter-spacing : .1em;
}
#newCustomers > span > span{
	display : grid;
	align-items : center;
	justify-content : start;
}
#newCustomers > span::before{
	font-size : 0;
	content : "";
	border-color : #ccc;
	border-style : solid;
}
#newCustomers .em{
	padding-left : calc( 10 var( --remBase ) );
	padding-right : calc( 10 var( --remBase ) );
	font-weight : 700;
	color : var( --orange );
}
#newCustomers input[type="checkbox"]:checked + span::after{
	position : absolute;
	top : 50%;
	font-size : 0;
	content : "";
	background : url( "../../images/ui/icon/check.svg" ) center / auto 100% no-repeat;
	filter : var( --filterOrange );
	translate : 0 -50%;
}
#newCustomers[disabled]{
	pointer-events : none;
	opacity : 0;
}
@media screen and ( width <= 750px ){
	#newCustomers{
		padding-block : calc( 20 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
		border-width : cacl( 4 var( --remBase ) );
	}
	#newCustomers > span{
		grid-template-columns : calc( 24 var( --remBase ) ) auto;
		column-gap : calc( 24 var( --remBase ) );
	}
	#newCustomers > span::before{
		height : calc( 24 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
		border-radius : calc( 2 var( --remBase ) );
	}
	#newCustomers > span > span{
		grid-template-columns : auto 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 4 var( --remBase ) );
		justify-content : start;
	}
	#newCustomers > span > span > span:nth-of-type( 1 ){
		grid-row : 1;
		grid-column : 1/3;
		font-size : 2.4rem;
	}
	#newCustomers > span > span .em{
		grid-row : 2;
		grid-column : 1;
		font-size : 3.2rem;
	}
	#newCustomers > span > span > span:nth-of-type( 3 ){
		grid-row : 2;
		grid-column : 2;
		font-size : 2.4rem;
	}
	#newCustomers input[type="checkbox"]:checked + span::after{
		left : calc( -2 var( --remBase ) );
		width : calc( 28 var( --remBase ) );
		height : calc( 28 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#newCustomers{
		width : calc( 920 * 100% / 1120 );
		padding-block : calc( 16 var( --remBase ) );
		margin-top : calc( 64 var( --remBase ) );
		border-width : cacl( 4 var( --remBase ) );
	}
	#newCustomers > span{
		grid-template-columns : calc( 24 var( --remBase ) ) auto;
		column-gap : calc( 24 var( --remBase ) );
		font-size : 2rem;
	}
	#newCustomers > span::before{
		height : calc( 24 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
		border-radius : calc( 2 var( --remBase ) );
	}
	#newCustomers > span > span{
		grid-auto-flow : column;
	}
	#newCustomers .em{
		font-size : 2.8rem;
	}
	#newCustomers input[type="checkbox"]:checked + span::after{
		left : calc( -2 var( --remBase ) );
		width : calc( 28 var( --remBase ) );
		height : calc( 28 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#newCustomers > span::after{
		transition : background var( --transitionBase );
	}
}
#dueBox{
	margin-inline : auto;
}
#dueBox h4{
	font-weight : 500;
	text-align : center;
	letter-spacing : .1em;
}
#dueBox p.sub{
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : start;
	color : #666;
	letter-spacing : .1em;
}
@media screen and ( width <= 750px ){
	#dueBox{
		margin-top : calc( 80 var( --remBase ) );
	}
	#dueBox h4{
		font-size : 3.6rem;
	}
	#dueBox p.sub{
		font-size : 2rem;
		line-height : 1.4;
	}
}
@media print , screen and ( width > 750px ){
	#dueBox{
		width : calc( 920 * 100% / 1120 );
		margin-top : calc( 64 var( --remBase ) );
	}
	#dueBox h4{
		font-size : 2.2rem;
	}
	#dueBox p.sub{
		font-size : 1.2rem;
		line-height : 1.4;
	}
}
#dues > li:has( input[type="radio"]:checked ){
	background-color : color-mix( in sRGB , var( --blue02 ) 10% , transparent );
}
#dues label{
	display : block;
	width : 100%;
}
#dues label > span{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : start;
	width : 100%;
}
#dues label > span::before{
	display : block;
	font-size : 0;
	content : "";
	background-color : white;
	border : solid 1px #ccc;
	border-radius : 50%;
}
#dues label > span > span{
	display : grid;
	grid-auto-flow : column;
	align-items : baseline;
	justify-content : start;
}
#dues input[type="radio"]:checked + span::after{
	position : absolute;
	top : 50%;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --blue02 );
	border-radius : 50%;
	translate : 0 -50%;
}
#dues input[type="radio"]{
	position : absolute;
	opacity : 0;
}
#dues .label{
	display : grid;
	place-items : center;
	font-weight : 500;
	color : white;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
}
#dues .label + span::before{
	font-weight : 500;
	color : var( --blue02 );
}
#dues > li.express .label{
	background-color : color-mix( in sRGB , var( --blue02 ) 100% , transparent );
}
#dues > li.normal .label{
	background-color : color-mix( in sRGB , var( --blue02 ) 60% , transparent );
}
#dues > li.free .label{
	background-color : color-mix( in sRGB , var( --blue02 ) 30% , transparent );
}
#dues .dates{
	letter-spacing : .1em;
}
#dues .dates span{
	font-weight : 500;
	color : var( --blue02 );
	letter-spacing : .1em;
}
#dues :where( .suffix , .description , .suffix02 ){
	letter-spacing : .1em;
}
@media screen and ( width <= 750px ){
	#dues{
		padding-bottom : calc( 64 var( --remBase ) );
		margin-top : calc( 52 var( --remBase ) );
	}
	#dues > li{
		position : relative;
		padding-inline : calc( 28  var( --percentBase ) );
	}
	#dues > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#dues label > span{
		grid-template-columns : calc( 28 * 100% / 644 ) 1fr;
		column-gap : calc( 28 * 100% / 644 );
	}
	#dues label > span::before{
		height : calc( 28 var( --remBase ) );
	}
	#dues label > span > span{
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 8 * 100% / 588 );
		align-items : center;
	}
	#dues label > span > span:has( .dates ){
		grid-template-columns : calc( 200 * 100% / 588 ) auto auto;
	}
	#dues label > span > span:has( .dates ) .dates{
		grid-row : 1;
		grid-column : 2;
	}
	#dues label > span > span:has( .dates ) .suffix{
		grid-row : 1;
		grid-column : 3;
	}
	#dues label > span > span:not( :has( .dates ) ){
		grid-template-columns : calc( 200 * 100% / 588 ) auto ;
	}
	#dues label > span > span:not( :has( .dates ) ) .description{
		grid-row : 1;
		grid-column : 2;
	}
	#dues input[type="radio"]:checked + span::after{
		left : calc( 4 * 100% / 644 );
		width : calc( 20 * 100% / 644 );
		height : calc( 20 var( --remBase ) );
	}
	#dues .label{
		grid-row : 1;
		grid-column : 1;
		padding-block : calc( 32 var( --remBase ) );
		font-size : 2.2rem;
	}
	#dues .label + span{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 8 var( --remBase ) );
		align-items : center;
		justify-content : start;
	}
	#dues .label + span::before{
		font-size : 2rem;
	}
	#dues .dates{
		font-size : 2.2rem;
	}
	#dues .dates span{
		font-size : 3.6rem;
	}
	#dues .suffix{
		font-size : 2.2rem;
	}
	#dues .description{
		font-size : 2.4rem;
		line-height : 1.4;
	}
	#dues .suffix02{
		position : absolute;
		top : 100%;
		left : calc( 56 * 100% / 644 );
		width : calc( 200 * 100% / 644 );
		font-size : 2.4rem;
		line-height : 1.4;
		text-align : center;
		text-indent : .1em;
	}
}
@media print , screen and ( width > 750px ){
	#dues{
		padding-bottom : calc( 24 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#dues > li{
		padding-inline : calc( 12  * 100% / 920 );
	}
	#dues > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#dues label > span{
		grid-template-columns : calc( 24 * 100% / 896 ) 1fr;
		column-gap : calc( 24 * 100% / 896 );
	}
	#dues label > span::before{
		height : calc( 24 var( --remBase ) );
	}
	#dues label > span > span{
		column-gap : calc( 16 * 100% / 848 );
	}
	#dues label > span > span:has( .dates ){
		grid-template-columns : calc( 200 * 100% / 848 ) auto auto;
	}
	#dues label > span > span:not( :has( .dates ) ){
		grid-template-columns : calc( 200 * 100% / 848 ) auto ;
	}
	#dues input[type="radio"]:checked + span::after{
		left : calc( 4 * 100% / 896 );
		width : calc( 16 * 100% / 896 );
		height : calc( 16 var( --remBase ) );
	}
	#dues .label{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 200 );
		font-size : 1.6rem;
	}
	#dues .label + span::before{
		padding-inline : 1em;
		font-size : 2rem;
	}
	#dues .dates{
		font-size : 1.6rem;
	}
	#dues .dates span{
		font-size : 2.4rem;
	}
	#dues :where( .suffix , .description , .suffix02 ){
		font-size : 1.6rem;
	}
}
@media ( hover : hover ){
	#dues > li:hover{
		background-color : color-mix( in sRGB , var( --blue02 ) 10% , transparent );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#dues > li{
		transition : background var( --transitionBase );
	}
}
#step05 > @media (--up) > dl{
	display : grid;
	grid-template-columns : calc( 240 * 100% / 1120 );
}
#confirms{
	display : grid;
	clear : both;
}
#confirms > dt , #confirms > dd{
	border-bottom : solid 1px #ccc;
}
#confirms dt{
	font-weight : 500;
	color : var( --blue );
	letter-spacing : .1em;
}
#confirms dd{
	font-weight : 400;
	letter-spacing : .1em;
}
#confirms dl{
	display : grid;
	align-items : baseline;
}
@media screen and ( width <= 750px ){
	#confirms{
		grid-template-columns : calc( 250 * 100% / 700 ) 1fr;
		padding-top : calc( 52 var( --remBase ) );
	}
	#confirms > dt , #confirms > dd{
		padding-block : calc( 36 var( --remBase ) );
	}
	#confirms dt{
		font-size : 2.4rem;
	}
	#confirms dd{
		margin-top : calc( ( 1em - 1lh ) / 2 );
		font-size : 2.4rem;
		line-height : calc( 40 / 24 );
	}
	#confirms > dt{
		padding-inline : calc( 25 * 100% / 250 );
	}
	#confirms dl{
		grid-template-columns : calc( 120 * 100% / 450 ) auto;
		column-gap : calc( 25 * 100% / 450 );
	}
}
@media print , screen and ( width > 750px ){
	#confirms{
		grid-template-columns : calc( 240 * 100% / 920 ) 1fr;
		width : calc( 920 * 100% / 1120 );
		padding-top : calc( 40 var( --remBase ) );
		margin-inline : auto;
	}
	#confirms > dt , #confirms > dd{
		padding-block : calc( 24 var( --remBase ) );
	}
	#confirms dt{
		font-size : 1.8rem;
	}
	#confirms dd{
		margin-top : calc( ( 1em - 1lh ) / 2 );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#confirms > dt{
		padding-inline : calc( 12 * 100% / 240 );
	}
	#confirms dl{
		grid-template-columns : calc( 200 * 100% / 680 ) auto;
		column-gap : calc( 24 * 100% / 680 );
	}
}
#dummy{
	display : inline-block;
	height : 0;
	overflow : hidden;
	font-weight : 400;
	letter-spacing : .1em;
	white-space : nowrap;
}
@media screen and ( width <= 750px ){
	#dummy{
		font-size : 2.4rem;
		line-height : calc( 40 / 24 );
	}
}
@media print , screen and ( width > 750px ){
	#dummy{
		font-size : 1.6rem;
		line-height : 1.5;
	}
}
#negotiations{
	display : block;
	margin-inline : auto;
	cursor : pointer;
	border-color : var( --orange );
	border-style : solid;
}
#negotiations.is-hidden{
	display : none;
}
#negotiations input[type="checkbox"]{
	position : absolute;
	opacity : 0;
}
#negotiations > span{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : start;
	font-weight : 500;
	letter-spacing : .1em;
}
#negotiations > span::before{
	font-size : 0;
	content : "";
	border-color : #ccc;
	border-style : solid;
}
#negotiations input[type="checkbox"]:checked + span::after{
	position : absolute;
	top : 50%;
	font-size : 0;
	content : "";
	background : url( "../../images/ui/icon/check.svg" ) center / auto 100% no-repeat;
	filter : var( --filterOrange );
	translate : 0 -50%;
}
@media screen and ( width <= 750px ){
	#negotiations{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 var( --percentBase ) );
		margin-top : calc( 64 var( --remBase ) );
		border-width : cacl( 4 var( --remBase ) );
	}
	#negotiations > span{
		grid-template-columns : calc( 24 var( --remBase ) ) 1fr;
		column-gap : calc( 24 var( --remBase ) );
		font-size : 2.4rem;
	}
	#negotiations > span::before{
		height : calc( 24 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
		border-radius : calc( 2 var( --remBase ) );
	}
	#negotiations input[type="checkbox"]:checked + span::after{
		left : calc( -2 var( --remBase ) );
		width : calc( 28 var( --remBase ) );
		height : calc( 28 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#negotiations{
		width : calc( 920 * 100% / 1120 );
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 48 * 100% / 920 );
		margin-top : calc( 64 var( --remBase ) );
		border-width : cacl( 4 var( --remBase ) );
	}
	#negotiations > span{
		grid-template-columns : calc( 24 var( --remBase ) ) auto;
		column-gap : calc( 24 var( --remBase ) );
		font-size : 2rem;
	}
	#negotiations > span::before{
		height : calc( 24 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
		border-radius : calc( 2 var( --remBase ) );
	}
	#negotiations input[type="checkbox"]:checked + span::after{
		left : calc( -2 var( --remBase ) );
		width : calc( 28 var( --remBase ) );
		height : calc( 28 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#negotiations > span::after{
		transition : background var( --transitionBase );
	}
}
#negotiations.is-hidden + #requestedPrice{
	display : none;
}
#requestedPrice{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
}
#requestedPrice > div{
	display : grid;
	align-items : center;
	justify-content : start;
	overflow : hidden;
}
#requestedPrice label{
	font-weight : 500;
	letter-spacing : .1em;
}
#requestedPrice input[type="number"]{
	text-align : right;
	background-color : white;
	border : solid 1px #ccc;
}
#requestedPrice input[type="number"]::placeholder{
	padding-left : .5em;
	text-align : left;
}
@media screen and ( width <= 750px ){
	#requestedPrice > div{
		grid-template-columns : auto calc( 320 var( --percentBase ) ) auto;
		margin-top : calc( 36 var( --remBase ) );
	}
	#requestedPrice label{
		padding-right : 1em;
		font-size : 2.4rem;
	}
	#requestedPrice input[type="number"]{
		height : calc( 64 var( --remBase ) );
		padding-right : .4em;
		font-size : 2.4rem;
	}
	#requestedPrice input[type="number"]::placeholder{
		font-size : 2rem;
	}
	#requestedPrice .unit{
		padding-left : .5em;
		font-size : 2rem;
	}
}
@media print , screen and ( width > 750px ){
	#requestedPrice{
		width : calc( 920 * 100% / 1120 );
		margin-inline : auto;
	}
	#requestedPrice > div{
		grid-template-columns : auto calc( 320 * 100% / 920 ) auto;
		margin-top : calc( 24 var( --remBase ) );
	}
	#requestedPrice label{
		padding-right : 1em;
		font-size : 2rem;
	}
	#requestedPrice input[type="number"]{
		height : calc( 40 var( --remBase ) );
		font-size : 2rem;
	}
	#requestedPrice input[type="number"]::placeholder{
		font-size : 1.6rem;
	}
	#requestedPrice .unit{
		padding-left : .5em;
		font-size : 1.6rem;
	}
}
#negotiations:has( #price_negotiation:checked ) + #requestedPrice{
	grid-template-rows : 1fr;
}
@media ( prefers-reduced-motion : no-preference ){
	#requestedPrice{
		transition : grid-template-rows var( --transitionBase );
	}
}
#immediatelyBox{
	display : block;
	margin-inline : auto;
	cursor : pointer;
	border-color : var( --orange );
	border-style : solid;
}
#immediatelyBox input[type="checkbox"]{
	position : absolute;
	opacity : 0;
}
#immediatelyBox > span{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : start;
	font-weight : 500;
	letter-spacing : .1em;
}
#immediatelyBox > span::before{
	font-size : 0;
	content : "";
	border-color : #ccc;
	border-style : solid;
}
#immediatelyBox input[type="checkbox"]:checked + span::after{
	position : absolute;
	top : 50%;
	font-size : 0;
	content : "";
	background : url( "../../images/ui/icon/check.svg" ) center / auto 100% no-repeat;
	filter : var( --filterOrange );
	translate : 0 -50%;
}
@media screen and ( width <= 750px ){
	#immediatelyBox{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 var( --percentBase ) );
		margin-top : calc( 64 var( --remBase ) );
		border-width : cacl( 4 var( --remBase ) );
	}
	#immediatelyBox > span{
		grid-template-columns : calc( 24 var( --remBase ) ) 1fr;
		column-gap : calc( 24 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.4;
	}
	#immediatelyBox > span::before{
		height : calc( 24 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
		border-radius : calc( 2 var( --remBase ) );
	}
	#immediatelyBox input[type="checkbox"]:checked + span::after{
		left : calc( -2 var( --remBase ) );
		width : calc( 28 var( --remBase ) );
		height : calc( 28 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#immediatelyBox{
		width : calc( 920 * 100% / 1120 );
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 48 * 100% / 920 );
		margin-top : calc( 64 var( --remBase ) );
		border-width : cacl( 4 var( --remBase ) );
	}
	#immediatelyBox > span{
		grid-template-columns : calc( 24 var( --remBase ) ) auto;
		column-gap : calc( 24 var( --remBase ) );
		font-size : 2rem;
	}
	#immediatelyBox > span::before{
		height : calc( 24 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
		border-radius : calc( 2 var( --remBase ) );
	}
	#immediatelyBox input[type="checkbox"]:checked + span::after{
		left : calc( -2 var( --remBase ) );
		width : calc( 28 var( --remBase ) );
		height : calc( 28 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#immediatelyBox > span::after{
		transition : background var( --transitionBase );
	}
}
#step06 .backstep02{
	position : relative;
	display : grid;
	grid-template-columns : auto auto 1em;
	place-items : center;
	justify-content : center;
	width : 100%;
	padding-inline : 1em;
	margin-inline : auto;
	font-weight : 500;
	line-height : 1.2;
	letter-spacing : .1em;
	border-style : solid;
	border-width : 1px;
}
#step06 .error{
	display : block;
	line-height : 1.2;
	color : var( --orange );
}
#step06 #confirmCheckError , #step06 #confirmCheck02Error{
	text-align : center;
}
@media screen and ( width <= 750px ){
	#step06 legend{
		margin-bottom : calc( 40 var( --remBase ) );
	}
	#step06 .backstep02{
		column-gap : .5em;
		width : calc( 320 var( --percentBase ) );
		padding-block : calc( 24 var( --remBase ) );
		font-size : 2.2rem;
		border-radius : calc( 12 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#step06 legend{
		margin-bottom : calc( 40 var( --remBase ) );
	}
	#step06 .backstep02{
		column-gap : 1em;
		width : fit-content;
		padding-block : calc( 20 var( --remBase ) );
		font-size : 1.8rem;
		border-radius : calc( 12 var( --remBase ) );
	}
}
#contacts dt label{
	width : 100%;
	font-weight : 500;
	color : var( --blue );
	letter-spacing : .1em;
}
#contacts dt label.required{
	display : grid;
	align-items : center;
	justify-content : space-between;
}
#contacts dt label.required::after{
	display : grid;
	place-items : center;
	padding-inline : 1em;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : #e11617;
	border-radius : 100vmax;
}
#contacts dt label:not( .required ){
	display : block;
}
#contacts dt label:not( .required ) span{
	display : block;
}
#contacts dd{
	font-weight : 400;
	letter-spacing : .1em;
}
#contacts dl{
	display : grid;
}
#contacts :where( input[type="text"] , input[type="email"] , input[type="number"] , input[type="date"] ) , #contacts textarea{
	width : 100%;
	padding-inline : .75em;
	letter-spacing : .1em;
	border : solid 1px #ccc;
}
#contacts textarea{
	min-height : calc( 3lh + 1.5em );
	padding-block : .75em;
	letter-spacing : .14em;
}
#contacts .address li{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
}
#contacts .address button{
	display : grid;
	place-items : center;
	padding-inline : .75em;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : var( --blue02 );
	border-radius : 100vmax;
}
#contacts .files .uploadBox{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : center;
	font-weight : 500;
	line-height : 1;
	line-height : 1.2;
	color : transparent;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : #f1f1f1;
	border-color : #ccc;
	border-style : dashed;
}
#contacts .files .uploadBox span{
	position : absolute;
	display : grid;
	place-items : center;
	width : 100%;
	line-height : 1.4;
	color : var( --base );
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	pointer-events : none;
}
#contacts .files .uploadBox input[type="file"]{
	display : none;
}
#contacts .files p{
	line-height : 1.4;
	color : #666;
	letter-spacing : .1em;
}
#contacts .files p span{
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : start;
	line-height : 1.4;
	letter-spacing : .1em;
}
@media screen and ( width <= 750px ){
	#contacts{
		padding-top : calc( 12 var( --remBase ) );
	}
	#contacts > dt{
		padding-top : calc( 40 var( --remBase ) );
	}
	#contacts > dd{
		padding-bottom : calc( 48 var( --remBase ) );
		margin-top : calc( 28 var( --remBase ) );
		border-bottom : solid 1px var( --blue );
	}
	#contacts dt label{
		font-size : 2.4rem;
	}
	#contacts dd{
		font-size : 2.4rem;
		line-height : calc( 40 / 24 );
	}
	#contacts > dt label.required{
		grid-template-columns : 1fr auto;
		column-gap : calc( 20 var( --percentBase ) );
		justify-content : start;
	}
	#contacts > dt label.required::after{
		padding-block : calc( 4 var( --remBase ) );
		font-size : 2rem;
	}
	#contacts > dt label:not( .required ) span{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 2.2rem;
		line-height : 1.2;
	}
	#contacts dl{
		grid-template-columns : calc( 240 var( --percentBase ) ) auto;
	}
	#contacts :where( input[type="text"] , input[type="email"] , input[type="number"] , input[type="date"] ) textarea{
		font-size : 2.4rem;
		border-radius : calc( 4 var( --remBase ) );
	}
	#contacts :where( input[type="text"] , input[type="email"] , input[type="number"] , input[type="date"] ){
		height : calc( 64 var( --remBase ) );
	}
	#contacts .address li + li{
		margin-top : calc( 32 var( --remBase ) );
	}
	#contacts .address li{
		column-gap : calc( 12 var( --percentBase ) );
	}
	#contacts .address li:has( button ){
		grid-template-columns : calc( 180 var( --percentBase ) ) calc( 240 var( --percentBase ) ) auto;
	}
	#contacts .address li:not( :has( button ) ){
		grid-template-columns : calc( 180 var( --percentBase ) ) 1fr;
	}
	#contacts .address li button{
		padding-block : calc( 8 var( --remBase ) );
		font-size : 2rem;
	}
	#contacts .files .uploadBox{
		height : calc( 240 var( --remBase ) );
		margin-bottom : calc( 12 var( --remBase ) );
		font-size : 2.4rem;
		font-size : 2.6rem;
		border-width : calc( 4 var( --remBase ) );
		border-radius : calc( 4 var( --remBase ) );
	}
	#contacts .files .uploadBox span{
		height : calc( 240 var( --remBase ) );
		font-size : 2.4rem;
	}
	#contacts .files p{
		margin-top : calc( 20 var( --remBase ) );
		font-size : 2.2rem;
	}
	#contacts .files p span{
		font-size : 1.8rem;
	}
}
@media print , screen and ( width > 750px ){
	#contacts{
		display : grid;
		grid-template-columns : calc( 240 * 100% / 920 ) 1fr;
		width : calc( 920 * 100% / 1120 );
		padding-top : calc( 40 var( --remBase ) );
		margin-inline : auto;
	}
	#contacts > dt , #contacts > dd{
		padding-block : calc( 24 var( --remBase ) );
		border-bottom : solid 1px var( --blue );
	}
	#contacts dt label{
		font-size : 1.8rem;
	}
	#contacts dd{
		margin-top : calc( ( 1em - 1lh ) / 2 );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#contacts > dt{
		padding-inline : calc( 12 * 100% / 240 );
	}
	#contacts > dt label.required{
		grid-template-columns : 1fr auto;
	}
	#contacts > dt label.required::after{
		padding-block : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
	}
	#contacts > dt label:not( .required ) span{
		margin-top : calc( 4 var( --remBase ) );
		font-size : 1.2rem;
		line-height : 1.2;
	}
	#contacts > dd{
		padding-inline : calc( 12 * 100% / 680 );
	}
	#contacts dl{
		grid-template-columns : calc( 200 * 100% / 680 ) auto;
		column-gap : calc( 24 * 100% / 680 );
	}
	#contacts :where( input[type="text"] , input[type="email"] , input[type="number"] , input[type="date"] ) textarea{
		font-size : 1.6rem;
		border-radius : calc( 4 var( --remBase ) );
	}
	#contacts :where( input[type="text"] , input[type="email"] , input[type="number"] , input[type="date"] ){
		height : calc( 40 var( --remBase ) );
	}
	#contacts .address li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#contacts .address li{
		column-gap : calc( 16 * 100% / 680 );
	}
	#contacts .address li:has( button ){
		grid-template-columns : calc( 120 * 100% / 680 ) calc( 120 * 100% / 680 ) auto;
	}
	#contacts .address li:not( :has( button ) ){
		grid-template-columns : calc( 120 * 100% / 680 ) 1fr;
	}
	#contacts .address li button{
		padding-block : calc( 4 var( --remBase ) );
	}
	#contacts .files .uploadBox{
		height : calc( 160 var( --remBase ) );
		margin-bottom : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		border-width : calc( 4 var( --remBase ) );
		border-radius : calc( 4 var( --remBase ) );
	}
	#contacts .files .uploadBox span{
		height : calc( 160 var( --remBase ) );
		font-size : 1.6rem;
	}
	#contacts .files p{
		margin-top : calc( 4 var( --remBase ) );
		font-size : 1.4rem;
	}
	#contacts .files p span{
		font-size : 1.2rem;
	}
}
#policies > p{
	letter-spacing : .1em;
}
#policies > p a{
	font-weight : 500;
	-webkit-text-decoration : underline;
	text-decoration : underline;
	text-decoration-color : var( --orange );
}
#policies > label{
	display : block;
	width : fit-content;
	margin-inline : auto;
	border-bottom : solid 1px var( --orange );
}
#policies > label input[type="checkbox"]{
	position : absolute;
	opacity : 0;
}
#policies > label > span{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : center;
	font-weight : 500;
	letter-spacing : .1em;
}
#policies > label > span::before{
	display : block;
	font-size : 0;
	content : "";
	background-color : white;
	border : solid 1px #ccc;
}
#policies > label input[type="checkbox"]:checked + span::after{
	position : absolute;
	top : 50%;
	display : block;
	content : "";
	background : url( "../../images/ui/icon/check.svg" ) center / contain no-repeat;
	filter : var( --filterOrange );
	translate : 0 -50%;
}
@media screen and ( width <= 750px ){
	#policies{
		margin-top : calc( 48 var( --remBase ) );
	}
	#policies > p{
		font-size : 2.4rem;
		line-height : 2;
	}
	#policies > label{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
		margin-top : calc( 36 var( --remBase ) );
	}
	#policies > label > span{
		grid-template-columns : calc( 24 var( --remBase ) ) auto;
		column-gap : calc( 24 var( --remBase ) );
		font-size : 2.4rem;
	}
	#policies > label > span::before{
		height : calc( 24 var( --remBase ) );
	}
	#policies > label input[type="checkbox"] + span::after{
		left : 0;
		width : calc( 24 var( --remBase ) );
		height : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#policies{
		margin-top : calc( 40 var( --remBase ) );
	}
	#policies > p{
		font-size : 2rem;
		line-height : 1.75;
		text-align : center;
		text-indent : .1em;
	}
	#policies > label{
		padding-block : calc( 8 var( --remBase ) );
		padding-inline : calc( 12 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#policies > label > span{
		grid-template-columns : calc( 24 var( --remBase ) ) auto;
		column-gap : calc( 24 var( --remBase ) );
		font-size : 1.6rem;
	}
	#policies > label > span::before{
		height : calc( 24 var( --remBase ) );
	}
	#policies > label input[type="checkbox"] + span::after{
		left : 0;
		width : calc( 24 var( --remBase ) );
		height : calc( 24 var( --remBase ) );
	}
}
#simulator input[type="submit"]{
	display : grid;
	place-items : center;
	width : fit-content;
	padding-inline : 4em;
	margin-inline : auto;
	color : white;
	border-style : solid;
	border-width : 1px;
}
#simulator input[type="submit"][disabled]{
	background-color : #ccc;
	border-color : #ccc;
}
#simulator input[type="submit"]:not( [disabled] ){
	background-color : var( --orange );
	border-color : var( --orange );
}
@media screen and ( width <= 750px ){
	#simulator input[type="submit"]{
		padding-block : calc( 28 var( --remBase ) );
		font-size : 3.2rem;
	}
}
@media print , screen and ( width > 750px ){
	#simulator input[type="submit"]{
		padding-block : calc( 20 var( --remBase ) );
		font-size : 2.4rem;
	}
}
@media ( hover : hover ){
	#simulator input[type="submit"]:not( [disabled] ):hover{
		color : var( --orange );
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#simulator input[type="submit"]{
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
}