@charset "UTF-8";


main {
	padding-top: 0px;
	& > h1 {
		text-align: left;
		width: 100%;
/* 		height: 400px; */
		aspect-ratio: 10 / 8;
		margin: 0 auto;
		padding-top: 100px;
		/* background: url(../jobs_img/jobs_mv.webp) no-repeat; */
		background:  url(/top_img/mv_back_sp.webp) no-repeat,url(../jobs_img/jobs_mv.webp) no-repeat, var(--color-sub4);
		background-size: contain, 150%;
		background-position:top left, -30vw 100%;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
		color: var(--color-base);


		& .tit {
			display: block;
			width: 70%;
			height: 2em;
			line-height: 1em;
			font-size: 2.0rem;
			font-family: var(--font-go);
			font-weight: bold;
			
		}
		& .subtitle {
			display: block;
			width: 70%;
			height: 2em;
			line-height: 2em;
			font-size: var(--font-sizeM);
			font-family: var(--font-go);
			font-weight: normal;

		}

	}


	& section.joblist {
		width: 100%;

		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 40px;
		flex-wrap: wrap;
		

			& div.job-post {
				width: calc(100% - 80px);
				max-width: 470px;
				margin: 0 auto;
				border-radius: var(--br-s);
				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 20px;
					text-align: left;
				.job-title {

				}
				.job-detail-item {
					flex: 1 100%;

				}
				& h2 {
					font-size: var(--font-sizeM);
					margin-bottom: 10px;
				}
				& 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 {
			
					}
				}
				}
			}
	}
}