@charset "utf-8";

/*-----------------------------------------------------------------------------------------------*/
/* 仕事を知る -----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/* 見出し ---------------------------------------------------------------------------------------*/
.mainheader {
	background-color: var(--bg-blue);
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: var(--margin-10);
	min-height: 140px;/*200px;/*72px;*/
	padding: var(--margin-20) 50px;
	position: relative;
}

/* 見出し */
.mainheader h1 {
	font-size: var(--font-s);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
}
.mainheader h1 span {
	font-size: var(--font-h1);
	font-weight: var(--weight-r);
}

.mainheader .catch {
	font-size: var(--font-h2);
	line-height: var(--line-s);
	text-align: justify;
}

/* < > */
.mainheader .prev,
.mainheader .next {
	height: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
}
.mainheader .prev { left: 5px; }
.mainheader .next { right: 5px; }
.mainheader .prev a,
.mainheader .next a {
	background-color: var(--color-black);
	display: block;
	height: 100%;
	mask: url("../images/icon_job_arrow.svg") center no-repeat;
	mask-size: 16px auto;
	width: 100%;
}
.mainheader .prev a { transform: rotate(180deg); }


/* YouTube --------------------------------------------------------------------------------------*/
.main .youtube {
	aspect-ratio: 16 / 9;
	background-color: var(--color-border-r);
	margin: 0 auto;
	position: relative;
	max-width: var(--main-width-s);
}
.main .youtube iframe {
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
	width: 100%;
}

.main .youtube span {
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-h1);
	font-weight: var(--weight-b);
	letter-spacing: 0.05em;
	height: 100%;
	width: 100%;
}



/* 業務内容 -------------------------------------------------------------------------------------*/
.main .container.content { margin-top: var(--margin-120); }

.main .content .contents,
.main .content .item {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-60);
}
.main .content .item { row-gap: var(--margin-30); }
.main .content .comment { margin-top: var(--margin-10); }


/* ある1日の様子 --------------------------------------------------------------------------------*/
.main .oneday .contents {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-60);
}
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 530px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 仕事を知る -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 見出し ---------------------------------------------------------------------------------------*/
	.mainheader {
		padding-right: var(--margin-90);
		padding-left: var(--margin-90);
	}
	/* < > */
	.mainheader .prev { left: var(--margin-20); }
	.mainheader .next { right: var(--margin-20); }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 768px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 仕事を知る -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 見出し ---------------------------------------------------------------------------------------*/
	.mainheader {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		column-gap: var(--margin-20);
	}
	.mainheader h1 {
		border-right: var(--color-border) solid 1px;
		padding-right: var(--margin-20);
	}
	/* 業務内容 -------------------------------------------------------------------------------------*/
	.main .content .item {
		flex-direction: row;
		column-gap: var(--margin-20);
	}
	.main .content .image {
		width: 34%;
		max-width: 400px;
	}
	.main .content .text { flex: 1; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1024px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 仕事を知る -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 見出し ---------------------------------------------------------------------------------------*/
	.mainheader { column-gap: var(--margin-30); }
	.mainheader h1 { padding-right: var(--margin-30); }
	/* 業務内容 -------------------------------------------------------------------------------------*/
	.main .content .item { column-gap: var(--margin-30); }
	/* ある1日の様子 --------------------------------------------------------------------------------*/
	.main .oneday .contents {
		flex-direction: row;
		column-gap: var(--margin-30);
	}
	.main .oneday .button { flex: 1; }
	.main .oneday .image {
		width: 40%;
		max-width: 370px;
	}
	.main .oneday .swiper-wrapper {
		flex-direction: column;
		row-gap: var(--margin-30);
	}
	.main .button.long .a { align-items: flex-start; }
	.main .button.long .a .group { flex-direction: column; }
	.main .swiper-pagination { display: none; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1280px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 仕事を知る -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* ある1日の様子 --------------------------------------------------------------------------------*/
	.main .oneday .contents { column-gap: var(--margin-60); }
	/*-----------------------------------------------------------------------------------------------*/
}