/* CSS Document */

#recruit{
	display: grid;
	grid-row-gap: clamp(32px, calc(72 / 1200 * 100vw), 72px);
	& header {
		padding-bottom: 0; 
	}
	&>div:last-of-type{
		margin-bottom: calc(clamp(32px, calc(72 / 1200 * 100vw), 72px) * 2);
	}
	& nav{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		grid-row-gap: clamp(24px, calc(40 / 1200 * 100vw), 40px);
		margin-top: -24px;
		padding-bottom: clamp(32px, calc(72 / 1200 * 100vw), 72px); 
		&>*{
			grid-column: 2;
		}
		& ul{
			display: grid;
			grid-gap: 24px;
			@media (min-width: 576px) and (max-width: 991.98px) {
				grid-template-columns: repeat(2, auto);
			}
			@media (min-width: 992px) {
				grid-template-columns: repeat(4, auto);
			}
		}
		a{
			display: grid;
			grid-template-columns: 1fr 24px;
			align-items: center;
			grid-gap: 8px;
			min-height: 56px;
			padding: 8px 16px 8px 24px;
			background: rgba(var(--color-rgb), .9);
			border: none;
			color: #fff;
			font-family: inherit;
			font-size:  inherit;
			font-weight: 500;
			text-decoration: none;
			text-align: center;
			line-height: 1.5;
			border-radius: 50px;
			&:before{
			content: "";
			order: 1;
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.582 13.891c-0.272 0.268-0.709 0.268-0.979 0s-0.271-0.701 0-0.969l7.908-7.83c0.27-0.268 0.707-0.268 0.979 0l7.908 7.83c0.27 0.268 0.27 0.701 0 0.969s-0.709 0.268-0.978 0l-7.42-7.141-7.418 7.141z" /></svg>') center no-repeat;
			-webkit-mask-size: contain;
			transform: rotate(180deg);
			}
			&:hover{
			background: var(--color-hover);
			color: #fff;
			}
		}
	}
	& section{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		grid-row-gap: clamp(32px, calc(72 / 1200 * 100vw), 72px);
		margin-bottom: clamp(32px, calc(72 / 1200 * 100vw), 72px);
		&>*{
			grid-column: 2;
		}
		&>div{
			display: grid;
			grid-row-gap: clamp(24px, calc(32 / 1200 * 100vw), 32px);
			& h4{
				position: relative;
				margin-top: -16px;
				&.toggleMenu:before,
				&.toggleMenu:after{
					content: "";
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 24px;
					width: 24px;
					height: 2px;
					background-color: var(--color-theme);
					transition: .2s
				}
				&.toggleMenu:before{
					transform: translateY(-50%) rotate(90deg);
					top: 50%;
				}
				&.toggleMenu.open:before{
					transform: rotate(180deg);
				}
				&.toggleMenu.open:after{
					opacity: 0;
				}
				@media (min-width: 576px){
					&.toggleMenu:before,
					&.toggleMenu:after{
						width: 32px;
					}
				}
			}
			& h4+div{
				display: grid;
				grid-row-gap: clamp(24px, calc(32 / 1200 * 100vw), 32px);
				&>div{
					display: grid;
					grid-row-gap: 16px;
					padding: 0 clamp(16px, calc(24 / 1200 * 100vw), 24px);
				}
				@media (min-width: 576px) {
					&:has(div+div){
						grid-template-columns: 1fr 1fr;
						align-items: start;
						.title{
							grid-column: 1 / 3;
						}
					}
				}
			}
		}
		&>div:last-child{
			grid-template-columns: 1fr;
			justify-items: center;
			.button{
				width: min(100%, 340px);
				grid-row-gap: 0;
				&:before{
					grid-column: 2;
					grid-row: 1 / 3;
				}
				& span{
					margin-bottom: -4px;
					font-size: 14px;
				}
			}
			@media (min-width: 576px) {
				text-align: center;
			}
		}
		.title{
			padding: clamp(12px, calc(16 / 1200 * 100vw), 16px) 48px clamp(12px, calc(16 / 1200 * 100vw), 16px) clamp(16px, calc(24 / 1200 * 100vw), 24px);
			background: var(--color-bg);
			border-bottom-left-radius: 20px;
			border-top-right-radius: 20px;
		}
	}
}




@media (max-width: 575.98px) {
}
@media (min-width: 576px) {
}
@media (min-width: 576px) and (max-width: 991.98px) {
}
@media (min-width: 992px) {
}