@charset "UTF-8";

/*================================================
 *  働く人を知る（interview）
 ================================================*/

main {
	/*overflow: visible;*/
}


/*===============共通===============*/
/*******見出し*******/
h3.int_title {
	letter-spacing: 0.04em;
	text-align: center;
	margin-bottom: 100px;
}
h3.int_title em {
	font-size: 64px;
}
h3.int_title span {
	display: block;
	font-size: 20px;
	margin-top: 1.25em;
}






/*******メインエリア*******/
section#main_area {
	padding-top: 55px;
}
section#main_area .box {
	min-height: 780px;
	padding: 120px 0 50px;
}
@media screen and (min-width:501px) {
	section#main_area .box::after {
		background-color: #fff;
		position: absolute;
		content: '';
		top: -1%;
		right: 0;
		width: 300px;
		width: calc(50vw - 650px);
		height: 102%;
		z-index: 0;
	}
}


section#main_area .box .img_main {
	position: absolute;
	top: -55px;
	left: 50%;
	margin-left: -270px;
	z-index: 5;
}


section#main_area .box .inr {
	max-width: 1260px;
	width: 100%;
	margin: 0 auto;
	padding-left: 60px;
	z-index: 10;
}

section#main_area .box .inr h3 {
	margin-left: -10px;
}

section#main_area .box .inr .info_list {
	width: 225px;
	margin-top: 45px;
	text-align: center;
}
section#main_area .box .inr .info_list dt {
	border: 1px solid;
	font-size: 26px;
	letter-spacing: 0.06em;
	padding: 0.5em 0;
}
section#main_area .box .inr .info_list dd {
	font-size: 20px;
	letter-spacing: 0.02em;
	margin-top: 0.9em;
}

section#main_area .box .inr .tag_list {
	margin-top: 40px;
	line-height: 2.25;
}




/*******イントロダクション*******/
section#intro_area figure {
	max-width: 1260px;
	width: 100%;
	margin: 0 auto;
}
section#intro_area figure .photo {
	width: calc(100% - 720px);
}
@media screen and (min-width:501px) {
	section#intro_area figure .photo img {
		position: relative;
		left: 100%;
		transform: translate(-100%,0);
		-webkit-transform: translate(-100%,0);
	}
}
section#intro_area figure figcaption {
	width: 720px;
	padding: 80px 60px 0 80px;
	flex-shrink: 0;
}
section#intro_area figure figcaption h6 {
	font-size: 26px;
	line-height: 1.5;
	letter-spacing: 0.06em;
	margin-bottom: 0.5em;
}
section#intro_area figure figcaption h6:nth-of-type(n+2) {
	margin-top: 1.2em;
}
section#intro_area figure figcaption p {
	font-size: 22px;
	line-height: 2.75;
}



/*******理由*******/
section#reason_area {
	padding-top: 160px;
}
section#reason_area .inner {
	max-width: 1420px;
	width: 100%;
	margin: 0 auto;
}
section#reason_area .inner h3 {
	margin-bottom: 80px;
	text-align: center;
}
section#reason_area .inner h3:nth-of-type(n+2) {
	margin-top: 160px;
}
section#reason_area .inner figure:nth-of-type(even) {
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
section#reason_area .inner figure figcaption {
	font-size: 20px;
	line-height: 2.5;
	margin-top: -0.75em;
	width: 770px;
	width: calc(100% - 640px);
	padding: 0 80px 0 140px;
}
section#reason_area .inner figure:nth-of-type(even)  figcaption {
	padding: 0 140px 0 80px;
}
section#reason_area .inner figure .movie {
	flex-shrink: 0;
	width: 640px;
}
section#reason_area .inner figure .movie div {
	height: 0;
	position: relative;
	padding-top: 75%;
	overflow: hidden;
}
section#reason_area .inner figure .movie div video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




