@charset "UTF-8";

/* --------------------------------------------
CONFIRM
--------------------------------------------- */
#confirm{
	.title01::before{
		background-image : url( "../../images/lp/contact/en.svg" );
	}
	dt{
		font-weight : 400;
	}
	button[type="submit"]{
		position : relative;
		z-index : 1;
		display : grid;
		place-items : center;
		margin-inline : auto;
		overflow : hidden;
		font-weight : 500;
		color : white;
		border-radius : 100vmax;
		outline-width : 1px;
		outline-style : solid;
		outline-color : transparent;
		outline-offset : -1px;
		&::before{
			position : absolute;
			inset : 0;
			z-index : -1;
			display : block;
			font-size : 0;
			content : "";
			background-image : linear-gradient( to right , #00b1ac , #7dd261 );
		}
	}
	.wpcf7-previous{
		position : relative;
		z-index : 1;
		display : grid;
		place-items : center;
		margin-inline : auto;
		overflow : hidden;
		font-weight : 500;
		color : #868686;
		background-color : white;
		border-radius : 100vmax;
		outline-width : 1px;
		outline-style : solid;
		outline-color : #868686;
		outline-offset : -1px;
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 100 var( --remBase ) );
		padding-bottom : calc( 108 var( --remBase ) );
		.title01::before{
			height : calc( 29 var( --remBase ) );
		}
		dl{
			margin-top : calc( ( 56 - 5.25 - 5.25 ) var( --remBase ) );
		}
		dt , dd{
			font-size : 1.6rem;
			line-height : calc( 26.5 / 16 );
		}
		dd{
			padding-bottom : calc( ( 26 - 5.25 ) var( --remBase ) );
			padding-left : 1em;
			margin-top : calc( ( 26 - 5.25 ) var( --remBase ) );
			border-bottom : solid 1px #868686;
			+ dt{
				margin-top : calc( ( 36 - 5.25 ) var( --remBase ) );
			}
		}
		.buttons{
			margin-top : calc( ( 54 - 5.25 ) var( --remBase ) );
		}
		:where( .wpcf7-previous , button[type="submit"] ){
			height : calc( 80 var( --remBase ) );
			font-size : 1.6rem;
			line-height : 1.75;
		}
		.wpcf7-previous{
			width : calc( 210 var( --percentBase ) );
			height : calc( 64 var( --remBase ) );
		}
		button[type="submit"]{
			width : calc( 294 var( --percentBase ) );
			margin-top : calc( 40 var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 150 var( --remBase ) );
		padding-bottom : calc( 200 var( --remBase ) );
		.title01::before{
			height : calc( 52 var( --remBase ) );
		}
		dl{
			display : grid;
			grid-template-columns : calc( 276 * 100% / 776 ) 1fr;
			row-gap : calc( 24 var( --remBase ) );
			align-items : start;
			width : calc( 776 var( --percentBase ) );
			margin-inline : auto;
			margin-top : calc( ( 78 - 9.75 ) var( --remBase ) );
		}
		dt , dd{
			font-size : 1.8rem;
			line-height : calc( 26.5 / 18 );
		}
		.buttons{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 410 var( --percentBase ) ) );
			column-gap : calc( 40 var( --percentBase ) );
			align-items : center;
			justify-content : center;
			margin-top : calc( ( 68 - 4.25 ) var( --remBase ) );
		}
		:where( .wpcf7-previous , button[type="submit"] ){
			width : 100%;
			height : calc( 80 var( --remBase ) );
			font-size : 1.8rem;
			line-height : 1.75;
		}
	}
}
@media ( hover : hover ){
	.wpcf7-previous:hover{
		opacity : .5;
	}
	#confirm button[type="submit"]:hover{
		color : #64aeaa;
		outline-color : #64aeaa;
		&::before{
			opacity : 0;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.wpcf7-previous{
		transition : opacity var( --transitionBase );
	}
	#confirm button[type="submit"]{
		transition : color var( --transitionBase ) , outline-color var( --transitionBase );
		&::before{
			transition : opacity var( --transitionBase );
		}
	}
}
#thanks{
	.title01::before{
		background-image : url( "../../images/lp/contact/en.svg" );
	}
	p{
		font-weight : 400;
		a{
			color : #233e87;
			-webkit-text-decoration : underline;
			text-decoration : underline;
		}
	}
	@media screen and ( width <= 750px ){
		min-height : calc( 100dvh - var( --headerHeight ) - calc( 70 var( --remBase ) ) );
		padding-top : calc( 100 var( --remBase ) );
		padding-bottom : calc( 108 var( --remBase ) );
		.title01::before{
			height : calc( 29 var( --remBase ) );
		}
		p{
			margin-top : calc( ( 56 - 5.25 - 5.25 ) var( --remBase ) );
			font-size : 1.6rem;
			line-height : calc( 26.5 / 16 );
		}
	}
	@media print , screen and ( width > 750px ){
		min-height : calc( 100dvh - var( --headerHeight ) - calc( 40 var( --remBase ) ) );
		padding-top : calc( 150 var( --remBase ) );
		padding-bottom : calc( 200 var( --remBase ) );
		.title01::before{
			height : calc( 52 var( --remBase ) );
		}
		p{
			width : calc( 776 var( --percentBase ) );
			margin-inline : auto;
			margin-top : calc( ( 78 - 9.75 ) var( --remBase ) );
			font-size : 1.8rem;
			line-height : calc( 26.5 / 18 );
		}
	}
}