@charset "UTF-8";


/*================================================
 *  RECRUIT 仕事と人の紹介 用（works01～）
 ================================================*/


/*******共通*******/
section:not(#main_area) {
	margin-top: 200px;
}


section h3[class*="head_title_anime"] {
	text-align: center;
	margin-bottom: 120px;
}
section h3[class*="head_title_anime"] > span {
	font-size: 100px;
}
section h3[class*="head_title_anime"] em {
	margin: 2em 0 0;
}





/*******メインエリア*******/
section#main_area {
	margin-top: 130px;
}
section#main_area .inner {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 20px 170px;
}
section#main_area .inner::after {
	position: absolute;
	content: '';
	top: 0;
	right: 180px;
	width: 100vw;
	height: 100%;
	background-color: #1e1e1e;
	z-index: -1;
}
section#main_area .inner .img_main {
	display: block;
	top: -200px;
	margin-bottom: -200px;
	width: 1580px;
	height: 680px;
	position: relative;
}

section#main_area .inner .intro_box {
	margin-top: 140px;
}
section#main_area .inner .intro_box .unit_txt {
	max-width: 660px;
	padding-right: 20px;
}
section#main_area .inner .intro_box .unit_txt h3.title_anime {
	padding: 0 0 90px;
}
section#main_area .inner .intro_box .unit_txt h3.title_anime.move > span {
	display: block;
	font-size: 32px;
}
section#main_area .inner .intro_box .unit_txt h3.title_anime > em {
	font-size: 82px;
	font-weight: normal;
	letter-spacing: 0.1em;
}
section#main_area .inner .intro_box .unit_txt .inr {
	padding-left: 80px;
}
section#main_area .inner .intro_box .unit_txt .inr h4 {
	font-size: 42px;
	font-weight: bold;
	line-height: 1.75;
	letter-spacing: 0.1em;
	margin: -0.375em 0 0.5em;
}
section#main_area .inner .intro_box .unit_txt .inr p {
	font-size: 20px;
	line-height: 3;
}
section#main_area .inner .intro_box .unit_txt .inr p + p {
	margin-top: 0.5em;
}

section#main_area .inner .intro_box .unit_img {
	width: 520px;
}
section#main_area .inner .intro_box .unit_img .img_scale_list {
	width: 600px;
}
section#main_area .inner .intro_box .unit_img .img_scale_list li:nth-child(2) {
	width: 450px;
	margin: 20px 0 0 auto;
}




/*******仕事の内容*******/
section#works_area .content_list {
	max-width: 1360px;
	padding: 0 50px;
	margin: -90px auto 0;
}
section#works_area .content_list figure {
	width: 600px;
	width: calc(50% - 30px);
	margin-top: 90px;
}
section#works_area .content_list figure .img_scale {
	height: 400px;
}
section#works_area .content_list figure figcaption {
	padding: 60px 40px 0;
	letter-spacing: 0.06em;
}
section#works_area .content_list figure figcaption h4 {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 1em;
}


@media screen and (max-width: 1000px) {
	
	section#works_area .content_list {
		display: block;
		max-width: 700px;
	}
	section#works_area .content_list figure {
		width: 100%;
	}
}




/*******1日の仕事の流れ*******/
section#oneday_area .inner .oneday_list {
	padding: 70px 0 0 80px;
}
section#oneday_area .inner .oneday_list dt {
	position: relative;
}
section#oneday_area .inner .oneday_list dt,
section#oneday_area .inner .oneday_list dt > span {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	text-align: left;
}
section#oneday_area .inner .oneday_list dt img,
section#oneday_area .inner .oneday_list dt > span {
	flex-shrink: 0;
}
section#oneday_area .inner .oneday_list dt > span {
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	height: 50px;
	width: 170px;
}
section#oneday_area .inner .oneday_list dt > span span {
	font-size: 24px;
	margin-left: 0.75em;
}
section#oneday_area .inner .oneday_list dt > em {
	font-size: 36px;
	font-weight: bold;
	line-height: 50px;
	letter-spacing: 0.04em;
}
section#oneday_area .inner .oneday_list dd {
	padding: 20px 0 60px 170px;
	position: relative;
}
section#oneday_area .inner .oneday_list dd:last-of-type {
	padding-bottom: 0;
}
section#oneday_area .inner .oneday_list dt:not(:last-of-type)::before,
section#oneday_area .inner .oneday_list dd:not(:last-of-type)::before {
	position: absolute;
	content: '';
	top: -1px;
	left: 25px;
	transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	width: 4px;
	height: 102%;
	height: calc(100% + 2px);
	z-index: -1;
	background-color: var(--color-red);
}
section#oneday_area .inner .oneday_list dt:not(:last-of-type)::before {
	top: 3px;
}
section#oneday_area .inner .oneday_list dd:not(:last-of-type)::before {
	top: -1px;
}