/*******質問*******/
section#faq_area {
	margin-top: 160px;
	background-color: #f2f2f2;
}
section#faq_area::after {
	position: absolute;
	content: '';
	bottom: -1px;
	left: 0;
	background-color: #fff;
	width: 100%;
	height: 70px;
}
section#faq_area .inner {
	max-width: 1140px;
	margin: 0 auto;
	padding-top: 90px;
	z-index: 10;
}
section#faq_area .inner .faq_list {
	width: 730px;
	padding : 20px 120px 0 0;
}
section#faq_area .inner .faq_list dt,
section#faq_area .inner .faq_list dd {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}
section#faq_area .inner .faq_list dt:nth-of-type(n+2) {
	margin-top: 70px;
}
section#faq_area .inner .faq_list dt > span,
section#faq_area .inner .faq_list dd > span {
	font-size: 38px;
	width: 70px;
	flex-shrink: 0;
}
section#faq_area .inner .faq_list dt em {
	font-size: 28px;
	line-height: 1.75;
	letter-spacing: 0.08em;
	margin-top: -0.3em;
}
section#faq_area .inner .faq_list dd {
	margin-top: 35px;
}
section#faq_area .inner .faq_list dd > div {
	font-size: 20px;
	line-height: 2.25;
	margin-top: -0.5em;
}



section#faq_area .inner .img_box {
	width: calc(100% - 730px);
	height: 1130px;
}
section#faq_area .inner .img_box img {
	position: absolute;
}
section#faq_area .inner .img_box .img01 {
	top: 0;
	left: 0;
}
section#faq_area .inner .img_box .img02 {
	top: 480px;
	left: 280px;
}
section#faq_area .inner .img_box .img03 {
	bottom: 0;
	left: 35px;
}







/*******働く人*******/
section#interview_area {
	padding-top: 160px;
}




/*******仕事を知る バナー*******/
section#job_bnr_area {
	padding-top: 160px;
}
section#job_bnr_area a {
	display: block;
	max-width: 820px;
	margin: 0 auto;
	position: relative;
}
section#job_bnr_area a > img {
	max-width: 100%;
}
section#job_bnr_area a h3 {
	position: absolute;
	right: 0;
	bottom: 0;
	background-color: rgba(0,166,60,0.8);
	width: 380px;
	height: 120px;
	padding-left: 40px;
}
section#job_bnr_area a h3 em {
	font-size: 28px;
	font-weight: bold;
	letter-spacing: 0.06em;
}
section#job_bnr_area a h3 [class*="ff"] {
	display: block;
	letter-spacing: 0.06em;
	margin: 0.95em 0 0 2px;
}
section#job_bnr_area a h3 [class*="icon"] {
	position: absolute;
	right: 28px;
	top: 50%;
	transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	font-size: 33px;
}











/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:500px) {


/*===============共通===============*/
/*******見出し*******/
h3.int_title {
	margin-bottom: 10vw;
}
h3.int_title em {
	font-size: 9.8vw;
	line-height: 1.19;
}
h3.int_title span {
	font-size: 4.2vw;
	margin-top: 1.25em;
}






/*******メインエリア*******/
section#main_area {
	padding-top: 12vw;
}
section#main_area .box {
	min-height: inherit;
	padding: 63vw 0 10vw;
}


section#main_area .box .img_main {
	top: -12vw;
	left: auto;
	right: 0;
	margin-left: auto;
	width: 93vw;
	transform: none!important;
}


section#main_area .box .inr {
	max-width: inherit;
	width: 80vw;
	padding-left: 0;
}

section#main_area .box .inr h3 {
	margin-left: -1vw;
}
section#main_area .box .inr h3 img {
	height: 24vw;
}
section#main_area .box .inr h3.sp_row03 img {
	height: 36.8vw; /*3行用*/
}


section#main_area .box .inr .info_list {
	width: auto;
	margin-top: 8vw;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
