@charset "UTF-8";

/* --------------------------------------------
ENTRIES
--------------------------------------------- */
#entries{
	background-color : var( --cyan03 );
	.title02{
		&::before{
			background-image : url( "../../images/ui/label/contact_black.svg" );
		}
	}
	.lede{
		font-family : "Zen Kaku Gothic New" , sans-serif;
		font-size : calc( 18 * var( --remBase ) );
		line-height : 1.5;
		text-align : center;
		span{
			font-weight : 700;
			color : var( --blue );
		}
		&::after{
			display : block;
			width : auto;
			height : calc( 12 * var( --remBase ) );
			aspect-ratio : 56/12;
			margin-inline : auto;
			content : "";
			background : url( "../../images/ui/parts/dots01.svg" ) left top / contain no-repeat;
		}
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 40 * var( --remBase ) );
		.title02{
			&::before{
				height : calc( 13.98 * var( --remBase ) );
				margin-bottom : calc( 20 * var( --remBase ) );
			}
		}
		.lede{
			margin-top : calc( 19 * var( --remBase ) );
			&::after{
				margin-top : calc( 20 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		width : min( 750px , calc( 750 * var( --viewportBase ) ) );
		padding-block : calc( 80 * var( --remBase ) );
		margin-inline : auto;
		.title02{
			&::before{
				height : calc( 18.41 * var( --remBase ) );
				margin-bottom : calc( 23.77 * var( --remBase ) );
			}
		}
		.lede{
			margin-top : calc( 10 * var( --remBase ) );
			&::after{
				margin-top : calc( 18 * var( --remBase ) );
			}
		}
	}
}
#entries .splide{
	p{
		text-align : center;
	}
	dt{
		label{
			position : relative;
			display : block;
			width : 100%;
			padding-left : calc( 27 * 100% / 315 );
			font-size : calc( 16 * var( --remBase ) );
			&::before{
				position : absolute;
				top : 50%;
				display : block;
				font-size : 0;
				content : "";
				filter : var( --filterCyan01 );
				background-repeat : no-repeat;
				background-position : 0 0;
				background-size : contain;
				translate : 0 -50%;
			}
		}
	}
	dd{
		margin-top : calc( 5 * var( --remBase ) );
		+ dt{
			margin-top : calc( 15 * var( --remBase ) );
		}
	}
	:is( input[type="text"] , input[type="email"] , input[type="tel"] , select ){
		width : 100%;
		height : calc( 56 * var( --remBase ) );
		padding-inline : calc( 20 * 100% / 315 );
		font-size : calc( 16 * var( --remBase ) );
		line-height : 1.6;
		background-color : white;
		border-radius : calc( 5 * var( --remBase ) );
		outline : solid calc( 2 * var( --remBase ) ) var( --blue );
		outline-style : solid;
		outline-color : var( --blue );
		outline-offset : calc( -2 * var( --remBase ) );
		&::placeholder{
			color : #a8a8a8;
		}
	}
	select{
		background : url( "../../images/parts/entries2.svg" ) right calc( 20 var( --remBase ) ) top 50% / auto calc( 10 var( --remBase ) ) no-repeat;
	}
	.buttons{
		display : grid;
		align-items : center;
		justify-content : space-between;
		margin-top : calc( 15 * var( --remBase ) );
		&:has( .next ){
			grid-template-columns : auto calc( 178 * 100% / 315 );
		}
		&:has( button[type="submit"] ){
			grid-template-columns : auto calc( 226 * 100% / 315 );
		}
	}
	.next{
		position : relative;
		grid-row : 1;
		grid-column : 2;
		height : calc( 49 * var( --remBase ) );
		padding-inline : calc( 20 * 100% / 178 );
		font-size : calc( 18 * var( --remBase ) );
		text-align : left;
		border-radius : 100vmax;
		&::after{
			position : absolute;
			top : 50%;
			right : calc( 18 * 100% / 175 );
			display : block;
			width : auto;
			height : calc( 13 * var( --remBase ) );
			aspect-ratio : 8/13;
			font-size : 0;
			content : "";
			background : url( "../../images/parts/entries/next.svg" ) right center / contain no-repeat;
			translate : 0 -50%;
		}
		&[disabled]{
			color : var( --base );
			background-color : #f1f1f1;
			box-shadow : 0 calc( 3 * var( --remBase ) ) 0 color-mix( in srgb , #f1f1f1 90% , black );
			&::after{
				filter : var( --filterBase );
			}
		}
		&:not( [disabled] ){
			color : white;
			background-color : var( --pink );
			box-shadow : 0 calc( 3 * var( --remBase ) ) 0 #ba4545;
			&::after{
				filter : var( --filterWhite );
			}
		}
	}
	@media screen and ( width <= 750px ){
		.splide__slide{
			margin-top : calc( 30 * var( --remBase ) );
		}
		p{
			img{
				height : calc( 56 * var( --remBase ) );
			}
		}
		dl{
			margin-top : calc( 30 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		margin-inline : auto;
		margin-top : calc( 30 * var( --remBase ) );
		.splide__slide{
			padding-inline : calc( 217.5 * 100% / 750 );
		}
		p{
			img{
				height : calc( 56 * var( --remBase ) );
			}
		}
		dl{
			margin-top : calc( 30 * var( --remBase ) );
		}
	}
}
.fieldset01{
	.wpcf7-form-control-wrap[data-name="contact_name"]:has( .is-customInvalid ){
		&::after{
			display : block;
			font-size : calc( 16 * var( --remBase ) );
			font-weight : 400;
			line-height : 1.2;
			color : #dc3232;
			content : "全角日本語で入力してください。";
		}
	}
	label.contact_name::before{
		left : calc( 4 * 100% / 315 );
		height : calc( 18.79 * var( --remBase ) );
		aspect-ratio : 11.71/18.79;
		background-image : url( "../../images/parts/entries/name.svg" );
	}
	label.contact_year::before{
		left : 0;
		height : calc( 18.18 * var( --remBase ) );
		aspect-ratio : 20/18.18;
		background-image : url( "../../images/parts/entries/year.svg" );
	}
	label.contact_experience::before{
		left : 0;
		height : calc( 19 * var( --remBase ) );
		aspect-ratio : 22/19;
		background-image : url( "../../images/parts/entries/experience.svg" );
	}
	label.contact_company::before{
		left : 0;
		height : calc( 19 * var( --remBase ) );
		aspect-ratio : 11/10;
		background-image : url( "../../images/parts/entries/company.svg" );
	}
}