section#oneday_area .inner .unit_img {
	width: 320px;
}
section#oneday_area .inner .unit_img picture {
	display: block;
	position: relative;
	left: 100%;
	transform: translate(-100%,0);
	-webkit-transform: translate(-100%,0);
	width: 720px;
}


@media screen and (max-width: 1000px) {
	section#oneday_area .inner {
		display: block;
		max-width: 820px;
	}
	
	section#oneday_area .inner .unit_img,
	section#oneday_area .inner .unit_img picture {
		width: 100%;
	}
	section#oneday_area .inner .unit_img {
		margin-top: 50px;
	}
	section#oneday_area .inner .unit_img picture {
		position: static;
		transform: none;
		-webkit-transform: none;
	}
}




/*******インタビュー*******/
section#interview_area .interview_list {
	max-width: 1300px;
	margin: -40px auto 0;
}
section#interview_area .interview_list::after {
	position: absolute;
	content: '';
	top: 140px;
	right: 370px;
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	z-index: -1;
}
section#interview_area .interview_list dl {
	border: 2px solid;
	width: 610px;
	width: calc(50% - 40px);
	margin: 40px 20px 0;
	padding: 70px 80px;
}
@media screen and (min-width: 767.1px) {
	section#interview_area .interview_list dl:nth-child(even) {
		animation-delay: 0.3s;
	}
}
section#interview_area .interview_list dl dt {
	font-weight: bold;
	margin-bottom: 1em;
}





/*******その他の仕事（共通）*******/
section#other_area {
	margin-top: 340px;
}
section#other_area h3 {
	font-size: 42px;
	font-weight: bold;
	letter-spacing: 0.02em;
	text-align: center;
	margin-bottom: 100px;
}


section#other_area .staff_list {
	margin-top: -150px;
}
section#other_area .staff_list li {
	max-width: 440px;
	margin: 150px 55px 0;
}
.page-works01 section#other_area .staff_list li:nth-of-type(1),
.page-works02 section#other_area .staff_list li:nth-of-type(2),
.page-works03 section#other_area .staff_list li:nth-of-type(3) {
	display: none;
}
@media screen and (max-width: 1650px) and (min-width: 1250px) {
	section#other_area .staff_list li {
		width: calc((100% / 3) - 110px);
	}
}
@media screen and (max-width: 1250px) and (min-width: 900px) {
	section#other_area .staff_list li {
		width: calc((100% / 2) - 110px);
	}
}

section#other_area .staff_list li a {
	display: block;
}
section#other_area .staff_list li a:hover {
	opacity: 1;
}
section#other_area .staff_list li figure .thumb {
	height: 600px;
	overflow: inherit;
	position: relative;
}
section#other_area .staff_list li figure .thumb picture {
	display: block;
	overflow: hidden;
	height: 100%;
	width: 100%;
}
section#other_area .staff_list li figure .thumb .img_arrow {
	position: absolute;
	bottom: 0;
	right: -40px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	z-index: 1;
}
@media screen and (min-width: 767.1px) {
	.page-works01 section#other_area .staff_list li:nth-of-type(3) figure .thumb .img_arrow.move,
	.page-works02 section#other_area .staff_list li:nth-of-type(3) figure .thumb .img_arrow.move,
	.page-works03 section#other_area .staff_list li:nth-of-type(2) figure .thumb .img_arrow.move {
		animation-delay: 0.3s;
	}
}

section#other_area .staff_list li figure .thumb .img_arrow img,
section#other_area .staff_list li a:hover figure .thumb .img_arrow img {
	-webkit-transform: rotate(45deg)!important;
	transform: rotate(45deg)!important;
}

section#other_area .staff_list li figure figcaption {
	padding-top: 40px;
	font-size: 58px;
	letter-spacing: 0.1em;
	margin-right: -1em;
}
section#other_area .staff_list li figure figcaption span {
	display: block;
	font-size: 41.38%;
	margin-bottom: 1.1em;
}
@media screen and (max-width: 1650px) and (min-width: 1250px) {
	section#other_area .staff_list li figure figcaption {
		font-size: clamp(2.375rem, -1.531rem + 5vw, 3.625rem);
	}
}
@media screen and (max-width: 1100px) and (min-width: 900px) {
	section#other_area .staff_list li figure figcaption {
		font-size: clamp(2.375rem, 0.188rem + 5vw, 3.625rem);
	}
}



/*ページナビ*/
section#other_area #page_nav {
	max-width: inherit;
	margin: 80px -11px 0;
	padding: 0;
}
section#other_area #page_nav li {
	width: 352px;
	margin: 22px 11px 0;
}
@media screen and (min-width: 1050px) {
	section#other_area #page_nav li {
		width: calc((100% / 3) - 22px);
	}
}





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



/*******共通*******/
#pageTitle {
	margin-bottom: 0;
}


section:not(#main_area) {
	margin-top: 25vw;
}


section h3[class*="head_title_anime"] {
	text-align: center;
	margin-bottom: 10vw;
	padding-left: 0;
}
section h3[class*="head_title_anime"] > span {
	font-size: 8.2vw;
}

