@charset "UTF-8";

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