@charset "UTF-8";

/* --------------------------------------------
CONTACT
--------------------------------------------- */
section.contact{
	dl{
		label{
			line-height : 2;
		}
		:where( input[type="text"] , input[type="email"] , textarea ){
			width : 100%;
			padding-inline : 1em;
			background-color : #d9d9d9;
		}
		:where( input[type="text"] , input[type="email"] ){
			height : calc( 55 * var( --remBase ) );
		}
		textarea{
			padding-block : .5em;
		}
	}
	.next{
		display : grid;
		place-items : center;
		margin-inline : auto;
		font-size : var( --font-honmon );
		line-height : 2;
		color : white;
		background-color : black;
	}
	@media screen and ( width <= 768px ){
		dl{
			margin-top : calc( 8 * var( --remBase ) );
			label{
				font-size : calc( 14 * var( --remBase ) );
			}
			dd{
				margin-top : calc( 8 * var( --remBase ) );
			}
			:where( input[type="text"] , input[type="email"] , textarea ){
				font-size : calc( 14 * var( --remBase ) );
			}
			:where( input[type="text"] , input[type="email"] ){
				height : calc( 55 * var( --remBase ) );
			}
			textarea{
				height : calc( 200 * var( --remBase ) );
			}
		}
		.buttons{
			margin-top : calc( 16 * var( --remBase ) );
		}
		.next{
			width : calc( 160 * var( --percentBase ) );
			height : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		dl{
			display : grid;
			grid-template-columns : calc( 160 * 100% / 656 ) 1fr;
			row-gap : calc( 40 * var( --remBase ) );
			column-gap : calc( 76 * 100% / 656 );
			align-items : center;
			width : calc( 656 * var( --percentBase ) );
			margin-inline : auto;
			margin-top : calc( 32 * var( --remBase ) );
			label{
				font-size : var( --font-honmon );
			}
			:where( input[type="text"] , input[type="email"] , textarea ){
				font-size : var( --font-honmon );
			}
			textarea{
				height : calc( 160 * var( --remBase ) );
			}
		}
		.buttons{
			margin-top : calc( 40 * var( --remBase ) );
		}
		.next{
			width : calc( 160 * var( --percentBase ) );
			height : calc( 32 * var( --remBase ) );
		}
	}
}
section.confirm{
	dl{
		dt{
			line-height : 2;
		}
		dd{
			line-height : 2;
		}
	}
	.wpcf7-spinner{
		display : none;
	}
	:is( .prev , .submit ){
		display : grid;
		place-items : center;
		font-size : var( --font-honmon );
		line-height : 2;
		color : black;
	}
	.prev{
		color : black;
		background-color : white;
		outline : solid 1px black;
		outline-offset : -1px;
	}
	.submit{
		color : white;
		background-color : black;
	}
	@media screen and ( width <= 768px ){
		dl{
			margin-top : calc( 8 * var( --remBase ) );
			dt{
				font-size : calc( 14 * var( --remBase ) );
			}
			dd{
				margin-top : calc( 8 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
			}
		}
		.buttons{
			margin-top : calc( 16 * var( --remBase ) );
		}
		:is( .prev , .submit ){
			width : calc( 160 * var( --percentBase ) );
			height : calc( 32 * var( --remBase ) );
			margin-inline : auto;
		}
		.submit{
			margin-top : calc( 40 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		dl{
			display : grid;
			grid-template-columns : calc( 160 * 100% / 656 ) 1fr;
			row-gap : calc( 40 * var( --remBase ) );
			column-gap : calc( 76 * 100% / 656 );
			align-items : center;
			width : calc( 656 * var( --percentBase ) );
			margin-inline : auto;
			margin-top : calc( 32 * var( --remBase ) );
			dt{
				font-size : var( --font-honmon );
			}
			dd{
				font-size : var( --font-honmon );
			}
		}
		.buttons{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 160 * var( --percentBase ) ) );
			column-gap : calc( 40 * var( --percentBase ) );
			align-items : center;
			justify-content : center;
			margin-top : calc( 40 * var( --remBase ) );
		}
		:is( .prev , .submit ){
			height : calc( 32 * var( --remBase ) );
		}
	}
}