@charset "UTF-8";


main {
	padding-top: 0px;
	& > h1 {
		text-align: left;
		width: 100%;
/* 		height: 400px; */
		aspect-ratio: 10 / 4;
		min-height: 400px;
		max-height: 500px;
		margin: 0 auto;
		padding-top: 100px;
		/* background: url(../jobs_img/jobs_mv.webp) no-repeat; */
		background: url(/top_img/mv_back_pc.webp) no-repeat, url(../jobs_img/jobs_mv.webp) no-repeat, var(--color-sub4);
		background-size: 100% 100%,min(80%,1000px);
		background-position: center top,bottom center;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-direction: column;
		flex-wrap: wrap;
		color: var(--color-base);


		& .tit {
			display: block;
			width: 60%;
			max-width: 800px;
			height: 2em;
			line-height: 1em;
			font-size: 4.0rem;
			font-family: var(--font-go);
			font-weight: bold;
			
		}
		& .subtitle {
			display: block;
			width: 60%;
			max-width: 800px;
			height: 2em;
			line-height: 2em;
			font-size: var(--font-sizeL);
			font-family: var(--font-go);
			font-weight: normal;

		}

	}

	& section.joblist {
		width: 80%;
		max-width: 1000px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 40px;
		flex-wrap: wrap;
		
		&:after {
			content: "";
			display: block;
			width: calc(50% - 20px);
			height: 0;
		}
		

		& div.job-post {
			width: calc(50% - 20px);
			max-width: 470px;
			/* margin: 0 auto; */
			border-radius: var(--br-m);
			background: var(--color-base);
			overflow: hidden;

			& h1.job-title {
				font-size: var(--font-sizeL);
				font-weight: bold;
				padding: 1em 0;
				background: var(--color-sub1);
				color: var(--color-base);

			}
		
			& div.job-details {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-wrap: wrap;
				gap: 20px;
				padding: 40px;
				text-align: left;
			& .job-title {

			}
			.job-detail-item {
				flex: calc(50% - 20px);

			}
			& h2 {
				font-size: var(--font-sizeM);
				margin-bottom: 5px;
			}
			& div.job-detail-item.job-position {
				
				& h2.job-detail-heading {

		
				}
		
				& p.job-detail-content {
		
				}
			}
		
			& div.job-detail-item.job-period {
				& h2.job-detail-heading {
		
				}
		
				& p.job-detail-content {
		
				}
			}
		
			& div.job-detail-item.job-hours {
				& h2.job-detail-heading {
		
				}
		
				& p.job-detail-content {
		
				}
			}
		
			& div.job-detail-item.job-holidays {
				& h2.job-detail-heading {
		
				}
		
				& p.job-detail-content {
		
				}
			}
		
			& div.job-detail-item.job-overtime {
				& h2.job-detail-heading {
		
				}
		
				& p.job-detail-content {
		
				}
			}
		
			& div.job-detail-item.job-comment {
				flex: 100%;
				border-top: 2px var(--color-accent1) dotted;
				padding-top: 20px;
				& h2.job-detail-heading {
		
				}
		
				& p.job-detail-content {
		
				}
			}
			}
		}
	}
}