section h3[class*="head_title_anime"] em {
	margin-top: 4.5vw;
}


/*******メインエリア*******/
section#main_area {
	margin-top: 25vw;
}
section#main_area .inner {
	background-color: #1e1e1e;
	max-width: inherit;
	padding: 0;
}
section#main_area .inner::after {
	top: auto;
	bottom: -1px;
	right: 0;
	width: 100vw;
	height: 110vw;
	background-color: #fff;
	z-index: 0;
}
section#main_area .inner .img_main {
	top: -25vw;
	margin: 0 0 -25vw auto;
	width: 94vw;
	height: 66vw;
}

section#main_area .inner .intro_box {
	margin-top: 15vw;
	padding: 0 6vw;
}
section#main_area .inner .intro_box .unit_txt {
	max-width: inherit;
	padding: 0;
}
section#main_area .inner .intro_box .unit_txt h3.title_anime {
	padding: 0 0 10vw;
}
section#main_area .inner .intro_box .unit_txt h3.title_anime.move > span {
	font-size: 4.2vw;
}
section#main_area .inner .intro_box .unit_txt h3.title_anime > em {
	font-size: 10.1vw;
}
section#main_area .inner .intro_box .unit_txt .inr h4 {
	font-size: 5.6vw;
	letter-spacing: 0.08em;
}
section#main_area .inner .intro_box .unit_txt .inr p {
	font-size: 4vw;
	line-height: 2.5;
}

section#main_area .inner .intro_box .unit_img {
	margin-top: 10vw;
	position: relative;
	z-index: 2;
}
section#main_area .inner .intro_box .unit_img .img_scale_list {
	width: 100%;
}
section#main_area .inner .intro_box .unit_img .img_scale_list li:nth-child(1) {
	width: 66vw;
}
section#main_area .inner .intro_box .unit_img .img_scale_list li:nth-child(2) {
	width: 58vw;
	margin: 3vw -4vw 0 auto;
}





/*******仕事の内容*******/
section#works_area .content_list {
	margin: 0 auto;
}

section#works_area .content_list figure {
	margin-top: 0;
}
section#works_area .content_list figure + figure {
	margin-top: 10vw;
}
section#works_area .content_list figure .img_scale {
	height: 53vw;
}
section#works_area .content_list figure figcaption {
	padding: 9vw 2.5vw 0;
}
section#works_area .content_list figure figcaption h4 {
	font-size: 5.6vw;
}




/*******1日の仕事の流れ*******/
section#oneday_area .inner .oneday_list {
	padding: 0;
}
section#oneday_area .inner .oneday_list dt > span {
	height: 8vw;
	width: 28vw;
}
section#oneday_area .inner .oneday_list dt > span img {
	width: 8vw;
	height: auto;
}
section#oneday_area .inner .oneday_list dt > span span {
	font-size: 4vw;
}
section#oneday_area .inner .oneday_list dt > em {
	font-size: 5.6vw;
	line-height: 8vw;
}
section#oneday_area .inner .oneday_list dd {
	padding: 3vw 0 9vw 28vw;
}
section#oneday_area .inner .oneday_list dt:not(:last-of-type)::before,
section#oneday_area .inner .oneday_list dd:not(:last-of-type)::before {
	left: 4vw;
	width: 2px;
}

section#oneday_area .inner .unit_img {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	width: 90vw;
	margin: 10vw 0 0;
}
section#oneday_area .inner .unit_img picture {
	width: 50%;
	height: auto;
}










/*******インタビュー*******/
section#interview_area .interview_list {
	margin: 0 auto;
}
section#interview_area .interview_list::after {
	top: 13vw;
	right: 10vw;
	height: calc(100% + 8vw);
}
section#interview_area .interview_list dl {
	width: 100%;
	margin: 0;
	padding: 11vw 10vw;
}
section#interview_area .interview_list dl + dl {
	margin-top: 10vw;
}



/*******その他の仕事（共通）*******/
section#other_area {
	margin-top: 40vw;
}
section#other_area h3 {
	font-size: 7.2vw;
	margin-bottom: 12vw;
}



section#other_area .staff_list {
	margin-top: -15vw;
}
section#other_area .staff_list li {
	max-width: inherit;
	width: 100%;
	margin: 15vw 0 0;
}
section#other_area .staff_list li figure .thumb {
	height: 85vw;
}
section#other_area .staff_list li figure .thumb .img_arrow {
	right: -6.5vw;
}
section#other_area .staff_list li figure .thumb .img_arrow img {
	width: 55vw;
}

section#other_area .staff_list li figure figcaption {
	padding: 6vw 0 0 5vw;
	font-size: 8vw;
}
section#other_area .staff_list li figure figcaption span {
	font-size: 4vw;
}








/*ページナビ*/
section#other_area #page_nav {
	margin: 15vw 0 0;
}
section#other_area #page_nav li {
	width: 100%;
	margin: 0;
}
section#other_area #page_nav li + li {
	margin-top: 5vw;
}








	
}