section#main_area .box .inr .info_list dt {
	font-size: 4.8vw;
	padding: 0.5em 0.8em;
	min-width: 33vw;
}
section#main_area .box .inr .info_list dd {
	font-size: 4vw;
	margin: 0 0 0 1em;
	text-align: left;
}

section#main_area .box .inr .tag_list {
	display: grid; 
	grid-template-columns: auto 1fr; 
	grid-template-rows: auto;
	gap: 0px 1.3em; 
	margin: 7vw 0 0;
}



/*******イントロダクション*******/
section#intro_area figure {
	max-width: inherit;
}
section#intro_area figure .photo {
	width: 100%;
}
section#intro_area figure .photo img {
	width: 100%;
}
section#intro_area figure figcaption {
	width: 100%;
	padding: 7vw 8.5vw 0;
}
section#intro_area figure figcaption h6 {
	font-size: 4.5vw;
}
section#intro_area figure figcaption h6:nth-of-type(n+2) {
	margin-top: 1em;
}
section#intro_area figure figcaption p {
	font-size: 4vw;
	line-height: 2;
}







/*******理由*******/
section#reason_area {
	padding-top: 15vw;
}
section#reason_area .inner {
	max-width: inherit;
	width: 85vw;
}
section#reason_area .inner h3 {
	margin-bottom: 7vw;
	text-align: left;
}
section#reason_area .inner h3:nth-of-type(n+2) {
	margin-top: 15vw;
}
section#reason_area .inner h3 img {
	height: 21vw;
}
section#reason_area .inner figure figcaption {
	font-size: 4vw;
	line-height: 2;
	margin: 1em 0;
	width: 100%;
	padding: 0!important;
}
section#reason_area .inner figure .movie {
	width: 100%;
}












/*******質問*******/
section#faq_area {
	margin-top: 18vw;
}
section#faq_area::after {
	height: 8vw;
}
section#faq_area .inner {
	max-width: inherit;
	padding-top: 0;
}
section#faq_area .inner .faq_list {
	width: 82vw;
	padding : 12vw 0 0;
	margin: 0 auto;
}
section#faq_area .inner .faq_list dt:nth-of-type(n+2) {
	margin-top: 10vw;
}
section#faq_area .inner .faq_list dt > span,
section#faq_area .inner .faq_list dd > span {
	font-size: 6.4vw;
	width: 9.5vw;
}
section#faq_area .inner .faq_list dt em {
	font-size: 5.3vw;
}
section#faq_area .inner .faq_list dd {
	margin-top: 6vw;
}
section#faq_area .inner .faq_list dd > div {
	font-size: 4vw;
	line-height: 2;
	margin-top: -0.5em;
}



section#faq_area .inner .img_box {
	width: 75vw;
	height: 150vw;
	margin : 10vw 0 0 13vw;
}
section#faq_area .inner .img_box .img01 {
	width: 60vw;
}
section#faq_area .inner .img_box .img02 {
	width: 37vw;
	top: 64vw;
	left: auto;
	right: 0;
}
section#faq_area .inner .img_box .img03 {
	width: 56vw;
	left: 5vw;
}




/*******働く人*******/
section#interview_area {
	padding-top: 20vw;
}




/*******仕事を知る バナー*******/
section#job_bnr_area {
	padding-top: 18vw;
}
section#job_bnr_area a {
	max-width: inherit;
	width: 85vw;
}
section#job_bnr_area a > img {
	width: 100%;
}
section#job_bnr_area a h3 {
	width: 61vw;
	height: 17.5vw;
	padding-left: 5vw;
}
section#job_bnr_area a h3 em {
	font-size: 5vw;
}
section#job_bnr_area a h3 [class*="ff"] {
	font-size: 2.9vw;
	margin: 0.75em 0 0 0.3vw;
}
section#job_bnr_area a h3 [class*="icon"] {
	right: 3.5vw;
	font-size: 4.2vw;
}












	
}