@charset "UTF-8";

/* --------------------------------------------
APPLY
--------------------------------------------- */
#stepForm{
	.step{
		text-align : center;
		img{
			height : calc( 62 * var( --remBase ) );
		}
	}
	.hgroup{
		padding-block : calc( 30 * var( --remBase ) );
		margin-top : calc( 20 * var( --remBase ) );
		background-color : var( --pink02 );
		border-radius : calc( 20 * var( --remBase ) );
		h2{
			font-weight : 700;
			line-height : 1.4;
			text-align : center;
		}
		&:not( :has( img ) ){
			h2{
				border-bottom : dashed 1px var( --pink03 );
			}
		}
		&:has( img ){
			p{
				img{
					vertical-align : baseline;
				}
			}
		}
		p{
			font-weight : 700;
			line-height : 1.4;
			text-align : center;
			img{
				height : calc( 12 * var( --remBase ) );
			}
		}
	}
	dt{
		label{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : start;
			font-size : calc( 18 * var( --remBase ) );
			font-weight : 700;
			&::before{
				display : block;
				width : auto;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-position : 0 0;
				background-size : contain;
			}
			span{
				font-size : calc( 14 * var( --remBase ) );
			}
		}
	}
	.apply_year , .apply_prefecture{
		&::before{
			height : calc( 19.29 * var( --remBase ) );
			aspect-ratio : 16/19.29;
			background-image : url( "../images/ui/controls/mappin.svg" );
		}
	}
	.apply_salary{
		&::before{
			height : calc( 19.08 * var( --remBase ) );
			aspect-ratio : 16.01/19.08;
			background-image : url( "../images/ui/controls/money.svg" );
		}
	}
	.apply_company{
		&::before{
			height : calc( 18.27 * var( --remBase ) );
			aspect-ratio : 16.25/18.27;
			background-image : url( "../images/ui/controls/company.svg" );
		}
	}
	.apply_name{
		&::before{
			height : calc( 18.79 * var( --remBase ) );
			aspect-ratio : 11.71/18.79;
			background-image : url( "../images/ui/controls/person.svg" );
		}
	}
	.apply_tel{
		&::before{
			height : calc( 19 * var( --remBase ) );
			aspect-ratio : 13/19;
			background-image : url( "../images/ui/controls/mobile.svg" );
		}
	}
	.apply_email{
		&::before{
			height : calc( 15 * var( --remBase ) );
			aspect-ratio : 20/15;
			background-image : url( "../images/ui/controls/email.svg" );
		}
	}
	:where( select , input[type="text"] , input[type="tel"] , input[type="email"] ){
		width : 100%;
		height : calc( 56 * var( --remBase ) );
		font-size : calc( 16 * var( --remBase ) );
		font-weight : 700;
		border-radius : calc( 15 * var( --remBase ) );
		outline : solid calc( 3 * var( --remBase ) ) var( --base );
		outline-offset : calc( -3 * var( --remBase ) );
		&::placeholder{
			color : #a8a8a8;
		}
	}
	select{
		background-image : url( "../images/ui/controls/parts_select.svg" );
		background-repeat : no-repeat;
		background-position : right calc( 18 * var( --remBase ) ) top 50%;
		background-size : auto calc( 10 * var( --remBase ) );
		appearance : none;
	}
	dd{
		margin-top : calc( 5 * var( --remBase ) );
		+ dt{
			margin-top : calc( 15 * var( --remBase ) );
		}
	}
	.buttons{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		&:not( :has( .back ) ){
			justify-content : end;
		}
		&:has( .back ){
			justify-content : space-between;
		}
	}
	.next , .back{
		display : grid;
		align-items : center;
	}
	.next{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 55 * var( --remBase ) );
		align-items : center;
		justify-content : space-between;
		height : calc( 48 * var( --remBase ) );
		padding-left : calc( 20 * var( --remBase ) );
		padding-right : calc( 18 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
		font-weight : 700;
		color : white;
		border-radius : 100vmax;
		&::after{
			display : block;
			width : auto;
			height : calc( 13 * var( --remBase ) );
			aspect-ratio : 8/13;
			font-size : 0;
			content : "";
			background : url( "../images/ui/arrow/right03.svg" ) left top / contain no-repeat;
			filter : var( --filterWhite );
		}
		&:disabled{
			background-color : #a8a8a8;
		}
		&:not( :disabled ){
			background-color : var( --pink03 );
		}
	}
	.back{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 20 * var( --remBase ) );
		align-items : center;
		justify-content : start;
		font-weight : 700;
		line-height : 1.6;
		color : #7d7d7d;
		&::before{
			display : block;
			width : auto;
			height : calc( 19 * var( --remBase ) );
			aspect-ratio : 10.86/19;
			font-size : 0;
			content : "";
			background : url( "../images/ui/arrow/left03.svg" ) left top / contain no-repeat;
			filter : invert( 43% ) sepia( 100% ) saturate( 0% ) hue-rotate( 184deg ) brightness( 94% ) contrast( 98% );
		}
	}
	button[type="submit"]{
		display : grid;
		grid-template-rows : auto auto;
		align-content : center;
		align-items : center;
		justify-content : space-between;
		background-color : var( --pink );
		border-radius : 100vmax;
		span{
			grid-column : 1;
			font-weight : 700;
			color : white;
			text-align : left;
			&:nth-of-type( 1 ){
				grid-row : 2;
			}
			&:nth-of-type( 2 ){
				grid-row : 1;
			}
		}
		&::after{
			display : block;
			grid-row : 1/-1;
			grid-column : 2;
			align-self : center;
			width : auto;
			height : calc( 13 * var( --remBase ) );
			aspect-ratio : 8/13;
			font-size : 0;
			content : "";
			background : url( "../images/ui/arrow/right03.svg" ) left top / contain no-repeat;
			filter : var( --filterWhite );
		}
		&:disabled{
			background-color : #a8a8a8;
		}
		&:not( :disabled ){
			background-color : var( --pink );
		}
	}
	.wpcf7-spinner{
		display : none;
	}
	@media screen and ( width <= 750px ){
		.hgroup{
			padding-inline : calc( 30 * 100% / 295 );
			&:not( :has( img ) ){
				h2{
					padding-bottom : calc( 10 * var( --remBase ) );
					font-size : calc( 16 * var( --remBase ) );
				}
				p{
					margin-top : calc( 10 * var( --remBase ) );
				}
			}
			&:has( img ){
				h2{
					font-size : calc( 18 * var( --remBase ) );
				}
			}
			p{
				font-size : calc( 12 * var( --remBase ) );
			}
		}
		dl{
			margin-top : calc( 30 * var( --remBase ) );
		}
		dt label{
			column-gap : calc( 10 * 100% / 295 );
		}
		:where( select , input[type="text"] , input[type="tel"] , input[type="email"] ){
			padding-inline : calc( 30 * 100% / 295 );
		}
		.buttons{
			margin-top : calc( 30 * var( --remBase ) );
		}
		.back{
			font-size : calc( 18 * var( --remBase ) );
		}
		button[type="submit"]{
			row-gap : calc( 4.2 * var( --remBase ) );
			column-gap : calc( 8 * var( --remBase ) );
			height : calc( 58 * var( --remBase ) );
			padding-left : calc( 20 * var( --remBase ) );
			padding-right : calc( 15 * var( --remBase ) );
			span{
				&:nth-of-type( 1 ){
					font-size : calc( 10 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 14 * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		.hgroup{
			padding-inline : calc( 30 * 100% / 550 );
			h2{
				font-size : calc( 18 * var( --remBase ) );
			}
			&:not( :has( img ) ){
				h2{
					padding-bottom : calc( 20 * var( --remBase ) );
				}
				p{
					margin-top : calc( 10 * var( --remBase ) );
				}
			}
			p{
				font-size : calc( 14 * var( --remBase ) );
			}
		}
		dl{
			padding-inline : calc( 117.5 * 100% / 550 );
			margin-top : calc( 40 * var( --remBase ) );
		}
		dt label{
			column-gap : calc( 10 * 100% / 315 );
		}
		:where( select , input[type="text"] , input[type="tel"] , input[type="email"] ){
			padding-inline : calc( 30 * 100% / 315 );
		}
		.buttons{
			margin-top : calc( 40 * var( --remBase ) );
		}
		.back{
			font-size : calc( 20 * var( --remBase ) );
		}
		button[type="submit"]{
			row-gap : calc( 4.8 * var( --remBase ) );
			column-gap : calc( 32 * var( --remBase ) );
			height : calc( 62 * var( --remBase ) );
			padding-left : calc( 30 * var( --remBase ) );
			padding-right : calc( 25 * var( --remBase ) );
			span{
				&:nth-of-type( 1 ){
					font-size : calc( 10 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 16 * var( --remBase ) );
				}
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#stepForm{
		.next , .submit{
			transition : background-color var( --transitionBase );
		}
	}
}
#timeline{
	display : block;
	outline : solid 1px #e0e0e0;
	outline-offset : -1px;
	thead , tbody{
		display : block;
	}
	tr{
		display : grid;
		grid-auto-rows : calc( 50 * var( --remBase ) );
		grid-auto-flow : column;
	}
	th , td{
		display : grid;
		align-content : center;
		align-items : center;
		justify-content : center;
		border-top : solid 1px #e0e0e0;
		border-right : solid 1px #e0e0e0;
	}
	thead{
		th{
			font-size : calc( 16 * var( --remBase ) );
			font-weight : 700;
			line-height : 1.4;
		}
	}
	.saturday{
		color : #1a62d6;
	}
	.holiday , .sunday{
		color : #e26767;
	}
	tbody{
		th{
			span{
				line-height : 1.4;
				&:nth-of-type( 1 ){
					font-size : calc( 16 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 12 * var( --remBase ) );
				}
			}
		}
		td{
			font-size : calc( 16 * var( --remBase ) );
			font-weight : 700;
		}
	}
	.is-able{
		background-color : white;
		&:has( input:checked ){
			outline : solid calc( 2 * var( --remBase ) ) var( --pink );
			outline-offset : calc( -2 * var( --remBase ) );
		}
	}
	.is-disable{
		background-color : #f1f1f1;
	}
	label{
		position : relative;
		display : grid;
		align-items : center;
		justify-content : center;
		width : 100%;
		height : 100%;
		cursor : pointer;
		input[type="radio"]{
			position : absolute;
			width : 100%;
			height : 100%;
			opacity : 0;
		}
		span{
			color : var( --pink03 );
		}
	}
	@media screen and ( width <= 750px ){
		tr{
			grid-auto-columns : calc( 50 * 100% / 295 );
		}
	}
	@media print , screen and ( width > 750px ){
		tr{
			grid-auto-columns : calc( 50 * 100% / 550 );
		}
	}
}

/* --------------------------------------------
INQUIRY
--------------------------------------------- */
#inquiry{
	dl{
		> div{
			border-bottom : solid 1px #e2e2e2;
			&:has( [aria-required="true"] ) dt{
				&::after{
					display : grid;
					place-items : center;
					height : calc( 34 * var( --remBase ) );
					font-weight : 700;
					line-height : 1.5;
					color : white;
					text-align : center;
					text-indent : .06em;
					letter-spacing : .06em;
					content : "必須";
					background-color : var( --red );
					border-radius : calc( 3 * var( --remBase ) );
				}
			}
		}
	}
	dt{
		display : grid;
		align-items : center;
		justify-content : space-between;
		label{
			padding-left : calc( 16 * var( --remBase ) );
			font-weight : 700;
			line-height : 1.8;
			border-left : solid calc( 4 * var( --remBase ) ) currentColor;
		}
	}
	:where( input[type="text"] , input[type="email"] , input[type="tel"] , input[type="url"] , select , textarea ){
		border-radius : calc( 3 * var( --remBase ) );
	}
	:where( input[type="text"] , input[type="email"] , input[type="tel"] , input[type="url"] , textarea ){
		background-color : #eee;
		outline : solid 1px #c6cbcc;
		outline-offset : -1px;
		&::placeholder{
			color : #b1b2b2;
		}
	}
	:where( input[type="text"] , input[type="email"] , input[type="tel"] , input[type="url"] , select ){
		height : calc( 50 * var( --remBase ) );
	}
	select{
		background-color : white;
		background-image : url( "../images/ui/parts/triangle_bottom01.svg" );
		background-repeat : no-repeat;
		background-position : right calc( 20 * var( --remBase ) ) top 50%;
		background-size : auto calc( 10 * var( --remBase ) );
		outline : solid 1px #c6cbcc;
		outline-offset : -1px;
		-webkit-appearance : none;
		appearance : none;
	}
	textarea{
		height : calc( 200 * var( --remBase ) );
		padding-block : calc( 20 * var( --remBase ) );
	}
	.wpcf7-not-valid-tip{
		padding-block : calc( 10 * var( --remBase ) );
		margin-top : calc( 20 * var( --remBase ) );
		font-weight : 700;
		line-height : 1.8;
		color : var( --red );
		letter-spacing : .06em;
		background-color : var( --pink02 );
		&::before{
			white-space : pre;
			content : "▲ ";
		}
	}
	.privacies{
		margin-top : calc( 40 * var( --remBase ) );
		.wpcf7-list-item{
			display : block;
		}
		label{
			display : grid;
			grid-template-columns : auto auto;
			align-items : center;
			justify-content : center;
		}
		input[type="checkbox"]{
			appearance : none;
			position : relative;
			height : calc( 30 * var( --remBase ) );
			&::before , &::after{
				display : block;
				width : auto;
				aspect-ratio : 1;
				content : "";
				border-radius : 50%;
			}
			&::before{
				height : 100%;
				background-color : #eee;
				outline : solid 1px #c6cbcc;
				outline-offset : -1px;
			}
			&::after{
				position : absolute;
				top : 50%;
				left : 50%;
				height : calc( 16 * var( --remBase ) );
				background-color : var( --pink );
				translate : -50% -50%;
			}
			&:not( :checked )::after{
				opacity : 0;
			}
			&:checked::after{
				opacity : 1;
			}
		}
		label{
			span{
				font-weight : 500;
				line-height : 1.6;
			}
		}
	}
	button[type="submit"]{
		margin-inline : auto;
		margin-top : calc( 40 * var( --remBase ) );
		&::after{
			height : calc( 13 * var( --remBase ) );
		}
	}
	@media screen and ( width <= 750px ){
		dl{
			> div{
				padding-block : calc( 20 * var( --remBase ) );
			}
		}
		dt{
			grid-template-columns : 1fr calc( 60 * 100% / 295 );
			&::after{
				font-size : calc( 12 * var( --remBase ) );
			}
			label{
				padding-block : calc( 4.4 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
			}
		}
		dd{
			margin-top : calc( 20 * var( --remBase ) );
		}
		:where( input[type="text"] , input[type="email"] , input[type="tel"] , input[type="url"] , select , textarea ){
			padding-inline : calc( 19 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : 2.5;
		}
		:where( #inquiry_name , #inquiry_company ){
			width : calc( 260 * 100% / 295 );
		}
		:where( #inquiry_division ){
			width : calc( 240 * 100% / 295 );
		}
		:where( #inquiry_email , #inquiry_tel , #inquiry_url , select , textarea ){
			width : 100%;
		}
		textarea{
			width : 100%;
		}
		.wpcf7-not-valid-tip{
			padding-inline : calc( 20 * 100% / 295 );
			font-size : calc( 14 * var( --remBase ) );
		}
		.privacies{
			label{
				column-gap : calc( 20 * 100% / 295 );
			}
			label span{
				font-size : calc( 14 * var( --remBase ) );
			}
		}
		button[type="submit"]{
			width : calc( 280 * 100% / 295 );
			height : calc( 46 * var( --remBase ) );
			padding-left : calc( 20 * 100% / 295 );
			padding-right : calc( 18 * 100% / 295 );
			font-size : calc( 16 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		dl{
			> div{
				display : grid;
				grid-template-columns : calc( 320 * 100% / 980 ) 1fr;
				column-gap : calc( 50 * 100% / 980 );
				align-items : center;
				padding-block : calc( 20 * var( --remBase ) );
			}
		}
		dt{
			grid-template-columns : 1fr calc( 60 * 100% / 320 );
			&::after{
				font-size : calc( 14 * var( --remBase ) );
			}
			label{
				padding-block : calc( 2.6 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
			}
		}
		:where( input[type="text"] , input[type="email"] , input[type="tel"] , input[type="url"] , select , textarea ){
			padding-inline : calc( 19 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 35 / 16 );
		}
		:where( #inquiry_name , #inquiry_company ){
			width : calc( 260 * 100% / 610 );
		}
		:where( #inquiry_division ){
			width : calc( 240 * 100% / 610 );
		}
		select{
			width : calc( 308 * 100% / 610 );
		}
		textarea{
			width : 100%;
		}
		.wpcf7-not-valid-tip{
			padding-inline : calc( 20 * 100% / 610 );
			font-size : calc( 16 * var( --remBase ) );
		}
		.privacies{
			label{
				column-gap : calc( 20 * 100% / 980 );
			}
			label span{
				font-size : calc( 16 * var( --remBase ) );
			}
		}
		button[type="submit"]{
			width : calc( 300 * 100% / 980 );
			height : calc( 50 * var( --remBase ) );
			padding-left : calc( 20 * 100% / 980 );
			padding-right : calc( 18 * 100% / 980 );
			font-size : calc( 18 * var( --remBase ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#inquiry .privacies input[type="checkbox"]::after{
		transition : opacity var( --transitionBase );
	}
}